制作热点产品列表使用border属性设置边框样式
✓使用margin属性和padding属性设置外边距和内边距
✓使用background属性设置页面背景
✓使用后代选择器设置列表编号的背景样式
✓使用border-radius属性制作圆形背景效果
✓页面背景颜色直接使用标签选择器
设置✓使用margin属性和padding属性设置段落标签、无序列表标签的外边距、内边距为0px
✓使用list-style-type设置列表的项目符号为无
✓使用border-bottom设置列表下边框的虚线边框
✓使用a和a:
hover分别设置超链接样式和鼠标悬停在超链接上的文本样式
✓把列表前的数字放在标签中，使用后代选择器设置数字超链接样式及背景样式和鼠标指针悬停在超链接上的数字超链接样式及背景样式，数字上的背景使用border-radius属性来实现
盒子阴影
Ø语法
box-shadow:
insetx-offsety-offsetblur-radiuscolor;
Ø参数说明
inset：
阴影类型——内阴影。
不指定则为外阴影。
x-offset：
X轴位移，指定阴影水平位移量
y-offset：
Y轴位移，用来指定阴影垂直位移量
blur-radius：
阴影模糊半径阴影向外模糊的模糊范围
color：
阴影颜色，定义绘制阴影时所使用的颜色
Ø浏览器兼容性
属性名
IE
Firefox
Chrome
Opera
Safari
box-shadow
9+
3.5+
2.0+
10.5+
4.0+
Ø示例代码
box-shadow的使用上机练习
⏹上机练习/05制作爱奇异视频播放列表
需求说明
✓使用border属性设置边框样式
✓使用margin属性和padding属性设置外边距和内边距
✓使用box-shadow给元素添加阴影
✓页面宽度为1000px，水平居中显示
✓清除元素的默认内、外边距
✓标题的文字大小设置为18px，行高为40px
✓li列表项内边距为10px，外右边距为5px
✓给图片添加圆角效果
✓鼠标移入列表项时添加圆角阴影
✓关键代码
ulli:
hover{box-shadow:
05px5pxrgba（0,0,0,0.1）,0010px0rgba（0,0,0,0.2）;}
✓效果图
标准文档流
定义
标准文档流，简称“标准流”，是指在不使用其他的排版和定位相关的特殊CSS规则时，各种网页元素的排列规则，即CSS规定的网页元素的默认排列方式。
标准文档流的组成
块级元素：
div、
…、
列表。
占据一行，左右撑满。
内联元素：
span、、![]()
、。
不占据独立区域。
注意：
内联标签可以包含于块级标签中，成为它的子元素，而反过来则不成立。
display属性
Ø作用
✓控制元素的显示和隐藏。
（block,none）
✓块级元素与行级元素的转变。
（block,inline）
✓控制元素排一行。
（inline-block）
值
说明
block
块级元素的默认值，元素会被显示为块级元素，该元素前后会带有换行符
inline
内联元素的默认值。
元素会被显示为内联元素，该元素前后没有换行符
inline-block
行内块元素，元素既具有内联元素的特性，也具有块元素的特性
none
设置元素不会被显示
Ø示例代码
从前的时光慢
作者：
木心
从前那么慢那么美
车马邮件都慢
一个问候要等上好多天
从前的月光很慢
有点闲有点懒
在一杯茶裡消磨整个黄昏
在半个梦裡看星星满天
从前的脚步好慢
从一个村子到另一个村子（这一行不显示）
......
注意：
隐藏的元素在浏览器调试器里还可以观察到它仍在html结构中。
上机练习
⏹上机练习/06QQ会员页面导航
需求说明
✓导航背景颜色为黑色半透明效果
✓鼠标移入“功能特权”等导航信息时文字颜色变为蓝色，无下划线
✓“登录”部分信息使用超链接实现，添加圆角边框，鼠标移入字体颜色加深，添加背景颜色为黄色
✓效果图
网页布局
网页常见构成部分：
网站导航、网页主题内容、网站版权3个部分。
网页布局类型有：
“国”字形，拐角形，标题正文型，左右框架型，综合框架型，封面型，Flash型，变化型。
最常见类型：
“国字型”，也称为1-3-1型；“拐角型”，1-2-1型。
1-3-1型网页：
京东、天猫超市、当当、铁路客服中心、厦门人才网、凤凰网……
1-2-1型网页：
孔夫子旧书网、科学公园……
块元素排一行方法
Ø可以使用什么属性使块元素排在一行？
inline-block
float
浮动
Ø问题：
如何网页布局？
在标准文档流中，一个块级元素在水平方向上回自动伸展，直到包含它的元素的边界，在竖直方向和其他块级元素依次排列。
Ø浮动在网页中的应用
横向导航
商品列表
ØFloat属性
属性值
说明
left
元素向左浮动
right
元素向右浮动
none
默认值。
元素不浮动，并会显示在其文本中出现的位置
示例代码
浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或另一个浮动盒子为止。
本网页中共有三个图片，分别代表日用品图片、图书图片和鞋子图片。
这里使用这三个图片和本段文字来演示讲解浮动在网页中的应用，根据需要图片所在的div分别向左浮动、向右浮动，或者不浮动。
示例步骤
1）设置layer01左浮动
2）设置layer02左浮动
3）设置layer03左浮动
4）设置layer01右浮动
5）设置layer02右浮动
上机练习
⏹上机练习/07制作热门活动页面
需求说明
✓热门活动页宽度为700px，在浏览器中居中显示
✓文字“更多”使用右浮动让它排列到右边
✓使用无序列表布局图片和文字说明
✓使用浮动让列表项排列在一行
⏹上机练习/08制作电视剧详情列表页面
需求说明
✓标题前面图标使用背景图片，标题字体为12px，高度为27px，距离左边38px
✓中间部分使用浮动让图片和右边的文字描述排在一行
✓下面的列表项中的文字使用左浮动，作者描述使用右浮动
✓所有的超链接都没有下划线，鼠标移入有下划线
边框塌陷
layer04设置宽度和右浮动后，father边框塌陷了，如何解决？
原因：
浮动元素脱离标准文档流
解决方案：
清除浮动
清除浮动
Ø清除浮动影响-clear
值
说明
left
在左侧不允许浮动元素
right
在右侧不允许浮动元素
both
在左、右两侧不允许浮动元素
none
默认值。
允许浮动元素出现在两侧
清除两侧浮动：
.layer04{clear:
both;}
Ø示例
浮动演示示例继续演示，文本div的clear属性设置
1）清除左侧浮动
2）清除右侧浮动
3）清除两侧浮动
扩展盒子高度（解决父级元素边框塌陷）
Ø父级元素边框塌陷
网页中的浮动元素脱离了标准流，导致影响父层高度。
示例中的文本div左浮动，导致id为father的div高度缩成条状。
换句话说，一个div的范围是由它里面的标准文档流的内容决定的，与里面的浮动内容更无关。
那么，如何在视觉上让father包围浮动元素呢？
Ø解决方案一：
添加div
在所有浮动的div之后添加一个div，这个div的css的clear属性设置为：
both。
特点：
简单，空div会造成HTML代码冗余。
Ø解决方案二：
设定父级元素高度
#father{height:
400px;border:
1px#000solid;}
特点：
简单，元素固定高会降低扩展性。
Ø解决方案三：
父级添加伪类after（推荐方案）
示例代码：
浮动的盒子……
.clear:
after{
content:
'';/*在clear类后面添加内容为空*/
display:
block;/*把添加的内容转化为块元素*/
clear:
both;/*清除这个元素两边的浮动*/
}
特点：
写法稍微复杂一点，但是没有副作用，推荐使用
Ø解决方案四：
父级元素添加overflow属性
overflow属性下一小节详细讲解
#father{overflow:
hidden;border:
1px#000solid;}
特点：
简单，下拉列表框的场景不能用。
溢出处理
扩展盒子高度可以使用添加div来处理，但是增加了html代码。
实际上有更优雅的处理方式，css的overflow属性。
Øoverflow属性
属性值
说明
visible
默认值。
内容不会被修剪，会呈现在盒子之外
hidden
内容会被修剪，并且其余内容是不可见的
scroll
内容会被修剪，但是浏览器会显示滚动条以便查看其余内容
auto
如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
Ø扩展父元素的高度
注意：
但是如果页面中有绝对定位元素，并且绝对定位的元素超出了父级的范围，这里使用overflow属性就不合适了，而需要使用clear属性来清除浮动。
上机练习
⏹上机练习/09制作京东商城登录页面
需求说明
✓使用header、article、nav、footer等结构元素布局
✓使用float布局页面
✓使用background设置背景图像
✓使用padding和margin设置网页元素的内边距和外边距
✓使用clear属性清除浮动
✓页面宽度为990px，水平居中显示
✓头部logo图和文字“欢迎登录”，使用浮动和盒子模型进行排版
✓使用表单元素布局京东会员登录小窗口
✓中间主体部分结构
京东会员立即注册
展开阅读全文
相关搜索
升级会员 