《html 西式甜品网制作》由会员分享，可在线阅读，更多相关《html 西式甜品网制作（19页珍藏版）》请在金锄头文库上搜索。
1、“西式甜品网”首页面制作一、案例描述1、考核知识点盒子模型元素的浮动与定位2、练习目标 掌握盒子的相关属性。掌握元素的浮动与定位。3、需求分析盒子模型这样的布局方式代替了传统的表格布局，同时结合元素的浮动与定位，可使网页的结构更加 多样化，通过学习本案例可以使初学者进一步的巩固盒子模型和元素的浮动与定位等相关知识点。4、案例展示效果如图4-1所示。3aJi 图4-1“西式甜品网”效果展示二、布局及定义基础样式1、效果分析(1) HTML结构分析“西式甜品网”首页面从上到下可以分为5个模块，如图4-2所示。图4-2“西式甜品网”结构分析(2) CSS样式分析页面中的各个模块居中显示，页面的版心为
2、980px。另外，页面中的所有字体均为微软雅黑，字体大 小为16px，这些可以通过CSS公共样式进行定义。2、页面布局新建index04.html文件，在index04.html文件内书写HTML结构代码，具体代码如下。1 3 4 5 6 title西式甜品网 7 8 9 !-head begin10 div class=head/div11 !-head end12 !-nav begin-13 div class=nav/div14 !-nav end15 !-banner begin-16 div class=banner/div17 !-banner end18 !-list begi
3、n-19 div class=list/div20 !-list end-21 !-content begin-22 div class=content/div23 24 !-footer begin-25 div class=footer/div26 27 /body28 /html在上述代码中，通过给div添加不同的类名来定义页面中的各个模块。3、定义公共样式为了清除各浏览器的默认样式，使得网页在各浏览器中显示的效果一致，在完成页面布局后，首先要 做的就是对CSS样式进行初始化并声明一些通用的样式。在index04.html文件所在的文件夹内新建css文 件夹用于存放样式表文件style0
4、4.css,使用链入式引入样式表文件。然后定义页面的基础样式，具体如下:/*重置浏览器的默认样式*/*margin:O; padding:0;border:0; background:none;/*全局控制*/bodyfont-family:微软雅黑；font-size:16px;三、案例制作1、制作头部模块(1) HTML结构分析“头部”模块整体由一个大盒子vdiv进行控制。内部嵌套vimg和div分别用来搭建左侧logo和右 侧文字内容部分。“头部”模块的具体结构如图4-3所示。 图4-3“头部”模块结构图(2) 样式分析“头部”模块的宽为980px,通过设置外边距属性使其在页面中居中显示
5、，并设置相对定位。左侧logo 和右侧文字内容部分相对外层大盒子设置绝对定位，最后还需设置文字的相关样式等。(3) 搭建结构在index04.html文件内书写“头部”模块的HTML结构代码。具体如下：1 !-head begin-2 3 4 span登录 | 注册 /span/div5 6 !-head end（4）定义样式在样式表文件style04.css中书写CSS样式代码，用于控制“头部”模块。具体如下:1.head2width:980px;3height:80px;4margin:。 auto;5position: relative;67.logo8position: absolut
6、e;9left:100px;10top:15px;1112.login13position: absolute;14right:100px;15top:34px;16color:#ff9c00;17cursor: pointer;18font-size: 18px;19上述代码中，第4行代码用于设置“头部”模块在页面中居中显示。 保存index04.html与style04.css文件，刷新页面，效果如图4-4所示。OBSiMiH - QZiLl IiLriizEas.厶也I到-4 -:阿旧 丄5.-： I - ：7-找旳廿图4-4“头部”模块效果图2、制作导航及banner模块（1）HTML
7、结构分析“导航”及“banner”模块分别由一个大盒子vdiv进行控制。导航内容部分由vspan标记定义，banner 图由img标记定义。“导航”及“banner”模块的具体结构如图4-5所示。图4-5“导航”及“banner”模块结构图（2）样式分析“导航”模块的背景色通栏显示，因此需设置最外div 的宽度100%，内部嵌套的 div 宽度为 980px，且在页面中居中显示。定义vspan标记左浮动，并定义相关的文字样式。最后还需设置“banner” 模块的图片在页面中居中显示。（3）搭建结构在index04.html文件内书写“导航”及“banner”模块的HTML结构代码。具体如下:1
8、!-nav begin-23div class=nav in4 首页 5span公司简介 /span6 美食甜品 7 用户留 W8span class=last联系我们 91011 !-nav end-12 !-banner begin13 img src=images/banner.jpg /div14 !-banner end（4）定义样式在样式表文件style04.css中书写CSS样式代码，用于控制“导航”及“banner”模块。具体如下:1 nav2width:100%;3height:50px;4background: #ff9c00;56.nav in7width:820px;8
9、margin:。 auto;9line-height: 50px;10color:#fff;11padding-left: 160px;1213.nav in span14float: left;15padding:。 38px;16color:#9c5132;17cursor: pointer;1819.banner text-align: center;上述代码中，第8行和第19行代码分别用于设置导航内容部分和banner图片在页面中居中显示。保存index04.html与style04.css文件，刷新页面，效果如图4-6所示。图4-6 “导航”及“banner”模块效果图网址：yx,b
10、oK 播妬QQ/微信：2036958273、制作产品分类模块(1) HTML结构分析“产品分类”模块主要由标记定义。“产品分类”模块的具体结构如图4-7所示。图4-7“产品分类”模块结构图(2) 样式分析“产品分类”模块的背景色通栏显示，因此需设置最外层 的宽度100%，内部嵌套的宽度 为980px，且在页面中居中显示。定义每一个分类模块的vdiv标记左浮动，并定义相关的文字样式。(3) 搭建结构在index04.html文件内书写“产品分类”模块的HTML结构代码。具体如下：1 !-list begin-2 3 4 提拉米苏 5 甜甜圈 6 芝士蛋糕 7 马卡龙 8 西式甜点 9 10 11
11、 !-list end-(4) 定义样式在样式表文件style04.css中书写CSS样式代码，用于控制“产品分类”模块。具体如下：1 list2 width:100%;3 height:240px;4 background: #e7bf80;5 6 list list_in7 width:940px;8 height:195px;1011121314151617margin:。 auto;padding:45px 0 0 40px;.list .list in divfloat: left;width:146px;height:55px;padding-top: 95px;margin-right: 42px;1819text-align: center;20color:#9c5132;background: url(./images/list1.png) no-repeat;22.list.listin.list2background:url(./images/list2.png)no-repeat;23.list.listin.list3background:url(./im
