第三章补充案例

Size: px

Start display at page:

Download "第三章补充案例"

狷算阮
5 years ago
Views:

1 项目 4 补充案例西式甜品网首页面制作一案例描述 1 考核知识点盒子模型元素的浮动与定位 2 练习目标掌握盒子的相关属性掌握元素的浮动与定位 3 需求分析盒子模型这样的布局方式代替了传统的表格布局, 同时结合元素的浮动与定位, 可使网页的结构更加多样化, 通过学习本案例可以使初学者进一步的巩固盒子模型和元素的浮动与定位等相关知识点 4 案例展示效果如图 4-1 所示 1

2 图 4-1 西式甜品网效果展示二布局及定义基础样式 1 效果分析 (1)HTML 结构分析西式甜品网首页面从上到下可以分为 5 个模块, 如图 4-2 所示 2

头部导航及 banner 产品分类产品展示版权信息图 4-2 西式甜品网结构分析 (2)CSS 样式分析页面中的各个模块居中显示, 页面的版心为 980px 另外, 页面中的所有字体均为微软雅黑, 字体大小为 16px, 这些可以通过 CSS 公共样式进行定义 2 页面布局新建 index04.html 文件, 在 index04.

3 头部导航及 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 " 3 <html xmlns=" xml:lang="en"> 4 <head> 5 <meta http-equiv="content-type" content="text/html;charset=utf-8"> 6 <title> 西式甜品网 </title> 7 </head> 3

4 8 <body> 9  10 <div class="head"></div> 11  12  13 <div class="nav"></div> 14  15  16 <div class="banner"></div> 17  18  19 <div class="list"></div> 20  21  22 <div class="content"></div> 23  24  25 <div class="footer"></div> 26  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

5 图 4-3 头部模块结构图 (2) 样式分析头部模块的宽为 980px, 通过设置外边距属性使其在页面中居中显示, 并设置相对定位左侧 logo 和右侧文字内容部分相对外层大盒子设置绝对定位, 最后还需设置文字的相关样式等 (3) 搭建结构在 index04.html 文件内书写头部模块的 HTML 结构代码具体如下 : 1  2 <div class="head"> 3 <img class="logo" src="images/logo.jpg" /> 4 <div class="login"> 登录 </span> 注册 </span></div> 5 </div> 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: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

banner 模块的图片在页面中居中显示 (3) 搭建结构在 index04.html 文件内书写导航及 banner 模块的 HTML 结构代码具体如下 : 1 <!

6 图 4-4 头部模块效果图 2 制作导航及 banner 模块 (1)HTML 结构分析导航及 banner 模块分别由一个大盒子进行控制导航内容部分由标记定义,banner 图由标记定义导航及 banner 模块的具体结构如图 4-5 所示图 4-5 导航及 banner 模块结构图 (2) 样式分析导航模块的背景色通栏显示, 因此需设置最外层的宽度 100%, 内部嵌套的宽度为 980px, 且在页面中居中显示定义标记左浮动, 并定义相关的文字样式最后还需设置 banner 模块的图片在页面中居中显示 (3) 搭建结构在 index04.html 文件内书写导航及 banner 模块的 HTML 结构代码具体如下 : 1  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

$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.$

7 11  12  13 <div class="banner"><img src="images/banner.jpg" /></div> 14  (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.

8 3 制作产品分类模块 (1)HTML 结构分析产品分类模块主要由标记定义产品分类模块的具体结构如图 4-7 所示图 4-7 产品分类模块结构图 (2) 样式分析产品分类模块的背景色通栏显示, 因此需设置最外层的宽度 100%, 内部嵌套的宽度为 980px, 且在页面中居中显示定义每一个分类模块的标记左浮动, 并定义相关的文字样式 (3) 搭建结构在 index04.html 文件内书写产品分类模块的 HTML 结构代码具体如下 : 1  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  (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.$

9 9 margin:0 auto; 10 padding:45px px; 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;} 上述代码中, 第行代码用于分别设置各个分类模块的背景图片保存 index04.html 与 style04.css 文件, 刷新页面, 效果如图 4-8 所示图 4-8 产品分类模块效果图 4 制作产品展示模块 (1)HTML 结构分析产品展示模块主要由标记嵌套标记和标记定义产品展示模块的具体结构如图 4-9 所示 9

图 4-9 产品展示模块结构图 (2) 样式分析产品展示模块的背景色通栏显示, 因此需设置最外层的宽度 100%, 内部嵌套的宽度为 980px, 且在页面中居中显示定义每一个展示模块的标记左浮动, 并定义相关的文字样式 (3) 搭建结构在 index04.html 文件内书写产品展示模块的 HTML 结构代码具体如下 : 1 <!

10 图 4-9 产品展示模块结构图 (2) 样式分析产品展示模块的背景色通栏显示, 因此需设置最外层的宽度 100%, 内部嵌套的宽度为 980px, 且在页面中居中显示定义每一个展示模块的标记左浮动, 并定义相关的文字样式 (3) 搭建结构在 index04.html 文件内书写产品展示模块的 HTML 结构代码具体如下 : 1  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

11 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  (4) 定义样式在样式表文件 style04.css 中书写 CSS 样式代码, 用于控制产品展示模块具体如下 : 1.content{ 11

12 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 px; 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 px; 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.

13 图 4-10 产品展示模块效果图 5 制作版权信息模块 (1)HTML 结构分析版权信息模块由标记定义具体结构如图 4-11 所示图 4-11 版权信息模块结构图 (2) 样式分析版权信息模块的背景图通栏显示, 因此需设置最外层的宽度 100%, 且文字内容居中显示 (3) 搭建结构在 index04.html 文件内书写版权信息模块的 HTML 结构代码具体如下 : 1  2 <div class="footer"> 西式甜品网版权所有京 ICP 备号京公网安备 </div> 3  (4) 定义样式 13

14 在样式表文件 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

5-1 nav css 5-2

5 HTML CSS HTML CSS Ê Ê Ê Ê 5-1 nav css 5-2 5-1 5 5-1-1 5-01 css images 01 index.html 02 5-3 style.css css 03 CH5/5-01/images 04 images index.html style.css 05

第三章 补充案例

第三章补充案例