html西式甜品网制作
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
图4-5“导航”及“banner”模块结构图
（2）样式分析
“导航”模块的背景色通栏显示，因此需设置最外层<div>的宽度100%，部嵌套的<div>宽度为980px，且在页面中居中显示。定义<span>标记左浮动，并定义相关的文字样式。最后还需设置“banner”模块的图片在页面中居中显示。
（3）搭建结构
10top:15px;
11}
12.login{
13position: absolute;
14right:100px;
15top:34px;
16color:#ff9c00;
17cursor: pointer;
18font-size: 18px;
19}
上述代码中，第4行代码用于设置“头部”模块在页面中居中显示。
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-->
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>
保存index04.html与style04.css文件，刷新页面，效果如图4-4所示。
图4-4“头部”模块效果图
2、制作导航及banner模块
（1）HTML结构分析
“导航”及“banner”模块分别由一个大盒子<div>进行控制。导航容部分由<span>标记定义，banner图由<img>标记定义。“导航”及“banner”模块的具体结构如图4-5所示。
2、页面布局
新建index04.html文件，在index04.html文件书写HTML结构代码，具体代码如下。
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2"/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4、案例展示效果如图4-源自所示。图4-1“西式甜品网”效果展示
二、布局及定义基础样式
1、效果分析
（1）HTML结构分析
“西式甜品网”首页面从上到下可以分为5个模块，如图4-2所示。
图4-2“西式甜品网”结构分析
（2）CSS样式分析
页面中的各个模块居中显示，页面的版心为980px。另外，页面中的所有字体均为微软雅黑，字体大小为16px，这些可以通过CSS公共样式进行定义。
在index04.html文件书写“导航”及“banner”模块的HTML结构代码。具体如下：
1<!--nav begin-->
/*重置浏览器的默认样式*/
*{margin:0; padding:0;border:0; background:none;}
/*全局控制*/
body{font-family:"微软雅黑";font-size:16px;}
三、案例制作
1、制作头部模块
（1）HTML结构分析
“头部”模块整体由一个大盒子<div>进行控制。部嵌套<img>和<div>分别用来搭建左侧logo和右侧文字容部分。“头部”模块的具体结构如图4-3所示。
（4）定义样式
在样式表文件style04.css中书写CSS样式代码，用于控制“头部”模块。具体如下：
1.head{
2width:980px;
3height:80px;
4margin:0 auto;
5position: relative;
6}
7.logo{
8position: absolute;
9left:100px;
3<html xmlns="/1999/xhtml" xml:lang="en">
4<head>
5<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
6<title>西式甜品网</title>
7</head>
24<!--footer begin-->
25<div class="footer"></div>
26<!--footer end-->
27</body>
28</html>
在上述代码中，通过给div添加不同的类名来定义页面中的各个模块。
3、定义公共样式
为了清除各浏览器的默认样式，使得网页在各浏览器中显示的效果一致，在完成页面布局后，首先要做的就是对CSS样式进行初始化并声明一些通用的样式。在index04.html文件所在的文件夹新建css文件夹用于存放样式表文件style04.css，使用链入式引入样式表文件。然后定义页面的基础样式，具体如下：
“西式甜品网”首页面制作
一、案例描述
1、考核知识点
盒子模型
元素的浮动与定位
2、练习目标
掌握盒子的相关属性。
掌握元素的浮动与定位。
3、需求分析
盒子模型这样的布局方式代替了传统的表格布局，同时结合元素的浮动与定位，可使网页的结构更加多样化，通过学习本案例可以使初学者进一步的巩固盒子模型和元素的浮动与定位等相关知识点。
图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> | <span>注册</span></div>
5</div>
6<!--head end-->
（2）样式分析
“导航”模块的背景色通栏显示，因此需设置最外层<div>的宽度100%，部嵌套的<div>宽度为980px，且在页面中居中显示。定义<span>标记左浮动，并定义相关的文字样式。最后还需设置“banner”模块的图片在页面中居中显示。
（3）搭建结构
10top:15px;
11}
12.login{
13position: absolute;
14right:100px;
15top:34px;
16color:#ff9c00;
17cursor: pointer;
18font-size: 18px;
19}
上述代码中，第4行代码用于设置“头部”模块在页面中居中显示。
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-->
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>
保存index04.html与style04.css文件，刷新页面，效果如图4-4所示。
图4-4“头部”模块效果图
2、制作导航及banner模块
（1）HTML结构分析
“导航”及“banner”模块分别由一个大盒子<div>进行控制。导航容部分由<span>标记定义，banner图由<img>标记定义。“导航”及“banner”模块的具体结构如图4-5所示。
2、页面布局
新建index04.html文件，在index04.html文件书写HTML结构代码，具体代码如下。
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2"/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4、案例展示效果如图4-源自所示。图4-1“西式甜品网”效果展示
二、布局及定义基础样式
1、效果分析
（1）HTML结构分析
“西式甜品网”首页面从上到下可以分为5个模块，如图4-2所示。
图4-2“西式甜品网”结构分析
（2）CSS样式分析
页面中的各个模块居中显示，页面的版心为980px。另外，页面中的所有字体均为微软雅黑，字体大小为16px，这些可以通过CSS公共样式进行定义。
在index04.html文件书写“导航”及“banner”模块的HTML结构代码。具体如下：
1<!--nav begin-->
/*重置浏览器的默认样式*/
*{margin:0; padding:0;border:0; background:none;}
/*全局控制*/
body{font-family:"微软雅黑";font-size:16px;}
三、案例制作
1、制作头部模块
（1）HTML结构分析
“头部”模块整体由一个大盒子<div>进行控制。部嵌套<img>和<div>分别用来搭建左侧logo和右侧文字容部分。“头部”模块的具体结构如图4-3所示。
（4）定义样式
在样式表文件style04.css中书写CSS样式代码，用于控制“头部”模块。具体如下：
1.head{
2width:980px;
3height:80px;
4margin:0 auto;
5position: relative;
6}
7.logo{
8position: absolute;
9left:100px;
3<html xmlns="/1999/xhtml" xml:lang="en">
4<head>
5<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
6<title>西式甜品网</title>
7</head>
24<!--footer begin-->
25<div class="footer"></div>
26<!--footer end-->
27</body>
28</html>
在上述代码中，通过给div添加不同的类名来定义页面中的各个模块。
3、定义公共样式
为了清除各浏览器的默认样式，使得网页在各浏览器中显示的效果一致，在完成页面布局后，首先要做的就是对CSS样式进行初始化并声明一些通用的样式。在index04.html文件所在的文件夹新建css文件夹用于存放样式表文件style04.css，使用链入式引入样式表文件。然后定义页面的基础样式，具体如下：
“西式甜品网”首页面制作
一、案例描述
1、考核知识点
盒子模型
元素的浮动与定位
2、练习目标
掌握盒子的相关属性。
掌握元素的浮动与定位。
3、需求分析
盒子模型这样的布局方式代替了传统的表格布局，同时结合元素的浮动与定位，可使网页的结构更加多样化，通过学习本案例可以使初学者进一步的巩固盒子模型和元素的浮动与定位等相关知识点。
图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> | <span>注册</span></div>
5</div>
6<!--head end-->