CSS实例 CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。 CSS注释 /*这是注释*/ CSS的几种引入方式 内嵌式 内嵌式是在标记的style属性中设定CSS样式。不推荐大规模使用。 <p style="color: red">Hello world.</p> 嵌入式 嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下： <head> <meta charset="UTF-8"> <title>Title</title> <style> p{ background-color: #2b99ff; } </style> </head> 外部式 外部式就是将css写在一个单独的文件中，然后在页面进行引入即可。推荐使用此方式。 <link href="mystyle.css" rel="stylesheet" type="text/css"/> CSS选择器 什么是选择器？每一条css样式声明由两部分组成，如下： 选择器{ 样式; } 基本选择器 标签选择器 标签选择器顾名思义就是html代码中的标签。比如html、body、h系列的标签、p、div、img等等我们都可以使用标签选择器来设置对应的css样式属性。 例子：为页面中所有的段落设置字号为12px,字体颜色为红色，字体粗细为更粗。 <head> <meta charset="utf-8"> <title></title> <style type='text/css'> p{ color:red; font-size:12px; font-weight:bold; } </style> </head> <body> <h3>标题3</h3> <p>正文1</p> <img src="index01.jpeg" alt=""> <p>正文2</p> <img src="index02.jpeg" alt=""> </body> ID选择器 在网页中所有的标签都可以设置id，并且id不能重复。 1、以#开头 2、其中ID选择器名称可以任意起名(最好不要起中文) 3、ID的名称必须是唯一的 语法： #ID选择器名称{ css样式代码; } 类选择器 类选择器跟id有点相似，任何的标签元素都可以添加类(class)，但是不同的是类是可以重复，有“归类”的概念，并且同一个标签中可以携带多个类，用空格隔开。 1、英文圆点开头 2、其中类选择器名称可以任意起名(最好不要起中文) .类选择器名称{ css样式代码; } 注意： 样式类名不要用数字开头（有的浏览器不认）。 标签中的class属性如果有多个，要用空格分隔。 类和ID选择器的区别 相同点：可以应用于任何元素 不同点： 1.ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅仅一次。而类选择器可以使用多次 2.可以使用类选择器为一个元素同时设置多个样式。我们可以为一个元素同时设置多个样式，但值可以用类选择器的方法实现，ID选择器是不可以添加多个ID名字的。 通用选择器 通用选择器是功能最强大的选择器，它使用一个*号来表示，它的作用是匹配html中所有标签元素。 对页面中所有的文本设置为红色。 *{ color:red; } 后代选择器 顾名思义，所谓后代，就是父亲的所有后代(包括儿子、孙子、重孙子等)。 语法： div p{ css代码样式; } 使用空格表示后代选择器，上面表示 div是父元素，而p是div的后代元素。 /*li内部的a标签设置字体颜色*/ li a { color: green; } 子元素选择器 子代，仅仅表示父亲的亲儿子，只有亲儿子。使用>表示子代选择器。 子元素选择器选择的不是任意的后代元素，而是只是选择某个元素的子元素。 语法： div>p{ css代码样式; } /*选择所有父级是 <div> 元素的 <p> 元素*/ div>p { font-family: "Arial Black", arial-black, cursive; } 毗邻选择器 /*选择所有紧接着<div>元素之后的<p>元素*/ div+p { margin: 5px; } 弟弟选择器 /*i1后面所有的兄弟p标签*/ #i1~p { border: 2px solid royalblue; } 属性选择器 /*用于选取带有指定属性的元素。*/ p[title] { color: red; } /*用于选取带有指定属性和值的元素。*/ p[title="213"] { color: green; } /*找到所有title属性以hello开头的元素*/ [title^="hello"] { color: red; } /*找到所有title属性以hello结尾的元素*/ [title$="hello"] { color: yellow; } /*找到所有title属性中包含（字符串包含）hello的元素*/ [title*="hello"] { color: red; } /*找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素：*/ [title~="hello"] { color: green; } 分组和嵌套 分组 当多个元素的样式相同的时候，我们没有必要重复地为每个元素都设置样式，我们可以通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式。 例如： div, p { color: red; } 上面的代码为div标签和p标签统一设置字体为红色。 通常，我们会分两行来写，更清晰: div, p { color: red; } 嵌套 多种选择器可以混合起来使用，比如：.c1类内部所有p标签设置字体颜色为红色。 .c1 p { color: red; } 伪类选择器 /* 未访问的链接 */ a:link { color: #FF0000 } /* 已访问的链接 */ a:visited { color: #00FF00 } /* 鼠标移动到链接上 */ a:hover { color: #FF00FF } /* 选定的链接 */ a:active { color: #0000FF } /*input输入框获取焦点时样式*/ input:focus { outline: none; background-color: #eee; } 伪元素选择器 first-letter 常用的给首字母设置特殊样式： p:first-letter { font-size: 48px; color: red; } before /*在每个<p>元素之前插入内容*/ p:before { content:"*"; color:red; } after /*在每个<p>元素之后插入内容*/ p:after { content:"[?]"; color:blue; } before和after多用于清除浮动。 css的优先级 所谓CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序。 样式表中的特殊性描述了不同规则的相对权重，它的基本规则是： 1.内联样式表的权值最高 style="" ==> 1000 2.统计选择符中的ID属性个数。 #id ==> 100 3.统计选择符中的CLASS属性个数。 .class ==> 10 4.统计选择符中的HTML标签名个数。 p ==> 1 按这些规则将数字符串逐位相加，就得到最终的权重，然后在比较取舍时按照从左到右的顺序逐位比较 1、文内的样式优先级为1,0,0,0，所以始终高于外部定义。 2、有!important声明的规则高于一切。 3、如果!important声明冲突，则比较优先权。 4、如果优先权一样，则按照在源码中出现的顺序决定，后来者居上。 5、由继承而得到的样式没有specificity的计算，它低于一切其它规则(比如全局选择符*定义的规则)。 !important 的例子 我们在做网页代码时，有些特殊的情况需要为某些样式设置具有最高权值，怎么办？比如我们知道内联样式的权值是1000，比较大，那么我们可以使用!important来解决。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>!important的使用</title> <style type="text/css"> div{ color:green !important; } </style> </head> <body> <div id="box" style="color:red;"> <span>MJJ</span> </div> </body> </html> 注意：!important要写在分号的前面 效果发现文本变为了绿色。但是使用!important是一个坏习惯，应该尽量避免，因为这严重破坏了样式表中固有的权值比较规则，使得在调试bug变得更加困难。当两条相互冲突的带有!important规则作用与同一个标签，那么拥有最大优先级的将会被采用。 什么情况下可以使用!important? 第一种 你的网站上有一个设计了全站样式的css文件 同时你或者你的小伙伴写了一些很差的内联样式 第二种 #box p { color: blue; } p.awesome { color: red; } 怎样才能使得文本的颜色变为红色？这种情况下，如果不适用!important.第一条规则永远大于第二条的规则。 css字体属性 字体 font-family:'微软雅黑' 备选字体 font-family:'Microsoft Yahei','宋体','黑体' 字体大小 font-size: 14px 字重（粗细） font-weight: bold normal 默认值，标准粗细 bold 粗体 bolder 更粗 lighter 更细 100~900 设置具体粗细，400等同于normal，而700等同于bold inherit 继承父元素字体的粗细值 文本颜色 颜色属性被用来设置文字的颜色。 color: red; 十六进制值 - 如: ＃FF0000 一个RGB值 - 如: RGB(255,0,0) 颜色的名称 - 如: red 还有rgba(255,0,0,0.3)，第四个值为alpha, 指定了色彩的透明度/不透明度，它的范围为0.0到1.0之间。 文本修饰 如果想实现下划线或者删除线，使用text-decoration属性。 属性值 描述 none 无文本的修饰 underline 文本下划线 overline 文本上划线 line-through 穿过文本的线，可以模拟删除线。 文本缩进 比如我们通常写文章的时候，首字母要空两格。那么我们需要使用 text-indent 属性来实现。 它的属性值是像素(px、em、rem)单位。 em，它是一个相对单位，相对于p标签的字体大小来进行设置 我们希望整段文章描述，首行空两格，那么首先要知道字体大小是多少。比如字体大小默认是16px，那么我需要给它设置text-indent:32px;才能实现效果。 行间距 行间距，也叫行高，表示行与行之间的距离。 line-height 属性来进行设置行间距，它的单位为像素。 line-height:2em; 表示2倍行间距。 中文字间距、字母间距 如果想在网页排版中设置中文字间隔或字母间隔可以使用letter-spacing或word-spacing来实现。 文本对齐 在word文档中，我们通常都知道对文本甚至图片可以设置对齐方式，比如让文本或者图片居中显示。那么在网页排版中我们可以使用text-align属性来进行设置。 属性值 描述 left 文本左对齐，默认 right 文本右对齐 center 中心对齐 背景属性 /*背景颜色*/ background-color: red; /*背景图片*/ background-image: url('1.jpg'); /*背景重复*/ repeat(默认):背景图片平铺排满整个网页 repeat-x：背景图片只在水平方向上平铺 repeat-y：背景图片只在垂直方向上平铺 no-repeat：背景图片不平铺 background-repeat: no-repeat; /*背景位置*/ background-position: right top; background-position: 200px 200px; 支持简写： background:#ffffff url('1.png') no-repeat right top; 一个有趣的例子：鼠标滚动背景不动 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>滚动背景图示例</title> <style> * { margin: 0; } .box { width: 100%; height: 500px; background: url("https://www.luffycity.com/static/img/width-bank.1c9d1b0.png") no-repeat center center; background-attachment: fixed; } .d1 { height: 500px; background-color: tomato; } .d2 { height: 500px; background-color: steelblue; } .d3 { height: 500px; background-color: mediumorchid; } </style> </head> <body> <div class="d1"></div> <div class="box"></div> <div class="d2"></div> <div class="d3"></div> </body> </html> 常用的块状元素有： <div>、<p>、<h1>~<h6>、<ol>、<ul>、<li>、<dl>、<dt>、<table>、<form> 常用的内联元素有 <a>、<span>、<i>、<em>、<strong>、<label> 常见的内联块状元素有 <input>、<img> 块状元素 1.独自占据整一行 2.可以设置宽高 内联元素 1.所有的内联元素在一行内显示 2.不可以设置宽高 行内块元素 1.在一行内显示 2.可以设置宽高 CSS盒子模型 从内到外依次是 Content => padding => border => margin content(内容): 盒子的内容，显示文本和图像。 padding: 用于控制内容与边框之间的距离。 border(边框): 围绕在内边距和内容外的边框。 margin: 用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。 margin 外边距 .margin-test { margin-top:5px; margin-right:10px; margin-bottom:15px; margin-left:20px; } 推荐使用简写： .margin-test { margin: 5px 10px 15px 20px; } 顺序：上右下左 常见居中： .mycenter { margin: 0 auto; } padding 内填充 padding有四个方向，分别描述四个方向的padding。 单个属性分别设置不同方向的padding padding-top:10px; padding-right:3px; padding-bottom:50px; padding-left:70px; 综合属性，多个属性用空格隔开。 /*上 右 下 左 四个方向*/ padding: 20px 30px 40px 50px ; /*上 左右 下*/ padding: 20px 30px 40px; /* 上下 左右*/ padding: 20px 30px; /*上下左右*/ padding: 20px; border 边框属性 border-width border-style border-color #i1 { border- 3px; border-style: solid; border-color: red; } /*上面三句代码相当于一句代码： border:3px solid red;*/ /*同样,也可以分别设置边框四个方向的粗细 线性样式 颜色,跟padding的四个方向一样。*/ /*上下5px 左右10px*/ border-5px 10px; /*上：实线 右：点状 下：双线 左：虚线*/ border-style: solid dotted double dashed; /*上：红色 左右：绿色 下：黄色*/ border-color: red green yellow; 边框样式 none 无边框。 dotted 点状虚线边框。 dashed 矩形虚线边框。 solid 实线边框。 按照方向划分 border-top- 10px; border-top-color: red; border-top-style: solid; border-right- 10px; border-right-color: red; border-right-style: solid; border-bottom- 10px; border-bottom-color: red; border-bottom-style: solid; border-left- 10px; border-left-color: red; border-left-style:solid; 上面12条语句，相当于 bordr: 10px solid red; 另外还可以简写方式： border-top: 10px solid red; border-right: 10px solid red; border-bottom: 10px solid red; border-left: 10pxb solid red; 清除默认边框 清除某些标签默认的边框，我们使用border:none;或者border:0; 比如，input输入框它有默认的边框，如果我们想制作好看的输入框的话，首先先得把默认的清除掉，然后我们再按照需求来更改，并且我们会发现焦点选中输入框的时候有一条蓝色的外线。那么我们也需要将它清除 ,使用属性outline:none;。 border-radius 用这个属性能实现圆角边框的效果。 将border-radius设置为长或高的一半即可得到一个圆形。 实现一个无边框圆： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>无边框圆</title> <style type="text/css"> .circle{ width: 200px; height: 200px; background-color: #843172; border-radius: 50%; } </style> </head> <body> <div class="circle"></div> </div> </body> </html> 实现一个圆环： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>实现一个圆环</title> <style type="text/css"> .circle{ width: 200px; height: 200px; border: 3px solid #FC0107; background-color: #843172; border-radius: 50%; } </style> </head> <body> <div class="circle"></div> </div> </body> </html> 实现一个半圆： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>实现一个半圆</title> <style type="text/css"> div { width: 200px; height: 100px; background-color: lightgreen; border-top-left-radius: 100px; border-top-right-radius: 100px; } </style> </head> <body> <div class="circle"></div> </div> </body> </html> display属性 用于控制HTML元素的显示效果。 display:"none" HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。 display:"block" 默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。 display:"inline" 按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。 display:"inline-block" 使元素同时具有行内元素和块级元素的特点。 display:"none"与visibility:hidden的区别： visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。 display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。 浮动 float 在 CSS 中，任何元素都可以浮动。浮动可以实现元素并排。 浮动元素会生成一个块级框，而不论它本身是何种元素。 关于浮动的两个特点： 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。 floatd 取值 none：默认值，不浮动 left：向左浮动 right：向右浮动 inherit 继承父元素的浮动属性 清除浮动 清除浮动的副作用（父标签塌陷问题） 清除浮动主要有四种方法 方法1.固定高度 应用：网页中盒子固定高度区域，比如固定的导航栏。 缺点：使用不灵活，后期不易维护 示例如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>浮动元素的破坏性</title> <style type="text/css"> .father{ /*父盒子设置了固定高度*/ height: 200px; border: 1px solid red; } .child{ width: 200px; height: 200px; float: left; background-color: green; } </style> </head> <body> <div class="father"> <div class="child">儿子</div> </div> </body> </html> 方法2.内墙法 所谓内墙法,有一个规则:在浮动元素的后面加一个空的块级元素(通常是div),并且该元素设置clear:both；属性。 clear属性，字面意思就是清除，那么both,就是清除浮动元素对我左右两边的影响。 clear属性 clear属性规定元素的哪一侧不允许其他浮动元素。 left 在左侧不允许浮动元素。 right 在右侧不允许浮动元素。 both 在左右两侧均不允许浮动元素。 none 默认值。允许浮动元素出现在两侧。 inherit 规定应该从父元素继承 clear 属性的值。 注意：clear属性只会对自身起作用，而不会影响其他元素。 应用：网页中应用不多，讲解这个，只是为了引导下一个清除浮动的方式，那才是我们重点要掌握的。 缺点：结构冗余。 代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>浮动元素的破坏性</title> <style type="text/css"> .father{ border: 1px solid red; } .child{ width: 200px; height: 200px; float: left; background-color: green; } .clearfix{ clear: both; } </style> </head> <body> <div class="father"> <div class="child">儿子</div> <div class="clearfix"></div> </div> </body> </html> 方法3.伪元素清除法 伪元素清除法（使用较多）： 内墙法在浮动元素的后面加一个空的块级元素(通常是div),并且该元素设置clear:both；属性。那么正好在css3的属性用法中正好有个选择器也完全符合这个用法,伪元素选择器。 伪元素选择器很简单。就像伪类一样，让伪元素添加了选择器，但不是描述特殊的状态，他们允许您为元素的某些部分设置样式。在这里只介绍一个。 语法： .clearfix:after{ content:'.'; display: block; clear: both; overflow: hidden; height: 0; } content:'.';表示给.clearfix元素内部最后添加一个内容，该内容为行内元素。after{}一定要有content。表示在p元素内部的最后面的添加内容。 display:block;设置该元素为块级元素，符合内墙法的需求。 clear:both；清除浮动的方法。必须要写 overflow:hidden;height:0;如果用display:none;,那么就不能满足该元素是块级元素了。overflow:hidden;表示隐藏元素，与display:none;不同的是，前者隐藏元素，该元素占位置，而后者不占位置。 示例代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>浮动元素的破坏性</title> <style type="text/css"> .father{ border: 1px solid red; } .child{ width: 200px; height: 200px; float: left; background-color: green; } .cleafix:after{ content:'.'; display: block; clear: both; overflow: hidden; height: 0; } </style> </head> <body> <div class="father clearfix"> <div class="child">儿子</div> </div> </body> </html> 方法4. overflow:hidden CSS属性overflow定义一个元素的内容太大而无法适应盒子的时候该做什么。它是overflow-x和overflow-y的简写属性。 overflow溢出属性 visible 默认值。内容不会被修剪，会呈现在元素框之外。 hidden 内容会被修剪，并且其余内容是不可见的。 scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 inherit 规定应该从父元素继承 overflow 属性的值。 overflow（水平和垂直均设置） overflow-x（设置水平方向） overflow-y（设置垂直方向） 示例代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>overflow属性的用法</title> <style type="text/css"> .box{ width: 300px; height: 300px; border: 1px solid red; overflow:scroll; } </style> </head> <body> <div class="box"> 小学生优秀作文《当领导的好处》 爸爸当上领导后，从来不敢多说话，生怕给别人带来压力。 上个月，下属小李叔叔到我家来玩，爸爸随口说了句：“家里没空调，比较热，见笑了。” 第二天，小李叔叔就带着师傅给我家安装了5匹的大空调！说什么也不肯收钱。 上个星期，爸爸看到老张伯伯在办公室吃午饭，菜中有煎鱼，随口说了句：“哎呦，真香！” 当天晚上，老张伯伯给我家送了一箱鲜鱼来。 有一天晚上，我跟爸爸遛弯儿，路上碰到单位的小王叔叔和他媳妇逛街，爸爸随口称赞道：“哎呦，小王，你媳妇真漂亮！” 第二天晚上，妈妈不在家，突然听到有人敲门。打开门一看，小王叔叔的媳妇站在门口，见到爸爸就满脸微笑说：“领导，我们家小王说嫂子不在家，让我来陪陪你！” 当领导真好，怪不得这么多人喜欢当领导！ </div> </body> </html> 当一个元素设置了overflow:hidden|auto|scroll属性之后，它会形成一个BFC区域，我们叫做它为块级格式化上下文。BFC只是一个规则。它对浮动定位都很重要。浮动定位和清除浮动只会应用于同一个BFC的元素。 浮动不会影响其它BFC中元素的布局，而清除浮动只能清除同一BFC中在它前面的元素的浮动。 定位 position static 默认。静态定位， 指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index属性无效。 静态定位意味着“元素默认显示文档流的位置”。没有任何变化。 示例代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>静态定位</title> <style type="text/css"> .positioned{ position: static; background-color: red; } </style> </head> <body> <p class="positioned">我是静态定位的元素</p> </body> </html> relative 相对定位。 元素先放置在未添加定位时的位置，在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白） top:30px;一个里推动框的顶部，使它向下移动30px。 其实说白了，我们得找一个参考的位置，然后进行定位，那么相对定位是以自身原来的位置进行定位的。 参考点：以自身原来的位置进行定位，可以使用top,left,right,bottom对元素进行偏移 示例代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>相对定位</title> <style type="text/css"> div{ width: 200px; height: 300px; } .box1{ background-color: red; } .box2{ position: relative; top: 30px; left: 40px; background-color: green; } .box3{ background-color: blue; } </style> </head> <body> <div class="box1">盒子1</div> <div class="box2">盒子2</div> <div class="box3">盒子3</div> </body> </html> absolute 绝对定位。不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并 相对定位的元素是在文档中的正常位置的偏移，但是不会影响其他元素的偏移。 参考点：相对于最近的非static祖先元素定位，如果没有非static祖先元素，那么以页面左上角进行定位 示例代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>绝对定位</title> <style type="text/css"> body{ border: 1px solid #000; } .grandfather{ position: relative; border: 3px solid #237D7C; } .father{ position: relative; top: 50px; left: 50px; border: 3px solid purple; } .box1,.box2,.box3{ width: 200px; height: 300px; border: 3px solid #ff6700; } .box1{ position: absolute; left: 50px; background-color: red; } .box2{ background-color: green; } .box3{ background-color: blue; } </style> </head> <body> <div class="grandfather"> <div class="father"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3">Three</div> </div> </div> </body> </html> fixed 固定定位。 不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变 示例代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>固定定位</title> <style type="text/css"> .box { background: red; width: 100px; height: 100px; margin: 20px; color: white; } #one { position: fixed; top: 80px; left: 10px; } .outer { width: 500px; height: 300px; overflow: scroll; padding-left: 150px; } </style> </head> <body> <div class="outer"> <p> 某女买了一件1000块的衣服。我质疑有点贵。 她说：“贵？我跟你说，这件衣服原价2000块，打了五折之后便宜一半，就等于我赚了1000块！虽然我花出去1000块，但同时我又赚回来了1000块，所以这件衣服相当于是白送，免费。你懂个屁！ ” 我被她的经济数学头脑震惊得久久说不出话来…… </p> <p> 国家全面放开生育二胎的政策春风送暖，某机关一张姓女公务员前些天终于怀上二胎了，又一次升级为准妈妈。 老公让她赶紧跟领导说一下，争取减点工作量，好好保胎。 午饭时，她在食堂恰好碰见领导，难掩一脸的兴奋汇报：“头儿，我刚怀上小二了”！ 周围突然安静下来了。领导楞了半天回过神来，憋出了一句：“你老公知道了吗？” 她脑抽地答了一句：“是他让我找你的”…… 食堂里瞬间鸦雀无声！ 此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！ </p> <div class="box" id="one">One</div> </div> </body> </html> z-index 设置对象的层叠顺序。 #i2 { z-index: 999; } 绝对定位会产生压盖的效果，但还有另外一件事我们还没有考虑到———当元素出现压盖时，是什么决定哪些元素出现在其他元素的上面呢？那么使用css属性的z-index能解决我们的疑问。但是使用z-index有以下几个规则： z-index只应用在定位的元素，默认z-index:auto; z-index取值为整数，数值越大，它的层级越高 如果元素设置了定位，没有设置z-index，那么谁写在最后面的，表示谁的层级越高。 从父现象。通常布局方案我们采用子绝父相，比较的是父元素的z-index值，哪个父元素的z-index值越大，表示子元素的层级越高。 opacity 用来定义透明效果。取值范围是0~1，0是完全透明，1是完全不透明。 顶部导航菜单示例: <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>li标签的float示例</title> <style> /*清除浏览器默认外边距和内填充*/ * { margin: 0; padding: 0; } a { text-decoration: none; /*去除a标签默认的下划线*/ } .nav { background-color: black; height: 40px; width: 100%; position: fixed; top: 0; } ul { list-style-type: none; /*删除列表默认的圆点样式*/ margin: 0; /*删除列表默认的外边距*/ padding: 0; /*删除列表默认的内填充*/ } /*li元素向左浮动*/ li { float: left; } li > a { display: block; /*让链接显示为块级标签*/ padding: 0 15px; /*设置左右各15像素的填充*/ color: #b0b0b0; /*设置字体颜色*/ line-height: 40px; /*设置行高*/ } /*鼠标移上去颜色变白*/ li > a:hover { color: #fff; } /*清除浮动 解决父级塌陷问题*/ .clearfix:after { content: ""; display: block; clear: both; } </style> </head> <body> <!-- 顶部导航栏 开始 --> <div class="nav"> <ul class="clearfix"> <li><a href="">玉米商城</a></li> <li><a href="">MIUI</a></li> <li><a href="">ioT</a></li> <li><a href="">云服务</a></li> <li><a href="">水滴</a></li> <li><a href="">金融</a></li> <li><a href="">优品</a></li> </ul> </div> <!-- 顶部导航栏 结束 --> </body> </html>