《2022年html西式甜品网制作范文》由会员分享，可在线阅读，更多相关《2022年html西式甜品网制作范文（14页珍藏版）》请在金锄头文库上搜索。
1、精选word文档 下载可编辑“西式甜品网”首页面制作一、案例描述1、考核知识点盒子模型元素的浮动与定位2、练习目标掌握盒子的相关属性。掌握元素的浮动与定位。3、需求分析盒子模型这样的布局方式代替了传统的表格布局，同时结合元素的浮动与定位，可使网页的结构更加多样化，通过学习本案例可以使初学者进一步的巩固盒子模型和元素的浮动与定位等相关知识点。4、案例展示效果如图4-1所示。图4-1“西式甜品网”效果展示1 / 13二、布局及定义基础样式1、效果分析（1）HTML结构分析“西式甜品网”首页面从上到下可以分为5个模块，如图4-2所示。头部导航及banner产品分类产品展示版权信息图4-2“西式甜品网
2、”结构分析（2）CSS样式分析页面中的各个模块居中显示，页面的版心为980px。另外，页面中的所有字体均为微软雅黑，字体大小为16px，这些可以通过CSS公共样式进行定义。2、页面布局新建index0html文件，在index0html文件内书写HTML结构代码，具体代码如下。2 / 1313456西式甜品网78910111213141516171819202122232425262728在上述代码中，通过给div添加不同的类名来定义页面中的各个模块。3、定义公共样式为了清除各浏览器的默认样式，使得网页在各浏览器中显示的效果一致，在完成页面布局后，首先要做的就是对CSS样式进行初始化并声明一些
3、通用的样式。在index0html文件所在的文件夹内新建css文件夹用于存放样式表文件style0css，使用链入式引入样式表文件。然后定义页面的基础样式，具体如下*margin:0; padding:0;border:0; background:none;bodyfont-family:微软雅黑;font-size:16px;3 / 134 / 13 三、案例制作1、制作头部模块（1）HTML 结构分析“头部”模块整体由一个大盒子进行控制。内部嵌套和分别用来搭建左侧logo 和右侧文字内容部分。“头部”模块的具体结构如图4-3所示。图4-3 “头部”模块结构图（2）样式分析“头部”模块的宽为
4、980px ，通过设置外边距属性使其在页面中居中显示，并设置相对定位。左侧logo 和右侧文字内容部分相对外层大盒子设置绝对定位，最后还需设置文字的相关样式等。（3）搭建结构在index0html 文件内书写“头部”模块的HTML 结构代码。具体如下 1234 登录 | 注册56（4）定义样式在样式表文件style0css 中书写CSS 样式代码，用于控制“头部”模块。具体如下 1 .head2width:980px; 3height:80px; 4margin:0 auto; 5position: relative;6 7 .logo8position: absolute; 9left:10
5、0px; 10top:15px; 11 12 .login13position: absolute; 14 right:100px;15top:34px;16color:#ff9c00;17cursor: pointer;18font-size: 18px;19上述代码中，第4行代码用于设置“头部”模块在页面中居中显示。保存index0html与style0css文件，刷新页面，效果如图4-4所示。图4-4“头部”模块效果图2、制作导航及banner模块（1）HTML结构分析“导航”及“banner”模块分别由一个大盒子进行控制。导航内容部分由标记定义，banner 图由标记定义。“导航”及“
6、banner”模块的具体结构如图4-5所示。图4-5“导航”及“banner”模块结构图（2）样式分析“导航”模块的背景色通栏显示，因此需设置最外层的宽度100%，内部嵌套的宽度为980px，且在页面中居中显示。定义标记左浮动，并定义相关的文字样式。最后还需设置“banner”模块的图片在页面中居中显示。（3）搭建结构在index0html文件内书写“导航”及“banner”模块的HTML结构代码。具体如下1234首页5 / 135公司简介6美食甜品7用户留言8联系我们91011121314（4）定义样式在样式表文件style0css中书写CSS样式代码，用于控制“导航”及“banner”模块
7、。具体如下 nav2width:100%;3height:50px;4background: #ff9c00;5nav_in7width:820px;8margin:0 auto;9line-height: 50px;10color:#fff;11padding-left: 160px;121nav_in span14float: left;15padding:0 38px;16color:#9c5132;17cursor: pointer;181banner text-align: center;上述代码中，第8行和第19行代码分别用于设置导航内容部分和banner图片在页面中居中显示。保存
8、index0html与style0css文件，刷新页面，效果如图4-6所示。6 / 137 / 13图4-6 “导航”及“banner ”模块效果图3、制作产品分类模块（1）HTML 结构分析“产品分类”模块主要由标记定义。“产品分类”模块的具体结构如图4-7所示。图4-7 “产品分类”模块结构图（2）样式分析“产品分类”模块的背景色通栏显示，因此需设置最外层的宽度100%，内部嵌套的宽度为980px ，且在页面中居中显示。定义每一个分类模块的标记左浮动，并定义相关的文字样式。（3）搭建结构在index0html 文件内书写“产品分类”模块的HTML 结构代码。具体如下 1234提拉米苏 5
9、甜甜圈6芝士蛋糕7马卡龙8西式甜点91011（4）定义样式在样式表文件style0css中书写CSS样式代码，用于控制“产品分类”模块。具体如下 list2width:100%;3height:240px;4background: #e7bf80;5list .list_in7width:940px;8height:195px;9margin:0 auto;10padding:45px 0 0 40px;111list .list_in div13float: left;14width:146px;15height:55px;16padding-top: 95px;17margin-right
10、: 42px;18background: url( no-repeat;19text-align: center;20color:#9c5132;212list .list_in .list2background: url( no-repeat;2list .list_in .list3background: url( no-repeat;2list .list_in .list4background: url( no-repeat;2list .list_in .list5background: url( no-repeat;上述代码中，第22-25行代码用于分别设置各个分类模块的背景图片。
11、保存index0html与style0css文件，刷新页面，效果如图4-8所示。8 / 139 / 13图4-8 “产品分类”模块效果图4、制作产品展示模块（1）HTML 结构分析“产品展示”模块主要由标记嵌套标记和标记定义。“产品展示”模块的具体结构如图4-9所示。图4-9 “产品展示”模块结构图（2）样式分析“产品展示”模块的背景色通栏显示，因此需设置最外层的宽度100%，内部嵌套的宽度为980px ，且在页面中居中显示。定义每一个展示模块的标记左浮动，并定义相关的文字样式。（3）搭建结构在index0html 文件内书写“产品展示”模块的HTML 结构代码。具体如下123456 爱的N 次方7马卡龙8价格30元9101112果肉果冻13双色马卡龙 14价格30元15161718芒果味19布丁马卡龙 20价格30元21222324果冻荔枝味25多彩马卡龙 26价格30元27282930果味巧克力31西式甜点 32价格30元33343536奶油水果
