网页设计源代码_web前端工程师7天0基础到精通（ 项目实践:eyes8网页设计（二）)...

项目十二 项目实践：EYES8网页设计(二)

实践目标

1、熟悉个人网站设计

2、熟悉个人网站色彩搭配和结构设计

3、掌握个人网站首页制作

实训项目简介：

Eyes8网站是一个个人CPS网站制作的综合实例，不仅可以巩固在前面章节学习到的知识，同时也为后续学期的几门课程做好铺垫，帮助学生贯穿大学所有的课程内容。在本项目中，我们不仅要运用到前面所学习的网页布局理念，同时也是需要建立在已经掌握了HTML基本标记和CSS基础以及DIV基础之上。通过本项目的锻炼和学习，学生能够制作大部分的个人CPS网站。

实训流程：

任务一：制作eyes8产品列表

HTML 源代码：

(index.html)

代码解析：

第46-80行:定义一对DIV标记，id名为"product"，盒子里包括一个二级标题，一行a链接以及产品列表；

第48-50行：产品分类链接；

第52行：清除上方所有的左右浮动；

第54-79行：用ul标记以及li标记制作产品列表；

CSS源代码：

代码解析：

第13行:id名为product的盒子的上下边距为20像素，左右自适应，宽958像素，高233像素，一像素灰色实线边框；

第14行：定义product盒子内的h2标记颜色，字体大小为18像素，行高40像素，左边距20像素，左浮动，块级显示；

第15行：定义product盒子内的类选择符为nav2的元素样式为，左浮动，块级显示，上边距为11像素，左边距为20像素；

第16行：定义ul标记的上边距为5像素；

第17行：定义li标记的列表符号样式无，左浮动，左边距为23像素，高190像素，宽130像素，块级显示，文本对齐方式为居中对齐；

任务二：制作eyes8首页文章列表

HTML 源代码：

(index.html)

代码解析：

第83-89行:定义article盒子内的左侧盒子，id名为"knowledge"，盒子内包括一个二级标题"眼镜保养"一张小图标，以及一张缩略图，一段文本文字；

第92-103行：定义article盒子内的中间盒子，id名为"recommend"，盒子内包括一个二级标题"护理知识"以及一个小图标，7行列表标记定义的文章标题列表；

第105-121行：定义article盒子内的右侧盒子，id名为"fashion