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

本节介绍社区网主页几个板块的制作，重点练习Div+CSS布局页面的相关知识。CSS3的盒模型实训——制作社区网网页《网页设计与制作教程Web前端开发第7版》

目录CSS的盒模型6.1CSS盒模型的组成和大小6.2CSS盒模型的属性6.3CSS布局属性6.4CSS盒子定位属性 6.5CSS3多列属性6.6CSS基本布局样式 6.7实训——制作社区网网页6.8练习

6.7实训——制作社区网网页6.7.1制作新闻图片板块1.页面布局规划

6.7实训——制作社区网网页2.前期准备1）栏目目录结构。在栏目文件夹(d:\sunshine\)下创建文件夹images和css，分别存放图像素材和外部样式表文件。2）页面素材。将本页面需要使用的图像素材存放在文件夹images下。3）外部样式表。在文件夹css下新建一个名为public.css、index.css的样式表文件。

6.7实训——制作社区网网页!DOCTYPEhtmlhtmlheadmetacharset=utf-8title首页/titlelinkrel=stylesheethref=css/public.css/linkrel=stylesheethref=css/index.css//headbodydivclass=left-topdivclass=new_picp新闻图片/plabelclass=rightmoreahref=#更多/a/label/div3．编写代码（1）页面结构代码index_newspictures.html

6.7实训——制作社区网网页divclass=slideid=lun2divclass=carousedivclass=slideItemimgclass=banner-imgsrc=images/new1.jpgdivclass=new_xiangqingp旅游旺季来临……/p/div/div/div/divdivclass=new2rightdivclass=new2_picimgsrc=images/new2-1.jpgdivclass=new_xiangqing1p1街景/p/div/divdivclass=new2_picimgsrc=images/new2-2.jpgdivclass=new_xiangqing1p2街景/p/div/div

6.7实训——制作社区网网页divclass=new2_picimgsrc=images/new2-3.jpgdivclass=new_xiangqing1p3街景/p/div/div/div/div/body/html

6.7实训——制作社区网网页*{margin:0;padding:0;font-family:微软雅黑;}.right{float:right;}.left{float:left;}.clear{clear:both;}（2）public.css样式文件本样式文件是社区网所有网页都