中职高教版《网页设计与制作任务驱动教程》4.3使用CSS布局与美化文本网页课件

1 单元4　使用CSS布局与美化网页 【任务4-3】使用CSS布局与美化文本网页 《网页设计与制作任务驱动教程（第3版）》 1 2 【任务描述】 【任务4-3】使用CSS布局与美化文本网页 （1）创建样式文件base.css和main.css，在该样式文件中定义标签的属性、类选择符及其属性。 （2）创建网页文档0403.html，且链接外部样式文件base.css和main.css。 《网页设计与制作任务驱动教程（第3版）》 3 图4-20 网页0403.html的浏览效果 《网页设计与制作任务驱动教程（第3版）》 4 （3）在网页0403.html中添加必要的HTML标签和输入文字。 （4）浏览网页0403.html的效果，如图4-20所示，该网页上部为一个版块，主要包含标题文字和正文内容，下部分为左、右两个版块，都包含有标题文字和正文文字。 《网页设计与制作任务驱动教程（第3版）》 5 【任务实施】 （1）创建文件夹 在站点“单元4”中创建文件夹“task04-3”，在该文件夹中创建子文件夹“CSS” （2）创建样式文件base.css定义基本样式 在文件夹“CSS”中创建样式文件base.css，在该样式文件中编写样式代码，CSS代码如表4-7所示。 《网页设计与制作任务驱动教程（第3版）》 6 表4-7　样式文件base.css中的CSS代码定义 序号 CSS代码 序号 CSS代码 01 02 03 04 05 body { width: 1200px; color: #666; font-family: "微软雅黑"; } 06 07 08 09 10 h1, h2, p { margin: 0px; padding: 0px; } 《网页设计与制作任务驱动教程（第3版）》 6 7 （3）创建样式文件main.css定义网页主体布局结构的CSS代码 在文件夹“CSS”中创建样式文件main.css，在该样式文件中编写样式代码，网页主体结构的CSS代码如表4-8所示。 表4-8　样式文件main.css中网页主体结构的CSS代码定义 序号 CSS代码 序号 CSS代码 01 02 03 04 05 06 07 08 09 10 11 section { width: 1200px; margin-top: 10px; } .ec-s-travel { margin-top: 20px; } .ec-g-l { width: 860px; float: left; } 12 13 14 15 16 17 18 19 20 21 22 .ec-g-r { width: 320px; float: right; }   .w-box { border-radius: 10px 10px 0 0; background-color: RGBa(225,232,237,.7); padding: 20px 20px 10px 5px; } 《网页设计与制作任务驱动教程（第3版）》 8 （4）定义美化标题与正文内容的CSS代码 在样式文件main.css中编写样式代码美化标题与正文内容，其CSS代码如表4-9所示。 表4-9　样式文件main.css中美化标题与正文内容的CSS代码定义 序号 CSS代码 序号 CSS代码 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 .w-box > h2 { border-radius: 0; border-width: 0; border-style: solid; border-color: #FFF; }   .w-box > h2, .w-box > h2 i.tm { line-height: 35px; height: 35px; font-size: 16px; font-weight: bold; font-style: normal!important; } .w-box > h2 i.tm { text-align: center; height: 35px; color: #666; padding: 0 25px; font-size: 36px; } .w-box .info { padding: 20px 0 0 15px; font-size: 14px; } 27 28 29 30 31 32 33 34 35 36 37 38 39