html西式甜品网制作文档格式.docx
- 文档编号:4311598
- 上传时间:2023-05-03
- 格式:DOCX
- 页数:27
- 大小:688.91KB
html西式甜品网制作文档格式.docx
《html西式甜品网制作文档格式.docx》由会员分享,可在线阅读,更多相关《html西式甜品网制作文档格式.docx(27页珍藏版)》请在冰点文库上搜索。
xml:
lang="
en"
4<
head>
5<
metahttp-equiv="
Content-Type"
content="
text/html;
charset=UTF-8"
6<
title>
西式甜品网<
/title>
7<
/head>
8<
body>
9<
--headbegin-->
10<
divclass="
head"
<
/div>
11<
--headend-->
12<
--navbegin-->
13<
nav"
14<
--navend-->
15<
--bannerbegin-->
16<
banner"
17<
--bannerend-->
18<
--listbegin-->
19<
list"
20<
--listend-->
21<
--contentbegin-->
22<
content"
23<
--contentend-->
24<
--footerbegin-->
三、案例制作
1、制作头部模块
“头部”模块整体由一个大盒子<
div>
进行控制。
内部嵌套<
img>
和<
分别用来搭建左侧logo和右侧文字内容部分。
“头部”模块的具体结构如图4-3所示。
span>
<
图4-3“头部”模块结构图
(2)样式分析
“头部”模块的宽为980px,通过设置外边距属性使其在页面中居中显示,并设置相对定位。
左侧logo
和右侧文字内容部分相对外层大盒子设置绝对定位,最后还需设置文字的相关样式等。
(3)搭建结构
在index04.html文件内书写“头部”模块的HTML结构代码。
具体如下:
2<
imgclass="
logo"
src="
images/logo.jpg"
/>
login"
登录<
/span>
|<
注册<
(4)定义样式
在样式表文件style04.css中书写CSS样式代码,用于控制“头部”模块。
1.head{
2width:
980px;
3height:
80px;
4margin:
0auto;
5position:
relative;
6
}
7
.logo{
8
position:
absolute;
9
left:
100px;
10
top:
15px;
11
12
.login{
13
14
right:
15
34px;
16
color:
#ff9c00;
17
cursor:
pointer;
18
font-size:
18px;
19}
上述代码中,第4行代码用于设置“头部”模块在页面中居中显示。
保存index04.html与style04.css文件,刷新页面,效果如图4-4所示。
图4-4“头部”模块效果图
2、制作导航及banner模块
“导航”及b“anner”模块分别由一个大盒子<
导航内容部分由<
标记定义,banner
图由<
标记定义。
“导航”及“banner”模块的具体结构如图4-5所示。
图4-5“导航”及b“anner”模块结构图
“导航”模块的背景色通栏显示,因此需设置最外层<
的宽度100%,内部嵌套的<
宽度为980px,且在页面中居中显示。
定义<
标记左浮动,并定义相关的文字样式。
最后还需设置“banner”模块的图片在页面中居中显示。
在index04.html文件内书写“导航”及“banner”模块的HTML结构代码。
nav_in"
首页<
公司简介<
美食甜品<
用户留言<
spanclass="
last"
>
联系我们<
11<
imgsrc="
images/banner.jpg"
14<
在样式表文件style04.css中书写CSS样式代码,用于控制“导航”及“banner”模块。
1.nav{
2width:
100%;
50px;
4background:
#ff9c00;
5}
6.nav_in{
7width:
820px;
8margin:
9line-height:
50px;
10color:
#fff;
11padding-left:
160px;
12}
13.nav_inspan{
float:
left;
padding:
038px;
#9c5132;
图4-6“导航”及b“anner”模块效果图
3、制作产品分类模块
“产品分类”模块主要由<
“产品分类”模块的具体结构如图4-7所示。
图4-7“产品分类”模块结构图
“产品分类”模块的背景色通栏显示,因此需设置最外层<
宽度为
980px,且在页面中居中显示。
定义每一个分类模块的<
在index04.html文件内书写“产品分类”模块的HTML结构代码。
list_in"
list1"
提拉米苏<
list2"
甜甜圈<
list3"
芝士蛋糕<
list4"
马卡龙<
list5"
西式甜点<
在样式表文件style04.css中书写CSS样式代码,用于控制“产品分类”模块。
1.list{
240px;
#e7bf80;
6.list.list_in{
940px;
8height:
195px;
9margin:
10padding:
45px0040px;
11}
12.list.list_indiv{
13float:
14width:
146px;
15height:
55px;
16padding-top:
95px;
17margin-right:
42px;
18background:
url(../images/list1.png)no-repeat;
19text-align:
center;
20color:
图4-8“产品分类”模块效果图
4、制作产品展示模块
“产品展示”模块主要由<
标记嵌套<
标记和<
“产品展示”模块的具体结构如图
4-9所示。
图4-9“产品展示”模块结构图
“产品展示”模块的背景色通栏显示,因此需设置最外层<
定义每一个展示模块的<
在index04.html文件内书写“产品展示”模块的HTML结构代码。
con"
con_type"
images/con1.jpg"
爱的N次方<
con_name"
价格:
b>
30元<
/b>
images/con2.jpg"
果肉果冻<
双色马卡龙<
images/con3.jpg"
芒果味<
布丁马卡龙<
images/con4.jpg"
果冻荔枝味<
25<
多彩马卡龙<
26<
27<
28<
29<
images/con5.jpg"
30<
果味巧克力<
31<
32<
33<
34<
35<
images/con6.jpg"
36<
奶油水果<
37<
38<
39<
40<
41<
images/con7.jpg"
42<
玫瑰花型<
43<
布丁<
44<
45<
46<
47<
images/con8.jpg"
48<
燕麦奶油<
49<
50<
51<
52<
53<
54<
在样式表文件style04.css中书写CSS样式代码,用于控制“产品展示”模块。
1.content{
570px;
#f8f5bc;
6.con{
912px;
530px;
40px0068px;
12.con.con_type{
13width:
180px;
14height:
220px;
15border:
1pxsolid#ccc;
16float:
17background:
#fff;
18margin:
039px30px0;
19font-size:
14px;
21}
22.con.con_typespan{
23display:
block;
24padding:
2px0016px;
25}
26.con.con_typespan.con_name{color:
#fd8187;
27.con.con_typespanb{
28font-weight:
normal;
29color:
30}
31.con.con_typeimg{
32margin:
12px12px3px12px;
33width:
158px;
34height:
122px;
35}
上述代码中,第23行代码将<
标记转换为块元素用于换行显示文字内容。
保存index04.html与style04.css文件,刷新页面,效果如图4-10所示。
图4-10“产品展示”模块效果图
5、制作版权信息模块
“版权信息”模块由<
具体结构如图4-11所示。
图4-11“版权信息”模块结构图
“版权信息”模块的背景图通栏显示,因此需设置最外层<
的宽度100%,且文字内容居中显示。
在index04.html文件内书写“版权信息”模块的HTML结构代码。
footer"
西式甜品网版权所有2000-2016京ICP备08001421号&
nbsp;
&
京公网安备
110108007702<
--footerend-->
在样式表文件style04.css中书写CSS样式代码,用于控制“版权信息”模块。
1.footer{
2position:
3top:
-8px;
4width:
5height:
120px;
6background:
url(../images/footer.png)repeat-x;
7text-align:
8line-height:
120px;
9color:
10font-size:
上述代码中,第6行代码用于设置背景图沿X轴平铺。
保存index04.html与style04.css文件,刷新页面,效果如图4-12所示。
图4-12“版权信息”模块效果图
WelcomeToDownload
欢迎您的下载,资料仅供参考!
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- html 西式 甜品 制作