1 选择器的进阶
1.1 后代选择器
根据HTML的嵌套关系，选择父元素后代中满足条件的元素
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>后代选择器</title><style>div p {color: pink;}</style>
</head><body><p>p标签</p><div><p>div下的p标签</p></div></body></html>
结果：
1.2 子代选择器
根据html嵌套关系，选择父元素子代中满足条件的元素。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>后代选择器</title><style>div>p {color: pink;}</style>
</head><body><p>p标签</p><div><p>div下的p标签</p><a href="#"><p>a里面的p</p></a></div></body></html>
结果;
1.3 并集选择器
同时选择多组标签，设置相同的样式
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>后代选择器</title><style>div,p {color: pink;}</style>
</head><body><!-- <p>p标签</p> --><div><p>div下的p标签</p><a href="#"><p>a里面的p</p></a></div></body></html>
结果：
1.4 交集选择器
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>交集选择器</title><style>p.box {color: red;}</style>
</head><body><!-- <p>p标签</p> --><div><p class="box">div下的p标签</p><p>下面的p</p><div class="box">div</div></div></body></html>
结果：
1.5 hover伪类选择器
选中鼠标悬停在元素上的状态，设置样式（任何标签都可以添加伪类）
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>hover选择器</title><style>p:hover {color: red;}</style>
</head><body><!-- <p>p标签</p> --><div><p class="box">div下的p标签</p><p>下面的p</p><div class="box">div</div></div></body></html>
1.6 emmet语法
通过简写语法，快速生成代码。
| 记忆 | 示例 | 效果 |
|---|---|---|
| 标签名 | div | |
| 类选择器 | .red | |
| id选择器 | #red | |
| 交集选择器 | p.red#one | |
| 子代选择器 | ul>li | |
| 内部文件 | ul>li{内容} |
|
| 创建多个 | ul>li*3 | |
2 背景相关属性
2.1 背景色
background-color: pink;
background-color: rgba(0,0,0,0.5);
background-color: rgb(0,0,0);
还有十六进制表示法
2.2 背景图片
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>背景属性</title><style>div {width: 400px;height: 400px;background-image: url(../picture/1.jpg);}</style>
</head>
<body><div>文字</div>
</body>
</html>
结果：
2.3 背景平铺
限制尺寸，只出现一张图
background-repeat: no-repeat; 不平铺，最常用
2.4 背景位置
background-position: right bottom; //右下位置
background-position: center; //中心位置
background-position: 20px 100px; //距左边20px，距上方100px 取值可以为负数
2.5 背景相关属性连写
background: pink url(../picture/1.jpg) no-repeat center;背景色；背景图，背景图平铺，背景图位置 不分先后顺序
3 元素显示模式
3.1 块级元素
- 独占一行
- 宽度默认是父元素的宽度，高度由默认内容撑开
- 可以设置宽高
- 代表标签
div、p、h系列 、ul、il、dl、dt、dd、form、header
3.2 行内元素
- 一行可以显示多个
- 宽度和高度默认由内容撑开
- 不可以设置宽高
- 代表标签
a、span、b、u、i、s、strong、ins、em、del...
3.3 行内块元素
- 一行可以显示多个
- 可以设置宽高
- 代表标签
input、textarea、button、select、img...
3.4 元素显示模式转换
目的：改变元素默认的显示特点，让元素符合布局要求
语法;
| 属性 | 效果 | 使用频率 |
|---|---|---|
| display:block | 转换成块级元素 | 较多 |
| display:inline-block | 转换成行内块元素 | 较多 |
| display:inline | 转换成行内元素 | 极少 |
4 注意
p标签和h标签不能相互嵌套
p标签内不能嵌套div、p、h等块级元素
a标签不能嵌套自己
5 CSS特性
5.1 继承性
-
特性：子元素有默认继承父元素样式的特点
-
可以继承的常见属性（控制文字的属性都可以继承，不是控制文字的属性一般都不能继承）
- color
- font-style、font-weight、font-size、font-family
- text-indent、text-align
- line-height
- …
-
注意点
- 可以通过调试工具判断样式是否可以继承
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>继承性</title><style>div {color: red;}</style>
</head>
<body><div>div<span>div里的span</span></div>
</body>
</html>
结果;
5.2 层叠性
- 给同一个标签设置不同的样式>此时样式会层叠叠加>会共同作用在标签上。
- 给同一个标签设置相同的样式>此时样式会层叠叠盖>最终写在最后的样式会生效。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>继承性</title><style>div {color: red;}.color {font-size: 50px; 字号跟颜色层叠生效}</style>
</head><body><div class="color">div div里的span</div>
</body></html>
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>继承性</title><style>div {color: red;}.color {font-size: 50px;color: aqua;}</style>
</head><body><div class="color">div div里的span</div>
</body></html>
5.3 优先级
- 特性：不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器标签
- 优先级公式
- 继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important
- 注意点
- !important写在属性值后面，分号的前面
- !important不能提升继承的优先级，只要是继承优先级最低
- 实际开发中不建议使用!important
意义：当一个标签使用了多个选择器，样式冲突的时候，到底谁生效。
5.4 权重叠加计算
- 如果是复合选择器，此时需要通过权重叠加计算方法，判断最终那个选择器优先级最高会生效
- 权重叠加计算公式：（每一级之间不存在进位）
（0 ，0， 0， 0）
行内样式的个数，id选择器的个数，类选择器的个数，标签选择器的个数
- 比较规则
- 先比较第一级数字，如果比较出来了，之后的统统不看
- 如果第一级数字相同，此时再去比较第二级数字，如果比较出来了，之后的统统不看
- 如果最终所有数字都相同，表示优先级相同，则比较层叠性（谁写在下面，谁说了算!）
- 注意点：!important如果不是继承，则权重最高，天下第一！（实际开发中慎用）
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>权重叠加计算</title><style>/* 0,1,0,1 */div #one {color: red;}/* 0,0,2,0 */.father .son {color: yellow;}/* 0,0,1,1 */.father p {color: blue;}/* 0,0,0,2 */div p {color: pink;}</style>
</head><body><div class="father"><p class="son" id="one">标签</p></div></body></html>
结果：
6 综合案例
6.1 案例一
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>综合案例</title><style>.box {text-decoration: none;width: 100px;height: 50px;background-color: red;display: inline-block;color: white;text-align: center;line-height: 50px;}a:hover {background-color: orange;}</style>
</head><body><a href="#" class="box">导航1</a><a href="#" class="box">导航2</a><a href="#" class="box">导航3</a><a href="#" class="box">导航4</a><a href="#" class="box">导航5</a>
</body></html>
6.2 案例二
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>综合案例二</title><style>a {width: 120px;height: 58px;text-decoration: none;display: inline-block;color: white;text-align: center;line-height: 50px;/* font-weight: 700; */}.box1 {background-image: url(../picture/bg1.png);}.box2 {background-image: url(../picture/bg2.png);}.box3 {background-image: url(../picture/bg3.png);}.box4 {background-image: url(../picture/bg4.png);}.box1:hover {background-image: url(../picture/bg5.png);}.box2:hover {background-image: url(../picture/bg6.png);}.box3:hover {background-image: url(../picture/bg7.png);}.box4:hover {background-image: url(../picture/bg8.png);}</style>
</head><body><a href="#" class="box1">五彩导航</a><a href="#" class="box2">五彩导航</a><a href="#" class="box3">五彩导航</a><a href="#" class="box4">五彩导航</a>
</body></html>
7 PxCook的基本使用
目标：能够使用 PxCook 工具测量设计图的 尺寸 和 颜色 ，能够从psd文件中直接获取数据
8 CSS盒子模型
目标：能够认识 盒子模型的组成 ，能够掌握盒子模型边框、内边距、外边距 的设置方法
学习路径：
- 盒子的概念
- 页面中的每一个标签，都可看做是一个 “盒子”，通过盒子的视角更方便的进行布局
- 浏览器在渲染（显示）网页时，会将网页中的元素看做是一个个的矩形区域，我们也形象的称之为 盒子
- 盒子模型
- CSS 中规定每个盒子分别由：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）构成，这就是 盒子模型
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>简单盒子模型</title><style>div {width: 200px;height: 200px;background-color: pink;/* 边框 */border: 1px solid black;/* 内边距 */padding: 20px;/* 外边距 */margin: 50px;}</style>
</head>
<body><div>电脑</div><div>电脑</div>
</body>
</html>
8.1 内容的宽度和高度
- 作用：利用 width 和 height 属性默认设置是盒子 内容区域 的大小
- 属性：width / height
- 常见取值：数字+px
8.2 边框（border）- 单个属性 （会将盒子撑大）
-
作用：给设置边框粗细、边框样式、边框颜色效果
-
单个属性：（工作中不常用）
-
边框（border）- 连写形式
- 属性名：border
- 属性值：单个取值的连写，取值之间以空格隔开
- 如：border : 10px solid red;
- 快捷键：bd + tab
8.3 边框（border）- 单方向设置
- 场景：只给盒子的某个方向单独设置边框
- 属性名：border - 方位名词
- 属性值：连写的取值
8.4 新浪导航案例
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>新浪导航综合案例</title><style>.box {color: #4c4c4c;display: inline-block;padding: 0 16px;/* width: 80px; */height: 40px;text-align: center;line-height: 40px;text-decoration: none;font-size: 12px; }.box:hover {background-color: #edeef0;color: #ff8400;}.all {border-top: 3px solid #ff8500;border-bottom: 1px solid #edeef0;}</style>
</head><body><div class="all"><a href="#" class="box">新浪导航</a><a href="#" class="box">新浪导航新浪导航</a><a href="#" class="box">新浪导航</a><a href="#" class="box">新浪导航</a></div>
</body></html>
8.5 内边距（padding）- 取值 （会将盒子撑大）
-
作用：设置 边框 与 内容区域 之间的距离
-
属性名：padding
-
常见取值：
-
记忆规则：从上开始赋值，然后顺时针赋值，如果设置赋值的，看对面的！！（顺时针记忆）
8.6 内边距（padding）- 单方向设置
- 场景：只给盒子的某个方向单独设置内边距
- 属性名：padding - 方位名词
- 属性值：数字 + px
8.7 CSS3盒模型（自动内减）
- 需求：盒子尺寸300*300，背景粉色，边框10px实线黑色，上下左右20px的内边距，如何完成？
- 给盒子设置border或padding时，盒子会被撑大，如果不想盒子被撑大？
- 解决方法 ① ：手动内减
- 操作：自己计算多余大小，手动在内容中减去
- 缺点：项目中计算量太大，很麻烦
- 解决方法 ② ：自动内减
- 操作：给盒子设置属性 box-sizing : border-box ; 即可
- 优点：浏览器会自动计算多余大小，自动在内容中减去
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 100px;height: 100px;background-color: pink;padding: 20px;border: 10px solid #000;box-sizing: border-box;}</style>
</head>
<body><div>盒子</div></body>
</html>
8.8 清除默认内外边距
-
场景：浏览器会默认给部分标签设置默认的margin和padding，但一般在项目开始前需要先清除这些标签默认的margin和padding，后续自己设置
-
比如：body标签默认有margin：8px
-
比如：p标签默认有上下的margin
-
比如：ul标签默认由上下的margin和padding-left
-
解决方法：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>清除内外边距</title><style>* {margin: 0;padding: 0;} //解决办法</style> </head> <body><p>pppp</p><p>pppp</p><h1>h1</h1><ul><li>li</li></ul> </body> </html>
-
8.9 网页新闻综合案例
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;box-sizing: border-box;/* 内减 */}.news {width: 500px;height: 400px;border: 1px solid #ccc;margin: 50px auto;padding: 42px 30px 0;/* 底部边距由文字撑开 *//* text-align: center; */}h2 {border-bottom: 1px solid #ccc;font-size: 30px;/* 行高是1倍，就是字号的大小 */line-height: 1;padding-bottom: 9px;}/* 去掉列表的符号 */ul {list-style: none;}li {height: 50px;border-bottom: 1px dashed #ccc;padding-left: 28px;line-height: 50px;}a {text-decoration: none;color: #666;font-size: 18px;}</style>
</head><body><div class="news"><h2>最新文章/New Articles</h2><ul><li><a href="">北京招聘网页设计，平面设计，php</a></li><li><a href="">北京招聘网页设计，平面设计，php</a></li><li><a href="">北京招聘网页设计，平面设计，php</a></li><li><a href="">北京招聘网页设计，平面设计，php</a></li><li><a href="">北京招聘网页设计，平面设计，php</a></li></ul></div>
</body></html>
8.10 外边距折叠现象 – ① 合并现象
- 场景：垂直布局 的 块级元素，上下的margin会合并
- 结果：最终两者距离为margin的最大值
- 解决方法：避免就好
- 只给其中一个盒子设置margin即可
8.11 外边距折叠现象 – ② 塌陷现象
-
场景：互相嵌套 的 块级元素，子元素的 margin-top 会作用在父元素上
-
结果：导致父元素一起往下移动
-
解决方法：
- 给父元素设置border-top 或者 padding-top（分隔父子元素的margin-top）
- 给父元素设置overflow：hidden
- 转换成行内块元素
- 设置浮动
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.father {width: 300px;height: 300px;background-color: pink;/* 解决办法1 *//* border: 1px solid #000; *//* 解决办法2 最专业的办法*//* overflow: hidden; *//* 解决办法3 *//* display: inline-block; *//* 解决办法4 设置浮动*/}.son {width: 100px;height: 100px;background-color: skyblue;margin-top: 50px;}</style> </head> <body><div class="father"><div class="son">son</div></div> </body> </html>
8.12 行内元素的margin和padding无效情况
-
场景：给行内元素设置margin和padding时
-
结果：
- 水平方向的margin和padding布局中有效！
- 垂直方向的margin和padding布局中无效！
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>span {/* margin: 50px; */padding: 50px;/* 垂直方向标签不生效 *//* 解决办法 */line-height: 50px; /* 设置行高 */}</style> </head> <body><span>apsn</span><span>apsn</span> </body> </html>
9 CSS浮动
9.1 结构伪类选择器
- **目标：能够使用 **结构伪类选择器 在HTML中定位元素
1）作用与优势：
- 作用：根据元素在HTML中的结构关系查找元素
- 优势：减少对于HTML中类的依赖，有利于保持代码整洁
- 场景：常用于查找某父级选择器中的子元素
2）选择器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 选中第一个li *//* li:first-child {background-color: green;} *//* 选最后一个li *//* li:last-child {background-color: red;} *//* 选中任意一个 *//* li:nth-child(5) {background-color: green;} *//* 选中倒数第n个 */li:nth-last-child(5) {background-color: red;}</style>
</head>
<body><ui><li>这是第1个li</li><li>这是第2个li</li><li>这是第3个li</li><li>这是第4个li</li><li>这是第5个li</li><li>这是第6个li</li><li>这是第7个li</li><li>这是第8个li</li></ui>
</body>
</html>
-
n的注意点：
-
n为：0、1、2、3、4、5、6、……
-
通过n可以组成常见公式
-
9.2 伪元素
-
通过css创建标签，装饰性的不重要的小图
-
区别：
- 元素：HTML 设置的标签
- 伪元素：由 CSS 模拟出的标签效果
-
种类：
-
注意点：
- 必须设置content属性才能生效
- 伪元素默认是行内元素
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.father {width: 300px;height: 300px;background-color: pink;}.father::before {content: 'aaa';color: green;//默认行内元素，宽高不生效，需要displaywidth: 100px;height: 100px;background-color: blue;display: inline-block;}.father::after {content: 'ccc';color: red}</style>
</head>
<body><div class="father">bbb</div>
</body>
</html>
9.3 标准流
**目标：**能够认识 标准流 的默认排布方式及其特点
- 标准流：又称文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素
- 常见标准流排版规则：
- 块级元素：从上往下，垂直布局，独占一行
- 行内元素 或 行内块元素：从左往右，水平布局，空间不够自动折行
9.4 浮动
9.4.1 浮动的作用
-
现在的作用：网页布局
-
场景：让垂直布局的盒子变成水平布局，如：一个在左，一个在右
9.4.2 浮动的代码
-
左浮动：float : left
-
右浮动：float : right
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.one {width: 100px;height: 100px;background-color: pink;float: left;}.two {width: 100px;height: 100px;background-color: green;float: left;}</style> </head> <body><div class="one">sss</div><div class="two">bbb</div> </body> </html>
9.4.3 浮动的特点
- 浮动元素会脱离标准流（简称：脱标），在标准流中不占位置
- 浮动元素比标准流高半个级别，可以覆盖标准流中的元素
- 浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
- 浮动元素有特殊的显示效果
- 一行可以显示多个
- 可以设置宽高
- 注意点：
- 浮动的元素不能通过text-align:center或者margin:0 auto
9.4.4 案例
案例一
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.top {height: 40px;width: 100%;background-color: #333;}.header {width: 1226px;height: 100px;background-color: pink;margin: 0 auto;}.box {width: 1226px;height: 500px;/* background-color: blue; */margin: 0 auto;}.box1 {width: 226px;height: 500px;background-color: orange;float: left;}.box2 {width: 1000px;height: 500px;background-color: skyblue;float: right;}</style>
</head>
<body><div class="top"></div><div class="header"></div><div class="box"><div class="box1"></div><div class="box2"></div></div>
</body>
</html>
小米浮动案例二
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.box {margin: 0 auto;width: 1226px;height: 614px;/* background-color: pink; */}.left {float: left;width: 234px;height: 614px;background-color: #800080;}.right {float: right;width: 978px;height: 614px;/* background-color: green; */}li {float: left;margin-right: 14px;margin-bottom: 14px;list-style: none;width: 234px;height: 300px;background-color: #87ceed;}/* 第四个li和第八个li边距需要清除 */li:nth-child(4n) {margin-right: 0;}</style>
</head>
<body><div class="box"><div class="left"></div><div class="right"><ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul></div></div>
</body>
</html>
网页导航案例
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.nav {margin: 50px auto;width: 640px;height: 50px;background-color: #ffc0cd;}ul {list-style: none;}.nav li {float: left;}.nav li a {/* 浮动 */display: inline-block;/* 整体布局 */width: 80px;height: 50px;background-color: pink;/* 文字样式 */text-align: center;text-decoration: none;line-height: 50px;color: white;}.nav li a:hover {background-color: green;}</style>
</head><body><div class="nav"><ul><li><a href="#">新闻</a></li></ul><ul><li><a href="#">新闻</a></li></ul><ul><li><a href="#">新闻</a></li></ul><ul><li><a href="#">新闻</a></li></ul><ul><li><a href="#">新闻</a></li></ul><ul><li><a href="#">新闻</a></li></ul><ul><li><a href="#">新闻</a></li></ul><ul><li><a href="#">新闻</a></li></ul></div>
</body></html>
9.5 清除浮动
9.5.1 清除浮动的介绍
- 含义：清除浮动带来的影响
- 影响：如果子元素浮动了，此时子元素不能撑开标准流的块级父元素
- 原因：
- 子元素浮动后脱标 → 不占位置
- 目的：
- 需要父元素有高度，从而不影响其他网页元素的布局
9.5.2 清除浮动的方法
① 直接设置父元素高度
- 优点：简单粗暴，方便
- 缺点：有些布局中不能固定父元素高度。如：新闻列表、京东推荐模块
② 额外标签法
- 在父元素内容的最后添加一个块级元素
- 给添加的块级元素设置 clear:both
- 缺点：会在页面中添加额外的标签，会让页面的HTML结构变得复杂（常用class名称clearfix）
③ 单伪元素清除法
- 操作：用伪元素替代了额外标签
- 优点：项目中使用，直接给标签加类即可清除浮动
④ 双伪元素清除法
- 上半部分是为了解决外边距塌陷问题
- 下半部分是真正清除浮动
- 优点：项目中使用，直接给标签加类即可清除浮动
⑤ 给父元素设置overflow : hidden
- 直接给父元素设置 overflow : hidden
- 优点：方便
9.6 CSS书写顺序
1）浮动/display
2）盒子模型：margin border padding 宽度 高度 背景色
10 学成在线项目
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>学成在线</title><link rel="stylesheet" href="./css/index.css">
</head><body><!-- 负责头布区域的样式 wrapper负责版心样式 --><div class="header wrapper"><h1> <a href="#"> <img src="./images/logo.png" alt=""></a></h1><div class="nav"><ul><li><a href="#">首页</a></li><li><a href="#">课程</a></li><li><a href="#">职业规划</a></li></ul></div><!-- 搜索 --><div class="search"><input type="text" placeholder="输入关键词"><button></button></div><!-- 用户 --><div class="user"><img src="./images/user.png" alt=""><span>lilei</span></div></div><!-- 轮播图 --><div class="banner"><div class="wrapper"><div class="left"><ul><li><a href="#">前端开发 <span>></span></a></li><li><a href="#">前端开发 <span>></span></a></li><li><a href="#">前端开发 <span>></span></a></li><li><a href="#">前端开发 <span>></span></a></li><li><a href="#">前端开发 <span>></span></a></li><li><a href="#">前端开发 <span>></span></a></li><li><a href="#">前端开发 <span>></span></a></li><li><a href="#">前端开发 <span>></span></a></li><li><a href="#">前端开发 <span>></span></a></li></ul></div><div class="right"><h2>我的课程表</h2><div class="content"><dl><dt>继续学习 程序语言设计</dt><dd>正在学习-使用对象</dd></dl><dl><dt>继续学习 程序语言设计</dt><dd>正在学习-使用对象</dd></dl><dl><dt>继续学习 程序语言设计</dt><dd>正在学习-使用对象</dd></dl></div><a href="#">全部课程</a></div></div></div><!-- 精品推荐 --><div class="goods wrapper"><h2>精品推荐</h2><ul><li><a href="#">jQuery</a></li><li><a href="#">jquery</a></li><li><a href="#">jQuery</a></li><li><a href="#">jQuery</a></li><li><a href="#">jQuery</a></li><li><a href="#">jQuery</a></li></ul><a href="#" class="xingqu">修改兴趣</a></div><!-- 精品推荐课程 --><div class="box wrapper"><div class="title"><h2>精品推荐</h2><a href="#">查看全部</a></div><div class="content clearfix"><ul><li><a href="#"> <img src="./images/course07.png" alt=""></a><h3>Think PHP 5.0 博客系统实战项目演练 </h3><p> <span>高级</span> • 1125人在学习</p></li><li><a href="#"> <img src="./images/course07.png" alt=""></a><h3>Think PHP 5.0 博客系统实战项目演练 </h3><p> <span>高级</span> • 1125人在学习</p></li><li><a href="#"> <img src="./images/course07.png" alt=""></a><h3>Think PHP 5.0 博客系统实战项目演练 </h3><p> <span>高级</span> • 1125人在学习</p></li><li><a href="#"> <img src="./images/course07.png" alt=""></a><h3>Think PHP 5.0 博客系统实战项目演练 </h3><p> <span>高级</span> • 1125人在学习</p></li><li><a href="#"> <img src="./images/course07.png" alt=""></a><h3>Think PHP 5.0 博客系统实战项目演练 </h3><p> <span>高级</span> • 1125人在学习</p></li><li><a href="#"> <img src="./images/course07.png" alt=""></a><h3>Think PHP 5.0 博客系统实战项目演练 </h3><p> <span>高级</span> • 1125人在学习</p></li><li><a href="#"> <img src="./images/course07.png" alt=""></a><h3>Think PHP 5.0 博客系统实战项目演练 </h3><p> <span>高级</span> • 1125人在学习</p></li><li><a href="#"> <img src="./images/course07.png" alt=""></a><h3>Think PHP 5.0 博客系统实战项目演练 </h3><p> <span>高级</span> • 1125人在学习</p></li><li><a href="#"> <img src="./images/course07.png" alt=""></a><h3>Think PHP 5.0 博客系统实战项目演练 </h3><p> <span>高级</span> • 1125人在学习</p></li><li><a href="#"> <img src="./images/course07.png" alt=""></a><h3>Think PHP 5.0 博客系统实战项目演练 </h3><p> <span>高级</span> • 1125人在学习</p></li></ul></div></div><!-- 版权 --><!-- 注意清除上面浮动的影响 --><div class="footer"><div class="wrapper"><div class="left"><img src="./images/logo.png" alt=""><p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。<br>© 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号</p><a href="#">下载APP</a></div><div class="right"><dl><dt>合作伙伴</dt><dd> <a href="#">合作机构</a></dd><dd> <a href="#">合作导师</a></dd></dl><dl><dt>合作伙伴</dt><dd> <a href="#">合作机构</a></dd><dd> <a href="#">合作导师</a></dd></dl><dl><dt>合作伙伴</dt><dd> <a href="#">合作机构</a></dd><dd> <a href="#">合作导师</a></dd></dl></div></div></div>
</body></html>
11 CSS定位装饰
11.1 定位
11.1.1 网页常见布局方式
- 标准流
- 块级元素独占一行 → 垂直布局
- 行内元素/行内块元素一行显示多个 → 水平布局
- 浮动
- 可以让原本垂直布局的 块级元素变成水平布局
- 定位
- 可以让元素自由的摆放在网页的任意位置
- 一般用于 盒子之间的层叠情况
11.1.2 定位的常见应用场景
- 可以解决盒子与盒子之间的层叠问题
- 定位之后的元素层级最高，可以层叠在其他盒子上面
- 可以让盒子始终固定在屏幕中的某个位置
11.2 使用定位的步骤
- 设置定位方式
-
设置偏移值
-
偏移值设置分为两个方向，水平和垂直方向各选一个使用即可
-
选取的原则一般是就近原则 （离哪边近用哪个）
-
11.3 定位的使用
11.3.1 静态定位
-
介绍：静态定位是默认值，就是之前认识的标准流。
-
代码：
position:static -
注意点：
- 静态定位就是之前标准流，不能通过方位属性进行移动
- 之后说的定位不包括静态定位，一般特指后几种：相对、绝对、固定
11.3.2 相对定位
-
介绍：自恋型定位，相对于自己之前的位置进行移动
-
代码：
position:relative -
特点：
-
需要配合方位属性实现移动
-
相对于自己原来位置进行移动
-
在页面中占位置 → 没有脱标
-
应用场景：
- 配合绝对定位组CP（子绝父相）
- 用于小范围的移动
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 如果left和right都有, 以left为准; top和bottom都有以top 为准 *//* css书写: 1. 定位 / 浮动 / display ; 2. 盒子模型; 3. 文字属性 */.box {position: relative;left: 100px;top: 200px;/* 1. 占有原来的位置2. 仍然具体标签原有的显示模式特点3. 改变位置参照自己原来的位置*/width: 200px;height: 200px;background-color: pink;}</style>
</head>
<body><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><div class="box">box</div><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
</body>
</html>
11.3.3 绝对定位
-
介绍：拼爹型定位，相对于非静态定位的父元素进行定位移动
-
代码:
position:absolute -
特点：
- 需要配合方位属性实现移动
- 默认相对于浏览器可视区域进行移动
- 在页面中不占位置 → 已经脱标
-
应用场景：
- 配合绝对定位组CP（子绝父相）
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 绝对定位：先找已经定位的父级，如果有这样的父级就以这个父级为参照物进行定位有父级，但父级没有定位，以浏览器窗口为参照进行定位*/.box {position: absolute;/* 脱离标准位置，不占标准流位置 */left: 50px;top: 50px; /* 1.脱标，不占位2.改变标签的显示模式特点：具体行内块特点（在一块生存，宽高生效）*/width: 200px;height: 200px;background-color: pink;}</style>
</head><body><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><div class="box">box</div><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
</body></html>
11.3.4 子绝父相介绍
- 场景：让子元素相对于父元素进行自由移动
- 含义：
- 子元素：绝对定位
- 父元素：相对定位
- 子绝父相好处：
- 父元素是相对定位，则对网页布局影响最小
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>绝对定位-父级定位的情况</title><style>.father {position: relative;width: 400px;height: 400px;background-color: pink;}.son {/* 父级相对定位，子级绝对定位---简称：子绝父相 *//* position: relative;right: 100px; */width: 300px;height: 300px;background-color: skyblue;}.sun {position: absolute;/* left: 20px;top: 30px; */right: 20px;width: 200px;height: 200px;background-color: green;}/* 绝对定位查找父级的方式：就近找定位的父级，如果逐层查找不到这样的父级，就以浏览器窗口为参照物进行定位 */</style>
</head>
<body><div class="father"><div class="son"><div class="sun"></div></div></div>
</body>
</html>
小案例（hot标签）：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>学成在线</title><link rel="stylesheet" href="./css/index.css">
</head><body><!-- 负责头布区域的样式 wrapper负责版心样式 --><div class="header wrapper"><h1> <a href="#"> <img src="./images/logo.png" alt=""></a></h1><div class="nav"><ul><li><a href="#">首页</a></li><li><a href="#">课程</a></li><li><a href="#">职业规划</a></li></ul></div><!-- 搜索 --><div class="search"><input type="text" placeholder="输入关键词"><button></button></div><!-- 用户 --><div class="user"><img src="./images/user.png" alt=""><span>lilei</span></div></div><!-- 轮播图 --><div class="banner"><div class="wrapper"><div class="left"><ul><li><a href="#">前端开发 <span>></span></a></li><li><a href="#">前端开发 <span>></span></a></li><li><a href="#">前端开发 <span>></span></a></li><li><a href="#">前端开发 <span>></span></a></li><li><a href="#">前端开发 <span>></span></a></li><li><a href="#">前端开发 <span>></span></a></li><li><a href="#">前端开发 <span>></span></a></li><li><a href="#">前端开发 <span>></span></a></li><li><a href="#">前端开发 <span>></span></a></li></ul></div><div class="right"><h2>我的课程表</h2><div class="content"><dl><dt>继续学习 程序语言设计</dt><dd>正在学习-使用对象</dd></dl><dl><dt>继续学习 程序语言设计</dt><dd>正在学习-使用对象</dd></dl><dl><dt>继续学习 程序语言设计</dt><dd>正在学习-使用对象</dd></dl></div><a href="#">全部课程</a></div></div></div><!-- 精品推荐 --><div class="goods wrapper"><h2>精品推荐</h2><ul><li><a href="#">jQuery</a></li><li><a href="#">jquery</a></li><li><a href="#">jQuery</a></li><li><a href="#">jQuery</a></li><li><a href="#">jQuery</a></li><li><a href="#">jQuery</a></li></ul><a href="#" class="xingqu">修改兴趣</a></div><!-- 精品推荐课程 --><div class="box wrapper"><div class="title"><h2>精品推荐</h2><a href="#">查看全部</a></div><div class="content clearfix"><ul><li><a href="#"><img src="./images/course07.png" alt=""><img src="../css定位装饰/images/hot.png" alt="" class="hot"></a><h3>Think PHP 5.0 博客系统实战项目演练 </h3><p> <span>高级</span> • 1125人在学习</p></li><li><a href="#"> <img src="./images/course07.png" alt=""></a><h3>Think PHP 5.0 博客系统实战项目演练 </h3><p> <span>高级</span> • 1125人在学习</p><img src="../css定位装饰/images/hot.png" alt="" class="hot"></li><li><a href="#"> <img src="./images/course07.png" alt=""></a><h3>Think PHP 5.0 博客系统实战项目演练 </h3><p> <span>高级</span> • 1125人在学习</p></li><li><a href="#"> <img src="./images/course07.png" alt=""></a><h3>Think PHP 5.0 博客系统实战项目演练 </h3><p> <span>高级</span> • 1125人在学习</p></li><li><a href="#"> <img src="./images/course07.png" alt=""></a><h3>Think PHP 5.0 博客系统实战项目演练 </h3><p> <span>高级</span> • 1125人在学习</p></li><li><a href="#"> <img src="./images/course07.png" alt=""></a><h3>Think PHP 5.0 博客系统实战项目演练 </h3><p> <span>高级</span> • 1125人在学习</p></li><li><a href="#"> <img src="./images/course07.png" alt=""></a><h3>Think PHP 5.0 博客系统实战项目演练 </h3><p> <span>高级</span> • 1125人在学习</p></li><li><a href="#"> <img src="./images/course07.png" alt=""></a><h3>Think PHP 5.0 博客系统实战项目演练 </h3><p> <span>高级</span> • 1125人在学习</p></li><li><a href="#"> <img src="./images/course07.png" alt=""></a><h3>Think PHP 5.0 博客系统实战项目演练 </h3><p> <span>高级</span> • 1125人在学习</p></li><li><a href="#"> <img src="./images/course07.png" alt=""></a><h3>Think PHP 5.0 博客系统实战项目演练 </h3><p> <span>高级</span> • 1125人在学习</p></li></ul></div></div><!-- 版权 --><!-- 注意清除上面浮动的影响 --><div class="footer"><div class="wrapper"><div class="left"><img src="./images/logo.png" alt=""><p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。<br>© 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号</p><a href="#">下载APP</a></div><div class="right"><dl><dt>合作伙伴</dt><dd> <a href="#">合作机构</a></dd><dd> <a href="#">合作导师</a></dd></dl><dl><dt>合作伙伴</dt><dd> <a href="#">合作机构</a></dd><dd> <a href="#">合作导师</a></dd></dl><dl><dt>合作伙伴</dt><dd> <a href="#">合作机构</a></dd><dd> <a href="#">合作导师</a></dd></dl></div></div></div>
</body></html>
结果：
二维码居中定位案例：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}/* 因为有通栏：占满一行的边框，所以需要有一个通栏：占满一行的盒子 */.nav {height: 40px;border-bottom: 1px solid #ccc;}/* 因为ul中所有的内容都是在网页的宽度固定并且水平居中的盒子内部，所以设置ul为宽度固定并且水平居中的效果（后面项目中所用到的版心） */ul {list-style: none;width: 1200px;margin: 0 auto;}ul li {float: left;width: 20%;height: 40px;border-right: 1px solid #ccc;/* 自动内减 */box-sizing: border-box;text-align: center;line-height: 40px;}ul .last {border-right: none;}ul li a {/* a标签默认是行内元素，宽高由内容撑开，并且无法设置宽高，此时默认情况用户只能点击文字区域才能调整 *//* 如果把a标签转换成块级元素，此时可以设置宽高，会让a标签范围更大，用户可以点击调整的区域也越大 */display: block;/* 宽度不设置块元素会默认占满一行 */height: 40px;text-decoration: none;color: #000;}ul li .app {position: relative;}.code {position: absolute;left: 50%;transform: translate(-50%);top: 42px;}</style>
</head><body><!-- 导航 --><div class="nav"><ul><li><a href="#">我要投资</a></li><li><a href="#">平台介绍</a></li><li><a href="#">新手专区</a></li><!-- 因为用户鼠标放在二维码图片上也能跳转，所以证明img也是在a的范围内，因此把img写在a标签的内部 --><li><a href="#" class="app">手机微金所<img src="./images/code.jpg" alt="" class="code"></a></li><li class="last"><a href="#">个人中心</a></li></ul></div></body></html>
底部半透明遮罩效果定位：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>底部遮罩效果</title><style>.banner {position: relative;margin: 0 auto;width: 1226px;height: 600px;}.mask {position: absolute;bottom: 0;background-color: rgba(0,0,0,0.5);/* 绝对定位的盒子显示模式具备行内块特点：加宽度高度生效，如果没有宽度也没有内容，盒子的宽度尺寸就是0*/width: 1226px;height: 150px;}</style>
</head>
<body><div class="banner"><img src="./images/bg.jpg" alt=""><div class="mask"></div></div>
</body>
</html>
11.4 固定定位
-
介绍：死心眼型定位，相对于浏览器进行定位移动
-
代码：
position:fixed -
特点：
- 需要配合方位属性实现移动
- 相对于浏览器可视区域进行移动
- 在页面中不占位置 → 已经脱标
-
应用场景：
- 让盒子固定在屏幕中的某个位置
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* */.box {position: fixed;top: 0;left: 0;/* 1.脱标，不占位2.改变位置参考浏览器窗口3.具备行内块特点（需要设置宽高）*/width: 200px;height: 200px;background-color: pink;}</style>
</head><body><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><div class="box">box</div><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p><p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
</body></html>
11.5 元素层级问题
- 不同布局方式元素的层级关系：
- 标准流 < 浮动 < 定位
- 不同定位之间的层级关系：
- 相对、绝对、固定默认层级相同
- 此时HTML中写在下面的元素层级更高，会覆盖上面的元素（后来者居上，否则使用z-index改变层级）
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 200px;height: 200px;}.one {position: absolute;top: 20px;z-index: 1; /* 数字越大，层级越高，但是要配合定位使用。不加z-index默认为0*/background-color: pink;}.two {position: absolute;top: 50px;background-color: green;}</style>
</head>
<body><div><div class="one"></div><div class="two"></div></div>
</body>
</html>
11.6 装饰
11.6.1 认识基线（了解）
基线：浏览器文字类型元素排版中存在用于对齐的基线（baseline）
11.6.2 文字对齐问题
- 场景：解决行内/行内块元素垂直对齐问题
- 问题：当图片和文字在一行中显示时，其实底部不是对齐的
11.6.3 垂直对齐方式
-
属性名：vertical-align
-
属性值：
11.6.4 光标类型
-
场景：设置鼠标光标在元素上时显示的样式
-
属性名：cursor
-
常见属性值：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>光标类型</title><style>div {height: 200px;width: 200px;background-color: pink;/* 手型 *//* cursor: pointer; *//* 工字型 *//* cursor: text; *//* 十字型 */cursor: move;}</style>
</head>
<body><div></div>
</body>
</html>
11.6.5 边框圆角
- 场景：让盒子四个角变得圆润，增加页面细节，提升用户体验
- 属性名：border-radius
- 常见取值：数字+px 、百分比
- 原理：取圆角的半径值
- 赋值规则：从左上角开始赋值，然后顺时针赋值，没有赋值的看对角！
11.6.6 边框圆角的常见应用
-
正圆
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.one {margin: 20px auto;width: 200px;height: 200px;background-color: pink;/* 最大值50%是正圆 *//* border-radius: 50%; *//* 盒子尺寸的一半 */border-radius: 100px;}</style> </head><body><div class="one"></div> </body></html> -
胶囊按钮
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.one {margin: 20px auto;width: 400px;height: 200px;background-color: pink;/* 胶囊按钮初始盒子是长方形 *//* 盒子高度的一半 */border-radius: 100px;}</style> </head><body><div class="one"></div> </body></html>
11.6.7 溢出部分显示效果
-
溢出部分：指的是盒子 内容部分 所超出盒子范围的区域
-
场景：控制内容溢出部分的显示效果，如：显示、隐藏、滚动条……
-
属性名：overflow
-
常见属性值：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {width: 300px;height: 300px;background-color: pink;/* 溢出部分隐藏 */overflow: hidden; /* 最常用 *//* 显示滚动条，无附加条件 *//* overflow: scroll; *//* auto：根据内容是否超出，判断是否显示滚动条 *//* overflow: auto; */}</style>
</head><body><div class="box">溢出部分显示溢出部分显示溢出部分显示溢出部分显示溢出部分显示溢出部分显示溢出部分显示溢出部分显示溢出部分显示溢出部分显示溢出部分显示溢出部分显示溢出部分显示溢出部分显示溢出部分显示溢出部分显示溢出部分显示溢出部分显示溢出部分显示溢出部分显示溢出部分显示溢出部分显示溢出部分显示溢出部分显示溢出部分显示溢出部分显示溢出部分显示溢出部分显示溢出部分显示溢出部分显示溢出部分显示溢出部分显示溢出部分显示溢出部分显示溢出部分显示溢出部分显示溢出部分显示溢出部分显示溢出部分显示溢出部分显示溢出部分显示溢出部分显示溢出部分显示溢出部分显示溢出部分显示溢出部分显示溢出部分显示溢出部分显示溢出部分显示溢出部分显示溢出部分显示溢出部分显示溢出部分显示溢出部分显示溢出部分显示溢出部分显示溢出部分显示溢出部分显示溢出部分显示溢出部分显示溢出部分显示溢出部分显示溢出部分显示溢出部分显示溢出部分显示溢出部分显示溢出部分显示溢出部分显示溢出部分显示溢出部分显示溢出部分显示溢出部分显示溢出部分显示溢出部分显示溢出部分显示溢出部分显示溢出部分显示溢出部分显示溢出部分显示溢出部分显示溢出部分显示溢出部分显示溢出部分显示溢出部分显示溢出部分显示溢出部分显示溢出部分显示溢出部分显示溢出部分显示溢出部分显示溢出部分显示溢出部分显示溢出部分显示溢出部分显示溢出部分显示溢出部分显示溢出部分显示溢出部分显示溢出部分显示溢出部分显示溢出部分显示溢出部分显示溢出部分显示溢出部分显示溢出部分显示</div>
</body></html>
11.6.8 元素本身隐藏
- 场景：让某元素本身在屏幕中不可见。如：鼠标:hover之后元素隐藏
- 常见属性：
- visibility：hidden
- display：none
- 区别：
- visibility：hidden 隐藏元素本身，并且在网页中 占位置
- display：none 隐藏元素本身，并且在网页中 不占位置
- 注意点：
- 开发中经常会通过 display属性完成元素的显示隐藏切换
- display：none；（隐藏）、 display：block；（显示）
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 200px;height: 200px;}.one {/* visibility: hidden; */ /* 隐藏盒子 、占位置的隐藏，不常用*/display: none; /* 不占位置的隐藏 */background-color: pink;}.two {background-color: green;}</style>
</head>
<body><div class="one">one</div><div class="two">two</div>
</body>
</html>
导航二维码显示隐藏切换案例
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}/* 因为有通栏：占满一行的边框，所以需要有一个通栏：占满一行的盒子 */.nav {height: 40px;border-bottom: 1px solid #ccc;}/* 因为ul中所有的内容都是在网页的宽度固定并且水平居中的盒子内部，所以设置ul为宽度固定并且水平居中的效果（后面项目中所用到的版心） */ul {list-style: none;width: 1200px;margin: 0 auto;}ul li {float: left;width: 20%;height: 40px;border-right: 1px solid #ccc;/* 自动内减 */box-sizing: border-box;text-align: center;line-height: 40px;}ul .last {border-right: none;}ul li a {/* a标签默认是行内元素，宽高由内容撑开，并且无法设置宽高，此时默认情况用户只能点击文字区域才能调整 *//* 如果把a标签转换成块级元素，此时可以设置宽高，会让a标签范围更大，用户可以点击调整的区域也越大 */display: block;/* 宽度不设置块元素会默认占满一行 */height: 40px;text-decoration: none;color: #000;}ul li .app {position: relative;}.code {position: absolute;left: 50%;transform: translate(-50%);top: 42px;display: none;}/* 控制’手机微金所‘显示img中的内容 */.nav li .app:hover img {/* 要显示img中的内容，后加img标签 */display: block;}</style>
</head><body><!-- 导航 --><div class="nav"><ul><li><a href="#">我要投资</a></li><li><a href="#">平台介绍</a></li><li><a href="#">新手专区</a></li><!-- 因为用户鼠标放在二维码图片上也能跳转，所以证明img也是在a的范围内，因此把img写在a标签的内部 --><li><a href="#" class="app">手机微金所<img src="./images/code.jpg" alt="" class="code"></a></li><li class="last"><a href="#">个人中心</a></li></ul></div></body></html>
11.6.9 元素整体透明度
- 场景：让某元素整体（包括内容）一起变透明
- 属性名：opacity
- 属性值：0~1之间的数字
- 1：表示完全不透明
- 0：表示完全透明
- 注意点：
- opacity会让元素整体透明，包括里面的内容，如：文字、子元素等……
12 CSS精灵图
12.1 精灵图的介绍
- 场景：项目中将多张小图片，合并成一张大图片，这张大图片称之为精灵图
- 优点：减少服务器发送次数，减轻服务器的压力，提高页面加载速度
- 例如：需要在网页中展示8张小图片
- 8张小图片分别发送 → 发送8次
- 合成一张精灵图发送 → 发送1次
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>span {display: inline-block;width: 18px;height: 24px;background-color: pink;background-image: url(./images/taobao.png);/* 背景图片位置 *//* 第一个水平方向的位置，第二个垂直方向的位置 *//* 想要向左侧移动图片，位置取负数 */background-position: -3px 0;}b {display: block;width: 24px;height: 21px;background-color: green;background-image: url(./images/taobao.png);/* 取第三个图片，控制第二个数字向上移动 */background-position: 0 -90px;}</style>
</head>
<body><!-- <img src="./images/taobao.png" alt=""> --><!-- 精灵图的标签都用行内标签 span、b、i--><span></span><b></b>
</body>
</html>
12.2 背景图片大小
-
作用：设置背景图片的大小，
-
语法：background-size：宽度 高度；
-
取值：
12.3 background连写拓展
- 完整连写：
- 注意点：
- background-size和background连写同时设置时，需要注意覆盖问题
- 解决：
- 要么单独的样式写连写的下面
- 要么单独的样式写在连写的里面
12.4 文字阴影
- 作用：给文字添加阴影效果，吸引用户注意
- 属性名：text-shadow
- 取值：
- 拓展：
- 阴影可以叠加设置，每组阴影取值之间以逗号隔开
12.5 盒子阴影
- 作用：给盒子添加阴影效果，吸引用户注意，体现页面的制作细节
- 属性名：box-shadow
- 取值：
12.6 过渡
- 作用：让元素的样式慢慢的变化，常配合hover使用，增强网页交互体验
- 属性名：transition
- 常见取值：
- 注意点：
- 过渡需要：默认状态 和 hover状态样式不同，才能有过渡效果
- transition属性给需要过渡的元素本身加
- transition属性设置在不同状态中，效果不同的
- 给默认状态设置，鼠标移入移出都有过渡效果
- 给hover状态设置，鼠标移入有过渡效果，移出没有过渡效果
12.7 SEO简介
- SEO（Search Engine Optimization）：搜索引擎优化
- 作用：让网站在搜索引擎上的排名靠前
- 提升SEO的常见方法：
- 竞价排名
- 将网页制作成html后缀
- 标签语义化（在合适的地方使用合适的标签）
12.7.1 SEO三大标签
-
title：网页标题标签
-
description：网页描述标签
-
keywords：网页关键词标签
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="description"content="京东JD.COM-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。"><meta name="keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,京东"><title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！</title> </head><body></body></html>
12.7.2 ico图标设置
-
场景：显示在标签页标题左侧的小图标，习惯使用.ico格式的图标
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="description"content="京东JD.COM-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。"><meta name="keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,京东"><title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！</title><link rel="shortcut icon" href="./images/favicon.ico" type="image/x-icon"> </head><body> </body></html>
13 综合案例
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>小兔鲜儿-新鲜、惠民、快捷！</title><meta name="description" content="小兔鲜儿官网，致力于打造全球最大的食品、生鲜电商购物平台"><meta name="keywords" content="小兔鲜儿,食品,生鲜,服装,家电,电商,购物"><link rel="shortcut icon" href="favicon.ico" type="image/x-icon"><!-- 谁在下，谁生效 --><link rel="stylesheet" href="./css/base.css"><link rel="stylesheet" href="./css/common.css"><link rel="stylesheet" href="./css/index.css">
</head><body><div class="shortcut"><div class="wrapper"><ul><li><a href="#">请先登录</a></li><li><a href="#">免费注册</a></li><li><a href="#">我的订单</a></li><li><a href="#">会员中心</a></li><li><a href="#">帮助中心</a></li><li><a href="#">在线客服</a></li><li><a href="#"><span></span>手机版</a></li></ul></div></div><!-- 头部区域 --><div class="header wrapper"><div class="logo"><h1><a href="#">小兔鲜儿</a></h1></div><div class="nav"><ul><li><a href="#">首页</a></li><li><a href="#">首页</a></li><li><a href="#">首页</a></li><li><a href="#">首页</a></li><li><a href="#">首页</a></li><li><a href="#">首页</a></li><li><a href="#">首页</a></li><li><a href="#">首页</a></li><li><a href="#">首页</a></li></ul></div><div class="search"><input type="text" placeholder="搜一搜"><span></span></div><div class="car"><span>2</span></div></div><!-- banner --><div class="banner"><div class="wrapper"><!-- 有多少图，就有多少li --><ul><li><a href="#"><img src="./uploads/banner_1.png" alt=""></a></li></ul><!-- 侧导航 --><div class="aside"><ul><li><a href="#">生鲜<span>水果 蔬菜</span></a></li><li><a href="#">生鲜<span>水果 蔬菜</span></a></li><li><a href="#">生鲜<span>水果 蔬菜</span></a></li><li><a href="#">生鲜<span>水果 蔬菜</span></a></li><li><a href="#">生鲜<span>水果 蔬菜</span></a></li><li><a href="#">生鲜<span>水果 蔬菜</span></a></li><li><a href="#">生鲜<span>水果 蔬菜</span></a></li><li><a href="#">生鲜<span>水果 蔬菜</span></a></li><li><a href="#">生鲜<span>水果 蔬菜</span></a></li><li><a href="#">生鲜<span>水果 蔬菜</span></a></li></ul></div><!-- 箭头 --><a href="#" class="prev"></a><a href="#" class="next"></a><!-- 圆点 --><!-- 圆点：当前状态：current/active --><ol><li></li><li></li><li class="current"></li><li></li><li></li></ol></div></div><!-- 新鲜好物 --><div class="goods wrapper"><!-- 头部 --><div class="hd"><h2>新鲜好物<span>新鲜出炉 品质靠谱</span></h2><a href="#">查看全部</a></div><!-- 内容 --><div class="bd clearfix"><ul><li><a href="#"><img src="./uploads/new_goods_1.jpg" alt=""><h3>睿米无线吸尘器F8</h3><div>￥<span>899</span></div><b>新品</b></a></li><li><a href="#"><img src="./uploads/new_goods_2.jpg" alt=""><h3>睿米无线吸尘器F8</h3><div>￥<span>899</span></div><b>新品</b></a></li><li><a href="#"><img src="./uploads/new_goods_3.jpg" alt=""><h3>睿米无线吸尘器F8</h3><div>￥<span>899</span></div><b>新品</b></a></li><li><a href="#"><img src="./uploads/new_goods_4.jpg" alt=""><h3>睿米无线吸尘器F8</h3><div>￥<span>899</span></div><b>新品</b></a></li></ul></div></div><!-- 生鲜 --><div class="shengxian wrapper"><div class="hd"><h2>生鲜</h2><a href="#" class="more">查看全部</a><ul><li><a href="#">水果</a></li><li><a href="#">水果</a></li><li><a href="#">水果</a></li><li><a href="#">水果</a></li><li><a href="#">水果</a></li><li><a href="#">水果</a></li><li><a href="#">水果</a></li></ul></div><div class="bd clearfix"><div class="left"><a href="#"><img src="./uploads/fresh_goods_cover.png" alt=""></a></div><div class="right"></div></div></div><!-- 版权区域 --><div class="footer"><div class="wrapper"><div class="top"><ul><li><span>价格亲民</span> </li><li><span>物流快捷</span></li><li><span>品质新鲜</span></li></ul></div><div class="bottom"><p><a href="#">关于我们</a> |<a href="#">关于我们</a> |<a href="#">关于我们</a> |<a href="#">关于我们</a> |<a href="#">关于我们</a> |<a href="#">关于我们</a> |<a href="#">关于我们</a></p><p>CopyRight @ 小兔鲜儿</p></div></div></div>
</body></html>
