一、板块划分
- 头部区域
- 顶端区域
- 主要显示区域
- 推荐区域
- 楼层区域
- 底部区域
二、实现过程
1.顶端区域
1）首先创建一个标签top作为整个顶端区域的父级
2）其中包含两个部分
- fl
- fr
3）fl使用无序列表实现欢迎字样和嵌套a标签的登录跳转
4）fr使用无序列表实现右端订单的字样显示，其中的分割线|使用对偶数个li标签添加宽高背景色实现
2.头部区域
1）首先创建一个标签header作为整个头部区域的父级
2）其中包含四个部分
- 图标 logo
- 搜索框 search
- 热词 hotwords
- 购物车 shopcar
3）图标部分使用h1标签嵌套img实现
4）搜索框部分需使用form标签包裹search功能部分，其中嵌套input标签和button标签实现搜索功能
5）热词部分使用a标签实现点击跳转
6）购物车部分使用伪元素::before实现前部购物车图标，使用伪元素::after实现后部角标，角标除左下角以外要设置为圆角
3.主要显示区域
1）首先创建一个标签main作为整个主要显示区域的父级
2）其中包含三个部分
- 列表 nav
- 中心图片 cennter
- 快报 newsflash
3）列表部分内包含左边索引和上端导航
- 左边索引使用定义列表实现，同时通过伪类选择器:hover实现鼠标悬停
- 上端导航使用无序列表 列表条目内嵌套a标签实现点击跳转
4）中心图片部分通过img标签实现
5）快报部分无序列表实现，使用
white-space:nowrap 强制文本在一行内显示不换行
overflow:hidden 当文本内容超出元素的宽度或高度时 隐藏超出的部分
text-overflow:ellipsis 当文本溢出时，显示省略号（...）来表示被截断的文本
4.推荐区域
1）首先创建一个标签recom作为整个推荐区域的父级
2）其中包含两个部分
- 头部 recom_hd
- 内容 recom_bd
3）内容部分通过无序列表实现
5.楼层区域
1）首先创建一个标签floor作为整个楼层区域的父级，在其中嵌套所需的楼层
2）一楼家电区域创建标签jiadian，其中包含两个盒子
- 头部 box-hd
- 内容 box-bd
3）头部包含两个部分
- h3 标签内容：家用电器
- 使用无序列表包含头部跳转内容：大家电 生活电器 厨房电器等
4）内容包含五个部分
- c1先使用无序列表实现上端三行二列的文字内容：节能补贴，再使用a标签嵌套img标签实现下方图片的显示和跳转
- c2~c4均使用a标签嵌套img标签的方式实现图片的显示和跳转，由于第五部分内容显示样式与第三部分相同，故使用相同标签c3实现
6.底部区域
1）首先创建一个标签footer作为整个底部区域的父级
2）其中包含三个部分
- 服务 mod_service
- 帮助 mod_help
- 版权 mod_copyright
3）服务部分使用无序列表实现
4）帮助部分使用定义列表实现
5）版权部分使用a标签实现跳转
三、总结
1.网页制作思路：从上到下，先整体再局部，逐步分析制作
2.首先应将网页划分为合适的部分，将每个部分的宽高确定，否则将出现内容重叠的情况
3.在实现过程中应注意网页的动态效果，使得用户体验更好
4.在书写CSS部分时，要注意书写顺序
- 位置属性
- 盒模型属性
- 排版属性
- 视觉属性
- 装饰属性
