随笔分类 - CSS3
摘要:z-index 图层~ z-index:默认是0,最高无线~999 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css
阅读全文
摘要:绝对定位 定位:基于xxx定位,上下左右。 没有父级元素定位的前提下,相对于浏览器定位 假设父级元素存在定位,我们通常会相对于父级元素进行偏移 在父级元素范围内移动 相对于父级或浏览器的位置,进行指定的偏移,绝对定位的话,它不在标准文档流中,原来的位置不会被保留 <!DOCTYPE html> <h
阅读全文
摘要:定位 相对定位 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 相对定位 相对于自己原来的位置进行偏移 --> <style> div{ margin: 10px; pa
阅读全文
摘要:父级边框塌陷的问题 clear /* clear:right; 右侧不允许有浮动元素 clear:left; 左侧不允许有浮动元素 clear:both; 两侧不允许有浮动元素 clear:none; */ 解决方案: 增加父级元素的高度~ #father{ border: 1px #000 sol
阅读全文
摘要:浮动 标准文档流 块级元素:独占一行 h1~h6 p div 列表... 行内元素:不独占一行 span a img strong... 行内元素可以被包含在块级元素中,反之,则不可以。 display div{ width: 100px; height: 100px; border: 1px so
阅读全文
摘要:圆角边框 4个角 <style> div { width: 100px; height: 100px; border: 10px solid red; border-radius: 50px 20px 10px 5px; } </style>
阅读全文
摘要:内外边距 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--外边距的妙用:居中元素 margin: 0 auto; --> <style> #box{ width:300px
阅读全文
摘要:盒子模型 什么是盒子模型 margin:外边距 padding:内边距 border:边框 边框 边框的粗细 边框的样式 边框的颜色
阅读全文
摘要:背景 背景颜色 背景图片 div { width: 1000px; height: 700px; border: 1px solid red; background-image: url("images/wsh2.jpg"); /*默认是全部平铺的 repeat*/ } .div1{ backgro
阅读全文
摘要:列表 /*ul li*/ /* list-style: none:去掉圆点 circle:空心圆 decimal:数字 square:正方形 */ /* ul{ background: #a0a0a0; } */ ul li{ height: 30px; list-style: none; text
阅读全文
摘要:阴影 /*text-shadow:阴影颜色,水平偏移,垂直偏移,阴影半径*/ #price{ text-shadow: #3033ff 10px 10px 2px; } 超链接伪类 正常情况下,a , a:hover /*默认的状态*/ a{ text-decoration: none; color
阅读全文
摘要:颜色 color rgb rgba 文本对齐方式 text-align=center 首行缩进 text-indent:2em **行高 line-height:**单行文字上下居中!line-height = height 装饰 text-decoration 文本图片水平对齐:vertical-
阅读全文
摘要:美化网页元素 为什么要美化网页 有效的传递页面信息 美化网页,页面漂亮,才能吸引用户 凸显页面的主题 提高用户的体验 span标签:重点要突出的字,使用span标签套起来 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <
阅读全文
摘要:id + class结合~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .demo a{ float: left; display: block; height
阅读全文
摘要:伪类:条件 /*ul的第一个子元素*/ ul li:first-child{ background: green; } /*ul的最后一个子元素*/ ul li:last-child{ background: seagreen; } /*选中p1:定位到父元素,选择当前的第一个元素 选择当前p元素的
阅读全文
摘要:后代选择器:在某个元素的后面 祖爷爷 爷爷 爸爸 你 /*后代选择器*/ body p{ background: red; } 子选择器,一代,儿子 /*子选择器*/ body>p{ background: green; } 相邻兄弟选择器 同辈 /*相邻兄弟选择器:只有一个,相邻(向下)*/ .a
阅读全文
摘要:选择器 作用:选择页面上的某一个或者某一类元素 基本选择器 标签选择器:选择一类标签 标签{} <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*标签选择器,会选
阅读全文
摘要:CSS的三种导入方式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--内部样式--> <style> h1{ color:green; } </style> <link r
阅读全文
摘要:练习格式: 快速入门 style 基本入门 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--规范,<style> 可以编写css的代码,每一个声明最好使用分号结尾 语法:
阅读全文
摘要:什么是CSS Cascading Style Sheets 层叠样式表 CSS:表现(美化网页) 字体,颜色,边距,高度,宽度,背景图片,网页定位,网页浮动...... 发展史 CSS1.0 CSS2.0 DIV(块)+ CSS,HTML 与CSS结构分离的思想,网页变得简单,SEO CSS2.1
阅读全文