1.内容回顾
1.1.课前测试
<!DOCTYPE html >
<html>
<head>
<title> New Document </title>
<meta charset="utf-8">
<style type="text/css">
/*样式定义规则:
从大到小，从外到里
外宽内高，外相内绝
即：定位布局原则，外宽内高、外相内绝，即外层的元素一般设置宽度内部元素设置高度，外部元素使用相对定位，内部元素使用绝对定位
*/
.menu{
/*边框*/
border:2px solid black;
/*宽度*/
width:100px;
/*修改列表样式为none，去除小圆点*/
list-style:none;
/*去除ul的内填充*/
padding:0px;
}
/* li{
border:1px solid blue;
} */
a{
border:1px solid red;
/*修改a标签的显示模式，改为块状显示*/
display:block;
/*设置a标签的高度*/
height:30px;
/*a标签内容水平居中*/
text-align:center;
/*a标签内容垂直居中*/
line-height:30px;
/*去除下划线*/
text-decoration:none;
/*设置背景颜色*/
background-color:#000;
/*设置字体颜色*/
color:#fff;
}
/*鼠标悬浮到a标签上的时候，实现反色*/
a:hover{
background-color:#fff;
color:#000;
}
</style>
</head>
<body>
<!--
步骤: 1.先写内容 2.定义样式
-->
<ul class="menu">
<li><a href="http://www.taobao.com">淘宝</a></li>
<li><a href="http://www.jd.com">京东</a></li>
<li><a href="http://www.bilibili.com">B站</a></li>
<li><a href="http://www.dangdang.com">当当网</a></li>
</ul>
</body>
</html>
运行结果（修改a标签的显示模式，与不修改的区别：）：
/*修改a标签的显示模式，改为块状显示*/
display:block;
1.2.上节内容
2.本章目标
2.1. 精灵图
2.2. css选择器的深入
2.3. 标签布局分类
2.4.浮动
3.具体内容
3.1.精灵图
1. 什么是精灵图
精灵图：图片整合技术（css sprites）,就是将很多的小图片整合到一张大图上。使用
的时候通过背景属性，调整在一个div框中显示的整个大图的某一点位置。
2 为什么要用精灵图
提升页面加载速度。减轻服务器压力。。。。
实际上就是背景属性的应用。
3 案例：当当图标
<!DOCTYPE html >
<html>
<head>
<title> New Document </title>
<meta charset="utf-8">
<style type="text/css">
.d1{
width:38px;
height:40px;
border:1px solid black;
/*使用背景方式引用精灵图中的某个图片*/
background:url(ddjl.png);
}
.d2{
width:38px;
height:40px;
border:1px solid black;
background:url(ddjl.png) no-repeat 0px -160px;
}
</style>
</head>
<body>
<div class="d1"></div>
<div class="d2"></div>
</body>
</html>
3.2.标签分类
1 .标签分类 行内元素 块状元素
思考：为什么有些标签自己能占一行，为什么有些标签可以在一行内显示？
从布局来分： 块状标签/行内标签/行内块状标签
块状标签(block): 独占一行，可以设置宽高。
常用块状：div p h1-h6 table ul li ol li hr (hr 分割线标签)
在没有div之前，一般都是用表格做页面的布局。但是不能满足我们关于定位的需求。
div : 块状标签，层级标签(页面的布局)，没有语义的标签，语义由我们开发者设置。默认宽度为 100% ，高度为0
行内标签(inline): 不能设置宽高（img 和input 标签可以设置宽高 置换元素），可以在一行内排列。初始宽高都由内容撑起来。
常用：input span img a br (br 换行标签)
span: 行内标签 行级文本容器。
行内块状标签(inline-block)：既有行内标签特征(挤在一行)，又有块状标签特征(可以设置宽和高)
<!DOCTYPE html >
<html>
<head>
<title> New Document </title>
<meta charset="utf-8">
<style type="text/css">
div{
border:1px solid red;
width:100px;
height:100px;
}
a{
border:1px solid black;
width:300px;
height:300px;
}
img{
width:300px;
height:300px;
}
</style>
</head>
<body>
<!--
标签分类:
块状标签：1.独占一行，默认撑满容器
2.可以调整宽度和高度
3.常用的块状标签: div,h1-h6,p,ul,ol,li,table,form
行内标签: 1.挤在一行显示,靠内容撑起来容器大小
2.不能调整宽度和高度
3.常用的行内标签: span,a,b,u,i,sub,sup
行内块状: 1.挤在一行显示
2.可以设置宽度和高度
3.常用的行内块状标签: img,input
-->
<div>这是一个div1</div>
<div>这是一个div2</div>
<a href="#">这是菜单1</a>
<a href="#">这是菜单2</a>
<img src="11.jpg" />
<img src="11.jpg" />
</body>
</html>
运行结果：
出现div id=“ai-assist-root” 的原因：
参考：360安全浏览器中的360智脑会在所有页面底部添加非法的http链接资源
语义化
2 display 属性
html中的每一个标签都具有默认的display属性。标签是块状还是行内都由默认的display属性决定。
可以通过display属性的值来改变“标签的类别”。
display:none(不显示) block 块状 inline 行内 inline-block 行内块(既能设置宽高又可以在一行内排列显示);
<!DOCTYPE html >
<html>
<head>
<title> New Document </title>
<meta charset="utf-8">
<style type="text/css">
.menu{
border:2px solid black;
/*设置容器宽度*/
width:100px;
/*除去ul的列表项圆点*/
list-style:none;
/*去除ul外边距*/
margin:0px;
/*去除ul内填充*/
padding:0px;
}
li{
border:2px solid red;
/*height:40px;*/
}
a{
border:2px solid green;
/*将a标签变为块状*/
display:block;
/*高度*/
height:40px;
/*调整超链接中的文本位置*/
/*水平位置*/
text-align:center;
/*垂直位置*/
line-height:40px;
/*去除下划线*/
text-decoration:none;
/*黑色背景，白色字体*/
background-color:#000;
color:#fff;
}
/*鼠标悬浮修改背景和字体颜色*/
a:hover{
background-color:#fff;
color:#000;
}
</style>
</head>
<body>
<!--垂直反色菜单
实现步骤：
1.用ul li实现菜单结构
2.ul是块状，要设定宽度
3.ul的边框和内容之间有间距
4.ul有默认的圆点
-->
<ul class="menu">
<li><a href="#">菜单1</a></li>
<li><a href="#">菜单1</a></li>
<li><a href="#">菜单1</a></li>
<li><a href="#">菜单1</a></li>
<li><a href="#">菜单1</a></li>
</ul>
</body>
</html>
运行结果如下（修改a标签的显示模式，与不修改的区别：）：
/*去除ul外边距*/
margin:0px;
/*去除ul内填充*/
padding:0px;
3.3.CSS选择器进阶
1 全局 *
<!DOCTYPE html >
<html>
<head>
<title> New Document </title>
<style type="text/css">
.d1{
width:38px;
height:40px;
border:1px solid black;
/*使用背景方式引用精灵图中的某个图片*/
background:url(ddjl.png);
}
.d2{
width:38px;
height:40px;
border:1px solid black;
background:url(ddjl.png) no-repeat 0px -160px;
}
</style>
</head>
<body>
<div class="d1"></div>
<div class="d2"></div>
</body>
</html>
2 并集选择器
<!DOCTYPE html >
<html>
<head>
<title> New Document </title>
<meta charset="utf-8">
<style type="text/css">
/*并集选择器:*/
h1,div,span{
color:red;
}
</style>
</head>
<body>
<h1>这是一个标题</h1>
<div>这是一个div</div>
<p>这是一个p标签</p>
<span>这是span</span>
</body>
</html>
3 交集选择器
<!DOCTYPE html >
<html>
<head>
<title> New Document </title>
<meta charset="utf-8">
<style type="text/css">
/*交集选择器:要同时满足多个选择器条件
让第一个h1变红
h1.hs : 前面是h1标签选择器，紧跟一个类选择器,
两种选择器共同作用，这被称为交集选择器
*/
h1.hs{
color:red;
}
/*请让第一个div的字体颜色变蓝*/
</style>
</head>
<body>
<h1 class="hs">这是一个标题1</h1>
<h1>这是一个标题2</h1>
<div class="xx">这是一个div</div>
<div>这是一个div</div>
<p class="hs">这是一个p标签</p>
<span class="xx">这是span</span>
</body>
</html>
4 儿子选择器
5 后代选择器
6 属性选择器
<!DOCTYPE html >
<html>
<head>
<title> New Document </title>
<meta charset="utf-8">
<style type="text/css">
/*所有的b变红
b{
color:red;
}*/
/*将div下的所有的b变红*/
/*儿子和孙子都有变化
空格表示后代选择器
div b{
color:red;
}*/
/*请让div的儿子辈的b变红*/
/* > : 子级选择器*/
div > b{
color:red;
}
/*请让姓名文本框的边框变红*/
/*属性选择器，用标签中的特定属性值进行元素筛选*/
input[type='text']{
border:1px solid red;
}
[type='password']{
border:1px solid blue;
}
</style>
</head>
<body>
<b>这是body下的b</b>
<div>
<b>这是div下的b</b>
<span>
<b>这是span下的b</b>
</span>
</div>
<hr/>
姓名:<input type="text" name="xm" />
密码:<input type="password" name="mm"/>
</body>
</html>
运行结果如下：
7 伪类选择器 默认/访问过/浮动/点击（之后的样式）
伪类：
<!DOCTYPE html >
<html>
<head>
<title> New Document </title>
<meta charset="utf-8">
<style type="text/css">
/*:link 伪类选择器用于设置a标签默认样式*/
a:link{
font-size:20px;
color:red;
}
/*:visited 伪类选择器用于设置a标签点击之后的样式*/
a:visited{
font-size:40px;
color:black;
}
/*:hover 伪类选择器用于设置鼠标悬浮在a标签上时的样式*/
a:hover{
font-size:30px;
color:orange;
}
/*:active 伪类选择器用于设置a标签被点击时的样式*/
a:active{
font-size:80px;
color:purple;
}
</style>
</head>
<body>
<a href="#">这是一个菜单</a>
</body>
</html>
运行结果如下：
补充：（如果未显示，清空浏览器记录，重新运行进行查看。）
a:link //未访问的链接
a:visited //已访问的链接
a:hover //鼠标移动到链接上
a:active //选定的链接
扩展：参考 w3school文档
8 css 特性
cascading style sheet 层叠样式表
层叠性：如果多个选择器同时设置一个标签，如果设置的样式相同，按照优先级显示(权重)，否则，同时起作用。
继承性：子代元素会默认的继承父元素的样式（字体样式/文本样式），布局样式都不能继承。
<!DOCTYPE html >
<html>
<head>
<title> New Document </title>
<meta charset="utf-8">
<style type="text/css">
div{
color:red;
}
.xxx{
font-size:30px;
color:blue;
}
#d1{
background-color:orange;
color:black;
}
</style>
</head>
<body>
<div class="xxx" id="d1">
这是一个DIV
<span>这是一个span</span>
</div>
</body>
</html>
运行结果如下：
9 练习 折叠菜单
<!DOCTYPE html>
<html>
<head>
<title> New Document </title>
<meta charset="utf-8">
<style type="text/css">
ul{
list-style:none;
padding:0px;
width:120px;
text-align:center;
font-size:20px;
}
#menu>li{
background-color:#99ccff;
}
#menu li ul{
background-color:#cccccc;
display:none;
}
#menu>li:hover>ul{
display:block;
}
</style>
</head>
<body>
<ul id="menu">
<li class="item">
人事管理
<ul class="sub">
<li><a href="#">二级菜单1</a></li>
<li><a href="#">二级菜单2</a></li>
</ul>
</li>
<li class="item">
财务管理
<ul class="sub">
<li><a href="#">二级菜单1</a></li>
<li><a href="#">二级菜单2</a></li>
</ul>
</li>
<li class="item">
销售管理
<ul class="sub">
<li><a href="#">二级菜单1</a></li>
<li><a href="#">二级菜单2</a></li>
</ul>
</li>
</ul>
</body>
</html>
点击”显示或隐藏“菜单栏的效果：
请参考：显示和隐藏菜单栏(两种方式div、table)
3.4.浮动 float
标准文档流：数据流(二进制的)
文档流指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。
块状元素：从上到下。行内元素：从左到右，放满了，换行接着排列
4.1 什么是浮动
浮动:就是让页面上的标签脱离标准文档流，向父标签的左边或者右边移动。直到遇到其它浮动标签或者到达父标签的边界。
float:left/right;
4.2 浮动的由来
最初时，浮动是为了实现一种环绕效果。–经过发展—》浮动布局。
4.3 浮动的特征
浮动之后：
块状元素浮动：能在一行内排列。失去独占一行的特性。
行内元素浮动：可以设置宽高。
思考：浮动跟inline-block有点相似？
inline-block始终处于标准文档流，但是浮动脱离了标准文档流。
1 左浮动，右浮动
float:left 左浮动
float:right 右浮动
float:none 不浮动
2 行内元素浮动的影响
3 块状元素浮动的影响
注意：实际上浮动只会影响浮动元素下边的元素。当我们做浮动布局时，所有下边的同级元素都要进行浮动
4.4 浮动的应用
布局：新疆旅游网div布局
4.5 浮动塌陷
概念：当一个(没有设置高度的)元素中所有的子元素都进行了浮动，此时，该元素的高度会塌陷为0
解决：
1.直接设置高度;
2.设置overflow属性 hidden/auto；
3.在父元素中在加一个空的div 设置clear:both; 了解
4.通过元素的after伪类设置清除浮动属性。
<!DOCTYPE html >
<html>
<head>
<title> New Document </title>
<meta charset="utf-8">
<style type="text/css">
/*浮动塌陷产生的原因，以及解决方案*/
/*
浮动塌陷原因:
1.父容器没有高度
2.父容器中所有的子元素都浮动
此时导致父容器塌陷，父容器高度为0
浮动塌陷的解决方法：
1.父容器设置高度
2.通过overflow设置hidden/auto,
让父容器自动包裹子元素，解决塌陷问题(最常用的方法)
3.在浮动元素的后面，添加一个新元素，
设置元素的样式属性clear:both。会清除浮动元素的影响
解决塌陷问题（额外添加标签，不常用）
4.使用after伪类解决塌陷问题
*/
ul{
border:5px solid red;
list-style:none;
padding:0px;
/*height:100px;
overflow:hidden;*/
}
/*通过after清除塌陷*/
ul:after{
/*在ul后面添加空字符串*/
content:"";
/*设置内容块状显示*/
display:block;
/*设置内容清除两边的浮动效果*/
clear:both;
}
li{
width:200px;
border:3px solid blue;
}
.x1{
height:50px;
float:left;
}
.x2{
height:30px;
float:left;
}
.x3{
height:80px;
float:left;
}
.x4{
/*清除浮动元素的影响
clear:left
clear:right
clear:both
clear:none
*/
clear:both
}
.d1{
border:3px solid black;
height:30px;
background-color:yellow;
}
/*:after伪类可以在元素内部追加内容*/
.mydiv:after{
/*添加的内容*/
content:"这是动态添加的内容";
/*对添加的内容修饰*/
color:red;
}
</style>
</head>
<body>
<div class="mydiv">这是我的原始内容</div>
<ul>
<li class="x1">子元素1</li>
<li class="x2">子元素2</li>
<li class="x3">子元素3</li>
<!-- <li class="x4"></li> -->
</ul>
<div class="d1"></div>
</body>
</html>
4.内容总结
精灵图
标签分类
css选择器进阶
float浮动
921
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
