1、1“西式甜品网”首页面制作一、案例描述 1、考核知识点 盒子模型 元素的浮动与定位2、练习目标 掌握盒子的相关属性。 掌握元素的浮动与定位。3、需求分析盒子模型这样的布局方式代替了传统的表格布局，同时结合元素的浮动与定位，可使网页的结构更加多样化，通过学习本案例可以使初学者进一步的巩固盒子模型和元素的浮动与定位等相关知识点。4、案例展示效果如图 4-1 所示。2图 4-1 “西式甜品网”效果展示二、布局及定义基础样式1、效果分析（1）HTML 结构分析“西式甜品网”首页面从上到下可以分为 5 个模块，如图 4-2 所示。3头部导航及 b a n n e r产品分类产品展示版权信息图 4-2 “
2、西式甜品网”结构分析（2）CSS 样式分析页面中的各个模块居中显示，页面的版心为 980px。另外，页面中的所有字体均为微软雅黑，字体大小为 16px，这些可以通过 CSS 公共样式进行定义。2、页面布局新建 index04.html 文件，在 index04.html 文件内书写 HTML 结构代码，具体代码如下。1 3 4 5 6 西式甜品网7 48 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 在上述代码中，通过给 div 添加不同的类名来定义页面中的各个模块。3、定义公共样式为了清除各浏览器的默认样式，使得网页在各
3、浏览器中显示的效果一致，在完成页面布局后，首先要做的就是对 CSS 样式进行初始化并声明一些通用的样式。在 index04.html 文件所在的文件夹内新建 css文件夹用于存放样式表文件 style04.css，使用链入式引入样式表文件。然后定义页面的基础样式，具体如下：/*重置浏览器的默认样式*/*margin:0; padding:0;border:0; background:none;/*全局控制 */bodyfont-family:“微软雅黑“;font-size:16px;三、案例制作1、制作头部模块（1）HTML 结构分析“头部”模块整体由一个大盒子进行控制。内部嵌套 和分别用来
4、搭建左侧 logo 和右侧文字内容部分。“头部”模块的具体结构如图 4-3 所示。5图 4-3 “头部”模块结构图（2）样式分析“头部”模块的宽为 980px，通过设置外边距属性使其在页面中居中显示，并设置相对定位。左侧logo 和右侧文字内容部分相对外层大盒子设置绝对定位，最后还需设置文字的相关样式等。（3）搭建结构在 index04.html 文件内书写“ 头部”模块的 HTML 结构代码。具体如下：1 2 3 4 登录 | 注册5 6 （4）定义样式在样式表文件 style04.css 中书写 CSS 样式代码，用于控制“头部”模块。具体如下：1 .head2 width:980px;3
5、 height:80px;4 margin:0 auto;5 position: relative;6 7 .logo8 position: absolute;9 left:100px;10 top:15px;11 12 .login13 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
6、-4 所示。6图 4-4 “头部”模块效果图2、制作导航及 banner 模块（1）HTML 结构分析“导航”及“banner”模块分别由一个大盒子进行控制。导航内容部分由标记定义，banner 图由 标记定义。 “导航”及“banner”模块的具体结构如图 4-5 所示。图 4-5 “导航”及“banner”模块结构图（2）样式分析“导航”模块的背景色通栏显示，因此需设置最外层的宽度 100%，内部嵌套的宽度为980px，且在页面中居中显示。定义标记左浮动，并定义相关的文字样式。最后还需设置“banner”模块的图片在页面中居中显示。（3）搭建结构在 index04.html 文件内书写“
7、导航”及“banner”模块的 HTML 结构代码。具体如下：1 2 3 4 首页5 公司简介6 美食甜品7 用户留言8 联系我们9 10 711 12 13 14 （4）定义样式在样式表文件 style04.css 中书写 CSS 样式代码，用于控制“导航”及“banner ”模块。具体如下：1 .nav2 width:100%;3 height:50px;4 background: #ff9c00;5 6 .nav_in7 width:820px;8 margin:0 auto;9 line-height: 50px;10 color:#fff;11 padding-left: 160px
8、;12 13 .nav_in span14 float: left;15 padding:0 38px;16 color:#9c5132;17 cursor: pointer;18 19 .banner text-align: center;上述代码中，第 8 行和第 19 行代码分别用于设置导航内容部分和 banner 图片在页面中居中显示。保存 index04.html 与 style04.css 文件，刷新页面，效果如图 4-6 所示。图 4-6 “导航”及“banner”模块效果图83、制作产品分类模块（1）HTML 结构分析“产品分类”模块主要由标记定义。“产品分类”模块的具体结构如
9、图 4-7 所示。图 4-7 “产品分类”模块结构图（2）样式分析“产品分类”模块的背景色通栏显示，因此需设置最外层的宽度 100%，内部嵌套的宽度为 980px，且在页面中居中显示。定义每一个分类模块的标记左浮动，并定义相关的文字样式。（3）搭建结构在 index04.html 文件内书写“ 产品分类”模块的 HTML 结构代码。具体如下：1 2 3 4 提拉米苏5 甜甜圈6 芝士蛋糕7 马卡龙8 西式甜点9 10 11 （4）定义样式在样式表文件 style04.css 中书写 CSS 样式代码，用于控制“产品分类”模块。具体如下：1 .list2 width:100%;3 height:
10、240px;4 background: #e7bf80;5 6 .list .list_in7 width:940px;8 height:195px;99 margin:0 auto;10 padding:45px 0 0 40px;11 12 .list .list_in div13 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;2
11、0 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/list4.png) no-repeat;25 .list .list_in .list5background: url(/images/list5.png) no-repeat;上述代码中
12、，第 22-25 行代码用于分别设置各个分类模块的背景图片。保存 index04.html 与 style04.css 文件，刷新页面，效果如图 4-8 所示。图 4-8 “产品分类”模块效果图4、制作产品展示模块（1）HTML 结构分析“产品展示”模块主要由标记嵌套 标记和标记定义。“产品展示”模块的具体结构如图 4-9 所示。10图 4-9 “产品展示”模块结构图（2）样式分析“产品展示”模块的背景色通栏显示，因此需设置最外层的宽度 100%，内部嵌套的宽度为 980px，且在页面中居中显示。定义每一个展示模块的标记左浮动，并定义相关的文字样式。（3）搭建结构在 index04.html
13、文件内书写“ 产品展示”模块的 HTML 结构代码。具体如下：1 2 3 4 5 6 爱的 N 次方7 马卡龙8 价格：30 元9 10 11 12 果肉果冻13 双色马卡龙14 价格：30 元1115 16 17 18 芒果味19 布丁马卡龙20 价格：30 元21 22 23 24 果冻荔枝味25 多彩马卡龙26 价格：30 元27 28 29 30 果味巧克力31 西式甜点32 价格：30 元33 34 35 36 奶油水果37 提拉米苏38 价格：30 元39 40 41 42 玫瑰花型43 布丁44 价格：30 元45 46 47 48 燕麦奶油49 芝士蛋糕50 价格：30 元51
14、 52 53 54 （4）定义样式在样式表文件 style04.css 中书写 CSS 样式代码，用于控制“产品展示”模块。具体如下：1 .content122 width:100%;3 height:570px;4 background: #f8f5bc;5 6 .con7 width:912px;8 height:530px;9 margin:0 auto;10 padding:40px 0 0 68px;11 12 .con .con_type13 width:180px;14 height:220px;15 border:1px solid #ccc;16 float: left;17
15、 background: #fff;18 margin:0 39px 30px 0;19 font-size: 14px;20 color:#9c5132;21 22 .con .con_type span23 display: block;24 padding:2px 0 0 16px; 25 26 .con .con_type span.con_namecolor:#fd8187;27 .con .con_type span b28 font-weight: normal;29 color:#fd8187;30 31 .con .con_type img32 margin:12px 12p
16、x 3px 12px;33 width:158px;34 height:122px;35 上述代码中，第 23 行代码将标记转换为块元素用于换行显示文字内容。保存 index04.html 与 style04.css 文件，刷新页面，效果如图 4-10 所示。13图 4-10 “产品展示”模块效果图5、制作版权信息模块（1）HTML 结构分析“版权信息”模块由标记定义。具体结构如图 4-11 所示。图 4-11 “版权信息”模块结构图（2）样式分析“版权信息”模块的背景图通栏显示，因此需设置最外层的宽度 100%，且文字内容居中显示。（3）搭建结构在 index04.html 文件内书写“ 版
17、权信息”模块的 HTML 结构代码。具体如下：1 2 西式甜品网版权所有 2000-2016 京 ICP 备 08001421 号 京公网安备110108007702 3 14（4）定义样式在样式表文件 style04.css 中书写 CSS 样式代码，用于控制“版权信息”模块。具体如下：1 .footer2 position: relative;3 top:-8px;4 width:100%;5 height:120px;6 background: url(/images/footer.png) repeat-x;7 text-align: center;8 line-height: 120px;9 color:#fff;10 font-size: 18px;11 上述代码中，第 6 行代码用于设置背景图沿 X 轴平铺。保存 index04.html 与 style04.css 文件，刷新页面，效果如图 4-12 所示。图 4-12 “版权信息”模块效果图
