HTML5+CSS3 Web前端设计基础教程 第5章 浮动、定位与列表

5.2 CSS 定位
5.2.1 静态定位和固定定位 1．静态定位（static） 2．固定定位（fixed）
图5-10 鼠标为滚动时左侧导航固定
图5-11 页面滚动后左侧导航仍然固定
5.2 CSS 定位
5.2.2 相对和绝对定位 1. 相对定位（relative）
图5-12 没有添加相对定位样式的初始预览效果 图5-13 “content”容器添加相对定位样式的预览效果
5.2 CSS 定位
2．绝对定位（absolute） 3．层叠（z-index）
图5-14 “box-1”容器添加绝对定位样式的预览效果
图5-15 “box-1”容器添加z-index样式的预览效果
5.2 CSS 定位
5.2.3 相对于某一容器的绝对定位
本例中通过设置父级容 器相对定位，子级容器 绝对定位，实现了“特 卖图标放置在左上角的 效果”
由于“box-2”不 再处于文档流中， 所以它不占据空 间，实际上覆盖 了“box-3”，致 使“box-3”从视 图中消失
图5-1 各容器初始状态 图5-3 “box-2”浮动效果
box-1脱离文本流 后，向右移动，碰 到父级元素的边框， 便停了下来。 由于box-1移动， box-2便占据box1的位置
绝对定位
谢谢观看！
3．方法三：使用:after伪元素清除浮动 :after伪元素能够在被选元素的内容后面插入另一内容。在实际执行时，首先给浮动的容器添 加一个名为“clearfix”的Class，然后给这个Class添加一个:after伪元素实现在容器末尾添加一 个看不见的容器以清理浮动。
5.2 CSS 定位
CSS有关定位的属性包括position、z-index（层叠顺序）、top、 left、right、bottom和clip。
表5-1 position属性的取值及其含义
取值
含义
static position属性的默认值，无特殊定位
fixed
固定，元素框的表现类似于将position设置为absolute，元素被固定在屏幕的某 个位置，不随滚动条滚动
relative 相对，元素虽然偏移某个距离，但仍然占据原来的空间
absolute 绝对，元素在文档中的位置会被删除，定位后元素生成一个块级元素
属性
说明
list-style
复合属性，用于把所有用于列表的属性设置于一个声明中。
list-style-image 将图象设置为列表项标志。
list-style-position 设置列表项标记如何根据文本排列。
list-style-type 设置列表项标志的类型。
marker-offset 设置标记容器和主容器之间水平补白。
图5-17 “相对于某一容器的绝对定位”预览效果
5.3 列表
5.3.1 有关列表的CSS样式
在CSS样式中，主要是通过list-style-image属性、list-style-position属性和liststyle-type属性这3个属性改变列表修饰符的类型。
表5-2 有关列表的CSS样式属性
“float:left;”即是向左浮动，“float:right;”即是向右浮动。当某个元素具有向左 （右）浮动的属性时，该元素就会生成一个块级框，然后脱离当前文档流向左（右）移动， 直到碰到左（右）边缘。
5.1 浮动与清除浮动
此处由于div是块 级元素，在初始 状态下，多个div 容器会纵向排列， 并且将父级容器 wrap的高度撑开
图5-30 粗略的板块布局示意图
5.4 仿“天猫电器城（手机馆）”的 图文信息列表
图5-31 “floor-hd”容器示意图
5.4 仿“天猫电器城（手机馆）”的 图文信息列表
图5-32 “floor-row1”容器示意图
5.4 仿“天猫电器城（手机馆）”的 图文信息列表
2”容器示意图
5.3 列表
5.3.2 仿“天猫”首页的纵向导航
导航的标题 个性化的图标
由无序列表盛 放的导航内容
图5-19 仿“天猫”首页的纵向导航预览效果
5.3 列表
5.3.3 仿“凤凰网”首页的横向导航
图5-25 仿“凤凰网”首页的横向导航
5.4 仿“天猫电器城（手机馆）”的 图文信息列表
图5-29 包含图文信息列表的板块
HTML5+CSS3
Web前端设计基础教程
Chapter/05 浮动、定位与列表
【本章导读】 本章继续向读者介绍，在实际工作中使用频率非常的三类知识，
即浮动、定位与列表。通过本章的学习，读者基本能够达到创建并 控制较为复杂的网页版面。
5.1 浮动与清除浮动
5.1 浮动与清除浮动
5.1.1 浮动（float） 1．向左浮动或向右浮动
1．方法一：额外增加应用“clear: both;”规则的空容器 在浮动元素后额外增加一个空容器，比如“<div class="clear"></div>”，然后在CSS中 赋予.clear{clear:both;}属性即可清理浮动。
2．方法二：使用“overflow: hidden;”规则清除浮动 向浮动容器的父容器添加“overflow:hidden;”或“overflow:auto;”可以清除浮动，在添 加overflow属性后，浮动的容器又回到了容器层，把容器高度撑起，达到了清理浮动的效果。
图5-2 “box-1”浮动效果
子元素全部脱离文 档流进行浮动，致 使父级容器wrap 没有内容将其撑开
图5-4 三个容器均向左浮动效果
5.1 浮动与清除浮动
2．浮动时由于容器空间不够造成的错位
图5-5 父级容器宽度不够的情况
图5-6 浮动的容器相互拥挤的情况
5.1 浮动与清除浮动
5.1.2 清除浮动的三种方法