网页制作实战项目四：使用DIV+CSS制作网页

江山如画 • 2018年5月3日下午9:06 • 网页设计 • 阅读 8477

【时间要求】 2 学时（ 45 分钟× 2=90 分钟）

【上机内容】使用DIV+CSS制作网页——个人站点制作

【上机目的】

1、掌握CSS盒模型

2、掌握网页元素的定位

3、掌握DIV+CSS布局的方法和技巧

【上机重点】

1 、网页元素的定位

2、DIV+CSS布局的方法和技巧

【上机难点】从表格布局向DIV+CSS布局的转变

【上机教学方法】

1 、采用分组教学 , 每个小组模拟一个开发团队

2 、充分发挥小组内各成员的积极性、主动性和创造性

【上机内容】

请在规定时间内制作出以下网页：

要求：

1、建立网站根目录和相应的文件夹，所有文件、文件夹命名及目录结构符合网站建设规范。

2、制作index.html网页，效果如上图所示，网页的标题为：你的姓名+的个人网站。如：张三的index.html网页的标题应该为：张三的个人网站。

3、设置网页中默认字体大小为14px，行高为200%。

4、使用DIV布局制作网页，主视觉宽度为1000px。

5、导航栏菜单做成空链接（链接到#），导航菜单超级链接的状态（a:link和a:visited）：字体大小为16px 加粗，没有下划线，当鼠标移动到上面时的状态（a:hover）：颜色变为#F00 ，没有下划线。

6、网页设计交流群：208047327 超链接到

http://shang.qq.com/wpa/qunwpa?idkey=d2ee29b967b9b954c52d7970f6bbe0030169047009d99fb42e9ee09d38775856

其超链接状态a:link和a:visited：没有下划线，颜色为 #F00，字体大小为14px。

7、站长介绍、站长相册字体大小为16px，粗体。 Introduce、Photo 字体颜色为 #900，字体大小为16px。

8、页面中下图DIV周边颜色为#f6f6f6。

该DIV边框为1px,实线，颜色为#CCC，给DIV使用如下类样式即可

.tableBorder{ border: #CCC solid 1px;}

9、底部版权区域DIV上边框线为1px,实线，颜色为#CCC，背景颜色为#e8e8e8。

.footer{ margin-top:1px; border-top:#CCC solid 1px; background:#e8e8e8;}

10、提交时要把所有页面和图片一起上交。（把网站根目录压缩，以“点名册序号+学号+姓名-4”命名）。

有问题或有好的建议可以在下方评论区发表评论。

125jz网原创文章。发布者：江山如画，转载请注明出处：http://www.125jz.com/1866.html