table虚线边框_web前端工程师7天0基础到精通（TABLE+CSS制作《互联世纪网》）

项目七 项目实践：TABLE+CSS制作《互联世纪网》

实践目标

1、 熟悉CSS属性

2、 熟练运用CSS属性控制网页样式

3、 熟悉网页制作流程

项目简介：

通过上一章节的学习，我们了解了CSS样式能更加方便、有效地控制网页结构和布局网页元素，大大提高网页的排版效率，也方便后期的管理和维护。接下来将通过互联世纪网的制作来体会和加强对同学对于CSS的理解和运用。在本项目中我们将运用TABLE+CSS对网页进行布局，和美化网页。项目效果如下图：

任务一：项目解析

任务描述：

在前面的两个章节中，我们学习了CSS的基本语法和一些常用的基本属性，在本章的项目实践中，我们会把这些知识进行综合利用，使用table+CSS进行互联世纪网的页面布局，让大家对CSS的优点有更深刻的体会。

在本项目中，通过分析效果图，我们可以把互联世纪网分为五大部分：头部、主体1、主体2、主体3、底部版权。

其中头部包括互联世纪网的图片logo，本站首页、关于我们和会员服务。

主体1是一行两列的表格，分为左右两部分，左边是一大段文字，右边是2014。

主体2是特惠方案，一行三列的表格，每个单元格内采用ul、li的标签。

主体3采用了4行2列的表格，前三行，左边是标题，右边是文字描述。最后一部分内容合并两个单元格。

底部版权包括两部分，hr标签的一条细线，第二部分实际上就是一个一行一列的表格，里面放置了两段文字声明网页的版权信息。

在接下来的任务中我们将分别按照这个布局规划将互联世纪网逐步制作出来。