项目 4 补充案例 西式甜品网 首页面制作 一 案例描述 1 考核知识点 盒子模型 元素的浮动与定位 2 练习目标 掌握盒子的相关属性 掌握元素的浮动与定位 3 需求分析 盒子模型这样的布局方式代替了传统的表格布局, 同时结合元素的浮动与定位, 可使网页的结构更加 多样化, 通过学习本案例可以使初学者进一步的巩固盒子模型和元素的浮动与定位等相关知识点 4 案例展示 效果如图 4-1 所示 1
图 4-1 西式甜品网 效果展示 二 布局及定义基础样式 1 效果分析 (1)HTML 结构分析 西式甜品网 首页面从上到下可以分为 5 个模块, 如图 4-2 所示 2
头部 导航及 banner 产品分类 产品展示 版权信息 图 4-2 西式甜品网 结构分析 (2)CSS 样式分析 页面中的各个模块居中显示, 页面的版心为 980px 另外, 页面中的所有字体均为微软雅黑, 字体大 小为 16px, 这些可以通过 CSS 公共样式进行定义 2 页面布局 新建 index04.html 文件, 在 index04.html 文件内书写 HTML 结构代码, 具体代码如下 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 2 "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> 3 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 4 <head> 5 <meta http-equiv="content-type" content="text/html;charset=utf-8"> 6 <title> 西式甜品网 </title> 7 </head> 3
8 <body> 9 <!--head begin--> 10 <div class="head"></div> 11 <!--head end--> 12 <!--nav begin--> 13 <div class="nav"></div> 14 <!--nav end--> 15 <!--banner begin--> 16 <div class="banner"></div> 17 <!--banner end--> 18 <!--list begin--> 19 <div class="list"></div> 20 <!--list end--> 21 <!--content begin--> 22 <div class="content"></div> 23 <!--content end--> 24 <!--footer begin--> 25 <div class="footer"></div> 26 <!--footer end--> 27 </body> 28 </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 结构分析 头部 模块整体由一个大盒子 进行控制 内部嵌套 和 分别用来搭建左侧 logo 和右 侧文字内容部分 头部 模块的具体结构如图 4-3 所示 4
图 4-3 头部 模块结构图 (2) 样式分析 头部 模块的宽为 980px, 通过设置外边距属性使其在页面中居中显示, 并设置相对定位 左侧 logo 和右侧文字内容部分相对外层大盒子设置绝对定位, 最后还需设置文字的相关样式等 (3) 搭建结构在 index04.html 文件内书写 头部 模块的 HTML 结构代码 具体如下 : 1 <!--head begin--> 2 <div class="head"> 3 <img class="logo" src="images/logo.jpg" /> 4 <div class="login"> 登录 </span> 注册 </span></div> 5 </div> 6 <!--head end--> (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:100px; 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 所示 5
图 4-4 头部 模块效果图 2 制作导航及 banner 模块 (1)HTML 结构分析 导航 及 banner 模块分别由一个大盒子 进行控制 导航内容部分由 标记定义,banner 图由 标记定义 导航 及 banner 模块的具体结构如图 4-5 所示 图 4-5 导航 及 banner 模块结构图 (2) 样式分析 导航 模块的背景色通栏显示, 因此需设置最外层 的宽度 100%, 内部嵌套的 宽度为 980px, 且在页面中居中显示 定义 标记左浮动, 并定义相关的文字样式 最后还需设置 banner 模块的图片在页面中居中显示 (3) 搭建结构在 index04.html 文件内书写 导航 及 banner 模块的 HTML 结构代码 具体如下 : 1 <!--nav begin--> 2 <div class="nav"> 3 <div class="nav_in"> 4 首页 </span> 5 公司简介 </span> 6 美食甜品 </span> 7 用户留言 </span> 8 <span class="last" > 联系我们 </span> 9 </div> 10 </div> 6
11 <!--nav end--> 12 <!--banner begin--> 13 <div class="banner"><img src="images/banner.jpg" /></div> 14 <!--banner end--> (4) 定义样式在样式表文件 style04.css 中书写 CSS 样式代码, 用于控制 导航 及 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: center;} 上述代码中, 第 8 行和第 19 行代码分别用于设置导航内容部分和 banner 图片在页面中居中显示 保存 index04.html 与 style04.css 文件, 刷新页面, 效果如图 4-6 所示 图 4-6 导航 及 banner 模块效果图 7
3 制作产品分类模块 (1)HTML 结构分析 产品分类 模块主要由 标记定义 产品分类 模块的具体结构如图 4-7 所示 图 4-7 产品分类 模块结构图 (2) 样式分析 产品分类 模块的背景色通栏显示, 因此需设置最外层 的宽度 100%, 内部嵌套的 宽度为 980px, 且在页面中居中显示 定义每一个分类模块的 标记左浮动, 并定义相关的文字样式 (3) 搭建结构在 index04.html 文件内书写 产品分类 模块的 HTML 结构代码 具体如下 : 1 <!--list begin--> 2 <div class="list"> 3 <div class="list_in"> 4 <div class="list1"> 提拉米苏 </div> 5 <div class="list2"> 甜甜圈 </div> 6 <div class="list3"> 芝士蛋糕 </div> 7 <div class="list4"> 马卡龙 </div> 8 <div class="list5"> 西式甜点 </div> 9 </div> 10 </div> 11 <!--list end--> (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; 8
9 margin:0 auto; 10 padding:45px 0 0 40px; 11 } 12.list.list_in div{ 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.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 结构分析 产品展示 模块主要由 标记嵌套 标记和 标记定义 产品展示 模块的具体结构 如图 4-9 所示 9
图 4-9 产品展示 模块结构图 (2) 样式分析 产品展示 模块的背景色通栏显示, 因此需设置最外层 的宽度 100%, 内部嵌套的 宽度为 980px, 且在页面中居中显示 定义每一个展示模块的 标记左浮动, 并定义相关的文字样式 (3) 搭建结构在 index04.html 文件内书写 产品展示 模块的 HTML 结构代码 具体如下 : 1 <!--content begin--> 2 <div class="content"> 3 <div class="con"> 4 <div class="con_type"> 5 <img src="images/con1.jpg" /> 6 爱的 N 次方 </span> 7 <span class="con_name"> 马卡龙 </span> 8 价格 :<b>30 元 </b></span> 9 </div> 10 <div class="con_type"> 11 <img src="images/con2.jpg" /> 12 果肉果冻 </span> 13 <span class="con_name"> 双色马卡龙 </span> 14 价格 :<b>30 元 </b></span> 10
15 </div> 16 <div class="con_type"> 17 <img src="images/con3.jpg" /> 18 芒果味 </span> 19 <span class="con_name"> 布丁马卡龙 </span> 20 价格 :<b>30 元 </b></span> 21 </div> 22 <div class="con_type"> 23 <img src="images/con4.jpg" /> 24 果冻荔枝味 </span> 25 <span class="con_name"> 多彩马卡龙 </span> 26 价格 :<b>30 元 </b></span> 27 </div> 28 <div class="con_type"> 29 <img src="images/con5.jpg" /> 30 果味巧克力 </span> 31 <span class="con_name"> 西式甜点 </span> 32 价格 :<b>30 元 </b></span> 33 </div> 34 <div class="con_type"> 35 <img src="images/con6.jpg" /> 36 奶油水果 </span> 37 <span class="con_name"> 提拉米苏 </span> 38 价格 :<b>30 元 </b></span> 39 </div> 40 <div class="con_type"> 41 <img src="images/con7.jpg" /> 42 玫瑰花型 </span> 43 <span class="con_name"> 布丁 </span> 44 价格 :<b>30 元 </b></span> 45 </div> 46 <div class="con_type"> 47 <img src="images/con8.jpg" /> 48 燕麦奶油 </span> 49 <span class="con_name"> 芝士蛋糕 </span> 50 价格 :<b>30 元 </b></span> 51 </div> 52 </div> 53 </div> 54 <!--content end--> (4) 定义样式 在样式表文件 style04.css 中书写 CSS 样式代码, 用于控制 产品展示 模块 具体如下 : 1.content{ 11
2 width:100%; 3 height:570px; 4 background: #f8f5bc; 5 } 6.con{ 7 width:912px; 8 height:530px; 9 margin:0 auto; 10 padding:40px 0 0 68px; 11 } 12.con.con_type{ 13 width:180px; 14 height:220px; 15 border:1px solid #ccc; 16 float: left; 17 background: #fff; 18 margin:0 39px 30px 0; 19 font-size: 14px; 20 color:#9c5132; 21 } 22.con.con_type span{ 23 display: block; 24 padding:2px 0 0 16px; 25 } 26.con.con_type span.con_name{color:#fd8187;} 27.con.con_type span b{ 28 font-weight: normal; 29 color:#fd8187; 30 } 31.con.con_type img{ 32 margin:12px 12px 3px 12px; 33 width:158px; 34 height:122px; 35 } 上述代码中, 第 23 行代码将 标记转换为块元素用于换行显示文字内容 保存 index04.html 与 style04.css 文件, 刷新页面, 效果如图 4-10 所示 12
图 4-10 产品展示 模块效果图 5 制作版权信息模块 (1)HTML 结构分析 版权信息 模块由 标记定义 具体结构如图 4-11 所示 图 4-11 版权信息 模块结构图 (2) 样式分析 版权信息 模块的背景图通栏显示, 因此需设置最外层 的宽度 100%, 且文字内容居中显示 (3) 搭建结构在 index04.html 文件内书写 版权信息 模块的 HTML 结构代码 具体如下 : 1 <!--footer begin--> 2 <div class="footer"> 西式甜品网版权所有 2000-2016 京 ICP 备 08001421 号 京公网安备 110108007702</div> 3 <!--footer end--> (4) 定义样式 13
在样式表文件 style04.css 中书写 CSS 样式代码, 用于控制 版权信息 模块 具体如下 : 1.footer{ 2 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 版权信息 模块效果图 14