等距排列 html,【任务8-6】创建等距排列的4列式布局网页0806.html.pptx

《网页美化与布局》课程资源

数字媒体专业群教学资源库项目组

等距排列的

4列式布局网页创建

【任务描述】

(1)创建样式文件base.css和main.css，在样式文件中定义标签的属性、类选择符及其属性。

(2)创建网页文档0806.html，且链接外部样式文件base.css和main.css。

(3)在网页0806.html中添加必要的HTML标签实现网页主体布局结构。

(4)将已有的HTML代码片断插入到网页0806.html中的合适位置。

【任务描述】

(5)浏览网页0806.html的效果，如图8-26所示，该网页为等距排列的4列式布局结构。

【任务实施】

(1)创建站点与文件夹

在站点“单元8”中创建文件夹“8-6”，在该文件夹中创建子文件夹“CSS”，将单元1已创建好的样式文件base.css拷贝至“CSS”文件夹中。

(2)定义网页主体布局结构的CSS代码

在文件夹“CSS”中创建样式文件main.css，在该样式文件中编写样式代码。

【任务实施】

(3)创建网页文档0806.html与链接外部样式表

在文件夹“8-6”中创建网页文档0806.html，切换到网页文档0806.html的【代码视图】，在标签“”的前面输入链接外部样式表的代码，如下所示：

【任务实施】

(4)编写网页主体布局结构的HTML代码

网页0806.html主体布局结构的HTML代码如表8-21所示。

(5)在网页中插入代码片断

根据网页0806.html的浏览效果图在该网页文档中合适位置插入相应的代码片断，从而形成结构和内容都完整的网页。

(6)保存与浏览网页

保存网页文档0806.html。

【任务实施】

(7)将网页0806.html中的4列等距式布局改为5列等距式布局的关键CSS代码如表8-22所示。

5列等距式布局网页的浏览效果如图8-27所示。

(1)创建文件夹3-2

(2)创建网页文档并编辑网页内容

(3)编写样式代码

(4)浏览网页效果

本次课程结束

感谢大家观看！