html-西式甜品网制作

1“西式甜品网”首页面制作一、案例描述1、考核知识点盒子模型元素的浮动与定位2、练习目标掌握盒子的相关属性。掌握元素的浮动与定位。3、需求分析盒子模型这样的布局方式代替了传统的表格布局，同时结合元素的浮动与定位，可使网页的结构更加多样化，通过学习本案例可以使初学者进一步的巩固盒子模型和元素的浮动与定位等相关知识点。4、案例展示效果如图4-1所示。2图4-1“西式甜品网”效果展示二、布局及定义基础样式1、效果分析（1）HTML结构分析“西式甜品网”首页面从上到下可以分为5个模块，如图4-2所示。3头部导航及banner产品分类产品展示版权信息图4-2“西式甜品网”结构分析（2）CSS样式分析页面中的各个模块居中显示，页面的版心为980px。另外，页面中的所有字体均为微软雅黑，字体大小为16px，这些可以通过CSS公共样式进行定义。2、页面布局新建index04.html文件，在index04.html文件内书写HTML结构代码，具体代码如下。1!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN2=:lang=en4head5metahttp-equiv=Content-Typecontent=text/html;charset=UTF-86title西式甜品网/title7/head48body9!--headbegin--10divclass=head/div11!--headend--12!--navbegin--13divclass=nav/div14!--navend--15!--bannerbegin--16divclass=banner/div17!--bannerend--18!--listbegin--19divclass=list/div20!--listend--21!--contentbegin--22divclass=content/div23!--contentend--24!--footerbegin--25divclass=footer/div26!--footerend--27/body28/html在上述代码中，通过给div添加不同的类名来定义页面中的各个模块。3、定义公共样式为了清除各浏览器的默认样式，使得网页在各浏览器中显示的效果一致，在完成页面布局后，首先要做的就是对CSS样式进行初始化并声明一些通用的样式。在index04.html文件所在的文件夹内新建css文件夹用于存放样式表文件style04.css，使用链入式引入样式表文件。然后定义页面的基础样式，具体如下：/*重置浏览器的默认样式*/*{margin:0;padding:0;border:0;background:none;}/*全局控制*/body{font-family:微软雅黑;font-size:16px;}三、案例制作1、制作头部模块（1）HTML结构分析“头部”模块整体由一个大盒子div进行控制。内部嵌套img和div分别用来搭建左侧logo和右侧文字内容部分。“头部”模块的具体结构如图4-3所示。5divimgdivspanspan图4-3“头部”模块结构图（2）样式分析“头部”模块的宽为980px，通过设置外边距属性使其在页面中居中显示，并设置相对定位。左侧logo和右侧文字内容部分相对外层大盒子设置绝对定位，最后还需设置文字的相关样式等。（3）搭建结构在index04.html文件内书写“头部”模块的HTML结构代码。具体如下：1!--headbegin--2divclass=head3imgclass=logosrc=images/logo.jpg/4divclass=loginspan登录/span|span注册/span/div5/div6!--headend--（4）定义样式在样式表文件style04.css中书写CSS样式代码，用于控制“头部”模块。具体如下：1.head{2width:980px;3height:80px;4margin:0auto;5position:relative;6}7.logo{8position:absolute;9left:100px;10top:15px;11}12.login{13position:absolute;14right:100px;15top:34px;16color:#ff9c00;17cursor:pointer;18font-size:18px;19}上述代码中，第4行代码用于设置“头部”模块在页面中居中显示。保存index04.html与style04.css文件，刷新页面，效果如图4-4所示。6图4-4“头部”模块效果图2、制作导航及banner模块（1）HTML结构分析“导航”及“banner”模块分别由一个大盒子div进行控制。导航内容部分由span标记定义，banner图由img标记定义。“导航”及“banner”模块的具体结构如图4-5所示。divdivspanspanspanspanspanimgdiv图4-5“导航”及“banner”模块结构图（2）样式分析“导航”模块的背景色通栏显示，因此需设置最外层div的宽度100%，内部嵌套的div宽度为980px，且在页面中居中显示。定义span标记左浮动，并定义相关的文字样式。最后还需设置“banner”模块的图片在页面中居中显示。（3）搭建结构在index04.html文件内书写“导航”及“banner”模块的HTML结构代码。具体如下：1!--navbegin--2divclass=nav3divclass=nav_in4span首页/span5span公司简介/span6span美食甜品/span7span用户留言/span8spanclass=last联系我们/span9/div10/div711!--navend--12!--bannerbegin--13divclass=bannerimgsrc=images/banner.jpg//div14!--bannerend--（4）定义样式在样式表文件style04.css中书写CSS样式代码，用于控制“导航”及“banner”模块。具体如下：1.nav{2width:100%;3height:50px;4background:#ff9c00;5}6.nav_in{7width:820px;8margin:0auto;9line-height:50px;10color:#fff;11padding-left:160px;12}13.nav_inspan{14float:left;15padding:038px;16color:#9c5132;17cursor:pointer;18}19.banner{text-align:center;}上述代码中，第8行和第19行代码分别用于设置导航内容部分和banner图片在页面中居中显示。保存index04.html与style04.css文件，刷新页面，效果如图4-6所示。图4-6“导航”及“banner”模块效果图83、制作产品分类模块（1）HTML结构分析“产品分类”模块主要由div标记定义。“产品分类”模块的具体结构如图4-7所示。divdivdivdivdivdivdiv图4-7“产品分类”模块结构图（2）样式分析“产品分类”模块的背景色通栏显示，因此需设置最外层div的宽度100%，内部嵌套的div宽度为980px，且在页面中居中显示。定义每一个分类模块的div标记左浮动，并定义相关的文字样式。（3）搭建结构在index04.html文件内书写“产品分类”模块的HTML结构代码。具体如下：1!--listbegin--2divclass=list3divclass=list_in4divclass=list1提拉米苏/div5divclass=list2甜甜圈/div6divclass=list3芝士蛋糕/div7divclass=list4马卡龙/div8divclass=list5西式甜点/div9/div10/div11!--listend--（4）定义样式在样式表文件style04.css中书写CSS样式代码，用于控制“产品分类”模块。具体如下：1.list{2width:100%;3height:240px;4background:#e7bf80;5}6.list.list_in{7width:940px;8height:195px;99margin:0auto;10padding:45px0040px;11}12.list.list_indiv{13float:left;14width:146px;15height:55px;16padding-top:95px;17margin-right:42px;18background:url(../images/list1.png)no-repeat;19text-align:center;20color:#9c5132;21}22.list.list_in.list2{background:url(../images/list2.png)no-repeat;}23.list.list_in.list3{background:url(../images/list3.png)no-repeat;}24.list.list_in.list4{background:url(../images/list4.png)no-repeat;}25.list.list_in.list5{background:url(../images/list5.png)no-repeat;}上述代码中，第22-25行代码用于分别设置各个分类模块的背景图片。保存index04.html与style04.css文件，刷新页面，效果如图4-8所示。图4-8“产品分类”模块效果图4、制作产品展示模块（1）HTML结构分析“产品展示”模块主要由div标记嵌套img标记和span标记定义。“产品展示”模块的具体结构如图4-9所示。10spanspanspandivdivdivimgspanspanspandivimgspanspanspandivimgspanspanspandivimgspanspanspandivimgspanspanspandivimgspanspanspandivimgspanspanspandivimg图4-9“产品展示”模块结构图（2）样式分析“产品展示”模块的背景色通栏显示，因此需设置最外层div的宽度100%，内部嵌套的div宽度为980px，且在页面中居中显示。定义每一个展示模块的div标记左浮动，并定义相关的文字样式。（3）搭建结构在index04.html文件内书写“产品展示”模块的HTML结构代码。具体如下：1!--contentbegin--2divclass=content3divclass=con