网页设计与制作教程Web前端开发（第7版）课件：CSS3的属性实训-制作社区网页面_第1页
网页设计与制作教程Web前端开发（第7版）课件：CSS3的属性实训-制作社区网页面_第2页
网页设计与制作教程Web前端开发（第7版）课件：CSS3的属性实训-制作社区网页面_第3页
网页设计与制作教程Web前端开发（第7版）课件：CSS3的属性实训-制作社区网页面_第4页
网页设计与制作教程Web前端开发（第7版）课件：CSS3的属性实训-制作社区网页面_第5页
已阅读5页，还剩8页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

本章介绍CSS设置背景、文本、列表、图像、表格、表单、链接等元素的属性样式。

CSS3的属性

实训——制作社区网页面目录

CSS3的属性5.1CSS背景属性5.2CSS字体属性5.3CSS文本属性5.4CSS尺寸属性5.5CSS列表属性5.6CSS表格属性5.7CSS内容属性5.8CSS属性的应用5.9实训——制作社区网页面习题55.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实训——制作社区网页面<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>首页</title><linkrel="stylesheet"href="css/public.css"><linkrel="stylesheet"href="css/index.css"></head><body><divclass="left-bottom"><divclass="left-bottom_head"><divclass="tongzhigonggao"><p>通知公告</p></div><pclass="rightmore1"><ahref="#">更多>></a></p></div><ul><li><ahref="#">1《生活垃圾管理条例》正式实施了，开展垃圾分类宣传<spanclass="right">2023-08-18</span></a></li><li><ahref="#">2《生活垃圾管理条例》正式实施了，开展垃圾分类宣传<spanclass="right">2023-08-18</span></a></li><li><ahref="#">3《生活垃圾管理条例》正式实施了，开展垃圾分类宣传<spanclass="right">2023-08-18</span></a></li><li><ahref="#">4《生活垃圾管理条例》正式实施了，开展垃圾分类宣传<spanclass="right">2023-08-18</span></a></li><li><ahref="#">5《生活垃圾管理条例》正式实施了，开展垃圾分类宣传<spanclass="right">2023-08-18</span></a></li><li><ahref="#">6《生活垃圾管理条例》正式实施了，开展垃圾分类宣传<spanclass="right">2023-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;font-size:18px;line-height:26px;color:#FFFFFF;}.more1{padding:14px31px00;}.more1a{font-size:12px;color:#FFFFFF;}.left-bottomulli{list-style:url(../images/list-style.png);padding-left:10px;}.left-bottomul{margin:20px020px35px;}.left-bottomullia{color:#454545;font-size:14px;line-height:34px;}.left-bottomulliaspan{padding-right:26px;}5.9实训——制作社区网页面5.9.2制作导航栏1.页面布局规划导航栏页面的效果如图5-36所示，页面布局示意图如图5-37所示。5.9实训——制作社区网页面2．前期准备与通知公告板块相同，这里不再重复。3．编写代码（1）页面结构代码nav.html的结构代码如下。5.9实训——制作社区网页面<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>首页</title><linkrel="stylesheet"href="css/public.css"/></head><body><header><divclass="daohang"><divclass="nav"><ul><li><ahref="#">网站首页</a></li><li><ahref="#">生活指南</a><ul><li><ahref="#">餐饮旅游</a></li><li><ahref="#">文化娱乐</a></li><li><ahref="#">家政服务</a></li><li><ahref="#">教育培训</a></li></ul></li><li><ahref="#">热点关注</a></li><li><ahref="#">政策解读</a></li><li><ahref="#">公益捐赠</a></li><li><ahref="#">在线调查</a></li><li><ahref="#">我要留言</a><ul><li><ahref="#">突发事件</a></li><li><ahref="#">百姓呼声</a></li><li><ahref="#">建言献策</a></li><li><ahref="#">代表直通车</a></li></ul></li><li><ahref="#">注册加入</a><ul><li><ahref="#">企业加入</a></li><li><ahref="#">个人加入</a></li></ul></li><li><ahref="#">联系我们</a></li></ul></div></div></header></body></html>5.9实训——制作社区网页面（2）public.css样式文件本样式文件是社区网所有网页都用到的公用样式，代码如下。*{margin:0;padding:0;font-family:"微软雅黑";}.header{width:1200px;height:30px;margin:0auto;}ul,li{list-style:none;/*去掉列表前的黑点等样式*/}a{text-decoration:none;}/*添加导航栏的背景图片*/.daohang{width:100%;min-width:1200px;margin:0auto;background:url(../images/daohang1.jpg)center;height:57px;}/*设置导航栏*/.nav{width:1200px;margin:0auto;overflow:hidden;}.navulli{float:left;margin-top:-1px;}.navullia{width:130px;height:52px;text-align:center;line-height:40px;display:block;color:#FFFFFF;font-size:18px;margin:01.5px;padding-top:5px;}.navulli:hover{background:rgb(168,8,8);}.navulliul{position:absolute;display:none;}.navulliulli{

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论