网页设计与制作教程Web前端开发（第7版）课件：CSS3的属性实训——制作社区网页面.pptx

本章介绍CSS设置背景、文本、列表、图像、表格、表单、链接等元素的属性样式。CSS3的属性实训——制作社区网页面

目录CSS3的属性5.1CSS背景属性5.2CSS字体属性5.3CSS文本属性5.4CSS尺寸属性5.5CSS列表属性5.6CSS表格属性5.7CSS内容属性5.8CSS属性的应用5.9实训——制作社区网页面习题5

5.9实训——制作社区网页面5.9.1制作通知公告板块1.页面布局规划页面布局的首要任务是弄清网页的布局方式，分析版式结构，待整体页面搭建有明确规划后，再根据规划切图。通知公告板块页面的效果如图5-34所示，页面布局示意图如图5-35所示。

5.9实训——制作社区网页面2．前期准备1）栏目目录结构。2）页面素材。3）外部样式表。

5.9实训——制作社区网页面3．编写代码（1）页面结构代码index_bottom_left.html的结构代码如下。

5.9实训——制作社区网页面!DOCTYPEhtmlhtmlheadmetacharset=utf-8title首页/titlelinkrel=stylesheethref=css/public.csslinkrel=stylesheethref=css/index.css/headbodydivclass=left-bottomdivclass=left-bottom_headdivclass=tongzhigonggaop通知公告/p/divpclass=rightmore1ahref=#更多/a/p/divulliahref=#1《生活垃圾管理条例》正式实施了，开展垃圾分类宣传spanclass=right2023-08-18/span/a/liliahref=#2《生活垃圾管理条例》正式实施了，开展垃圾分类宣传spanclass=right2023-08-18/span/a/liliahref=#3《生活垃圾管理条例》正式实施了，开展垃圾分类宣传spanclass=right2023-08-18/span/a/liliahref=#4《生活垃圾管理条例》正式实施了，开展垃圾分类宣传spanclass=right2023-08-18/span/a/liliahref=#5《生活垃圾管理条例》正式实施了，开展垃圾分类宣传spanclass=right2023-08-18/span/a/liliahref=#6《生活垃圾管理条例》正式实施了，开展垃圾分类宣传spanclass=right2023-08-18/span/a/li/ul/div/body/html

5.9实训——制作社区网页面（2）public.css样式文件本样式文件是社区网所有网页都用到的公用样式，代码如下。*{margin:0;padding:0;font-family:微软雅黑;}ul,li{list-style:none;}a{text-decoration:none;}.right{float:right;}.left{float:left;}.clear{clear:both;}

5.9实训——制作社区网页面（3）index.css样式文件本样式文件是index左下.html网页用到的样式，代码如下。.left-bottom{width:834px;margin-top:18px;border:1pxsolidrgb(223,220,221);}.left-bottom_head{background:url(../images/left-bottom_hbg.jpg);width:834px;height:49px;}.tongzhigonggao{float:left;width:700px;}.tongzhigonggaop{text-align:center;margin-left:70px;padding-top:10px;fon