《html西式甜品网制作》由会员分享，可在线阅读，更多相关《html西式甜品网制作（9页珍藏版）》请在金锄头文库上搜索。
1、.wd“西式甜品网首页面制作一、案例描述 1、考核知识点 盒子模型 元素的浮动与定位2、练习目标 掌握盒子的相关属性。 掌握元素的浮动与定位。3、需求分析盒子模型这样的布局方式代替了传统的表格布局，同时结合元素的浮动与定位，可使网页的构造更加多样化，通过学习本案例可以使初学者进一步的稳固盒子模型和元素的浮动与定位等相关知识点。4、案例展示效果如图4-1所示。图4-1 “西式甜品网效果展示二、布局及定义根底样式1、效果分析1HTML构造分析“西式甜品网首页面从上到下可以分为5个模块，如图4-2所示。图4-2 “西式甜品网构造分析2CSS样式分析页面中的各个模块居中显示，页面的版心为980px。另
2、外，页面中的所有字体均为微软雅黑，字体大小为16px，这些可以通过CSS公共样式进展定义。2、页面布局新建index04.html文件，在index04.html文件内书写HTML构造代码，具体代码如下。 1 3 4 5 6 西式甜品网 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 在上述代码中，通过给div添加不同的类名来定义页面中的各个模块。3、定义公共样式为了去除各浏览器的默认样式，使得网页在各浏览器中显示的效果一致，在完成页面布局后，首先要做的就是对CSS样式进展初始化并声明一些通用的样式。在index04
3、.html文件所在的文件夹内新建css文件夹用于存放样式表文件style04.css，使用链入式引入样式表文件。然后定义页面的根底样式，具体如下：/*重置浏览器的默认样式*/*margin:0; padding:0;border:0; background:none;/*全局控制*/bodyfont-family:微软雅黑;font-size:16px;三、案例制作1、制作头部模块1HTML构造分析“头部模块整体由一个大盒子进展控制。内部嵌套和分别用来搭建左侧logo和右侧文字内容局部。“头部模块的具体构造如图4-3所示。图4-3 “头部模块构造图2样式分析“头部模块的宽为980px，通过设置
4、外边距属性使其在页面中居中显示，并设置相对定位。左侧logo和右侧文字内容局部相对外层大盒子设置绝对定位，最后还需设置文字的相关样式等。3搭建构造在index04.html文件内书写“头部模块的HTML构造代码。具体如下： 1 2 3 4 登录 | 注册 5 6 4定义样式在样式表文件style04.css中书写CSS样式代码，用于控制“头部模块。具体如下： 1 .head 2 width:980px; 3 height:80px; 4 margin:0 auto; 5 position: relative; 6 7 .logo 8 position: absolute; 9 left:100
5、px; 10 top:15px; 11 12 .login 13 position: absolute; 14 right:100px; 15 top:34px; 16 color:#ff9c00; 17 cursor: pointer; 18 font-size: 18px; 19 上述代码中，第4行代码用于设置“头部模块在页面中居中显示。保存index04.html与style04.css文件，刷新页面，效果如图4-4所示。图4-4 “头部模块效果图2、制作导航及banner模块1HTML构造分析“导航及“banner模块分别由一个大盒子进展控制。导航内容局部由标记定义，banner图由标
6、记定义。“导航及“banner模块的具体构造如图4-5所示。图4-5 “导航及“banner模块构造图2样式分析“导航模块的背风光通栏显示，因此需设置最外层的宽度100%，内部嵌套的宽度为980px，且在页面中居中显示。定义标记左浮动，并定义相关的文字样式。最后还需设置“banner模块的图片在页面中居中显示。3搭建构造在index04.html文件内书写“导航及“banner模块的HTML构造代码。具体如下： 1 2 3 4 首页 5 公司简介 6 美食甜品 7 用户留言 8 联系我们 9 10 11 12 13 14 4定义样式在样式表文件style04.css中书写CSS样式代码，用于控
7、制“导航及“banner模块。具体如下： 1 .nav 2 width:100%; 3 height:50px; 4 background: #ff9c00; 5 6 .nav_in 7 width:820px; 8 margin:0 auto; 9 line-height: 50px; 10 color:#fff; 11 padding-left: 160px; 12 13 .nav_in span 14 float: left; 15 padding:0 38px; 16 color:#9c5132; 17 cursor: pointer; 18 19 .banner text-align
8、: center;上述代码中，第8行和第19行代码分别用于设置导航内容局部和banner图片在页面中居中显示。保存index04.html与style04.css文件，刷新页面，效果如图4-6所示。图4-6 “导航及“banner模块效果图3、制作产品分类模块1HTML构造分析“产品分类模块主要由标记定义。“产品分类模块的具体构造如图4-7所示。图4-7 “产品分类模块构造图2样式分析“产品分类模块的背风光通栏显示，因此需设置最外层的宽度100%，内部嵌套的宽度为980px，且在页面中居中显示。定义每一个分类模块的标记左浮动，并定义相关的文字样式。3搭建构造在index04.html文件内书写
9、“产品分类模块的HTML构造代码。具体如下： 1 2 3 4 提拉米苏 5 甜甜圈 6 芝士蛋糕 7 马卡龙 8 西式甜点 9 10 11 4定义样式在样式表文件style04.css中书写CSS样式代码，用于控制“产品分类模块。具体如下： 1 .list 2 width:100%; 3 height:240px; 4 background: #e7bf80; 5 6 .list .list_in 7 width:940px; 8 height:195px; 9 margin:0 auto; 10 padding:45px 0 0 40px; 11 12 .list .list_in div
10、13 float: left; 14 width:146px; 15 height:55px; 16 padding-top: 95px; 17 margin-right: 42px; 18 background: url(./images/list1.png) no-repeat; 19 text-align: center; 20 color:#9c5132; 21 22 .list .list_in .list2background: url(./images/list2.png) no-repeat; 23 .list .list_in .list3background: url(./images/list3.png) no-repeat; 24 .list .list_in .list4background: url(./images/li
