运用HTML、CSS设计Web网页——“西式甜品网”图例及代码

目录

一、效果展示图 

二、设计分析

1.整体效果分析 

2.头部header模块效果分析

3.导航及banner模块效果分析

4.分类classify模块效果分析 

5.产品展示show模块效果分析

6.版权banquan模块效果分析

三、HTML、CSS代码分模块展示

1. 头部header模块代码

2.导航及banner模块代码

3.分类classify模块

4.产品展示show模块代码

5.版权banquan模块代码

四、完整代码

1.HTML代码：

2.CSS代码：

---

一、效果展示图 

二、设计分析

1.整体效果分析 

（1）HTML结构分析

        “西式甜品网”首页面从上到下可以分为5个模块

（2）CSS样式分析

        页面中的各个模块居中显示，页面的版心为980px。另外，页面中的所有字体均为微软雅黑，字体大小为16px，这些可以通过CSS公共样式进行定义。

2.头部header模块效果分析

（1）HTML结构分析

        “头部”模块整体由一个大盒子<div>进行控制。内部嵌套<img>和<div>分别用来搭建左侧logo和右侧文字内容部分。

（2）CSS样式分析

        “头部”模块的宽为980px，通过设置外边距属性使其在页面中居中显示，并设置相对定位。左侧logo和右侧文字内容部分相对外层大盒子设置绝对定位，最后还需设置文字的相关样式等。

3.导航及banner模块效果分析

（1）HTML结构分析

        “导航”及“banner”模块分别由一个大盒子<div>进行控制。导航内容部分由<span>标签定义，banner图由<img>标签定义。 

（2）css样式分析

        “导航”模块的背景色通栏显示，因此需设置最外层<div>的宽度100%，内部嵌套的<div>宽度为980px，且在页面中居中显示。定义<span>标签左浮动，并定义相关的文字样式。最后还需设置“banner”模块的图片在页面中居中显示。

4.分类classify模块效果分析 

（1）HTML结构分析

        “产品分类”模块主要由<div>标签定义。

（2）css样式分析

        “产品分类”模块的背景色通栏显示，因此需设置最外层<div>的宽度100%，内部嵌套的<div>宽度为980px，且在页面中居中显示。定义每一个分类模块的<div>标签左浮动，并定义相关的文字样式。

5.产品展示show模块效果分析

（1）HTML结构分析

        “产品展示”模块主要由<div>标签嵌套<img>标签和<span>标签定义。

（2）样式分析

        “产品展示”模块的背景色通栏显示，因此需设置最外层<div>的宽度100%，内部嵌套的<div>宽度为980px，且在页面中居中显示。定义每一个展示模块的<div>标签左浮动，并定义相关的文字样式。

6.版权banquan模块效果分析

（1）HTML结构分析

        “版权信息”模块由<div>标签定义。

（2）样式分析

        “版权信息”模块的背景图通栏显示，因此需设置最外层<div>的宽度100%，且文字内容居中显示。

三、HTML、CSS代码分模块展示

1. 头部header模块代码

HTML代码：

<!--	header begin!-->
	<div id="header">
		<div class="logo">
			<img src="images/logo.jpg" alt="">	
		</div>			
		<div class="one">
			<span>登录&nbsp;&nbsp;|&nbsp;&nbsp;注册</span>
		</div>
	</div>
<!--	herder end-->

CSS代码：

#header{
	width: 980px;
	height: 80px;
	margin: 0 center;
/*	position: absolute; 设置绝对定位*/
	background-color:white;
}

.logo{
	float: left;
	position: relative; /*设置相对定位*/
	padding-left: 20px; /*设置内边距*/
	padding-top: 15px;
}
.one{
	float: right;
	text-align: right;
	padding-right: 30px;
	padding-top: 35px;
	position: relative;
	color: orange;
}

2.导航及banner模块代码

HTML代码： 

<!--	banner begin-->
	<div id="banner">
		<div class="two">
			<span>首页</span>
			<span>公司简介</span>
			<span>美食甜品</span>
			<span>用户留言</span>
			<span>联系我们</span>
		</div>
		<div class="imgg">
			<img src="images/banner.jpg">
		</div>
	</div>
<!--	banner end-->

CSS代码：

#banner{
	margin: 0 auto 0;
	width: 100%;
	height: 390px;
}
.two{
	width: 980px;
	margin: 0 auto;
	background-color: orange;
	color:brown;
	float: left;
	text-align: center;
	padding-top: 12px;
	height: 30px;
	list-style-type: none;
}
.two span{
	padding: 0 60px;
}
.imgg img{
	width: 100%;
	height: 360px;
}

3.分类classify模块

HTML代码：

<!--	classify begin-->
	<div id="classify">
			<div class="con">
				<img src="images/list1.png">
				<p>提拉米苏</p>
			</div>
			<div class="con">
				<img src="images/list2.png">
				<p>甜甜圈</p>
			</div>
			<div class="con">
				<img src="images/list3.png">
				<p>芝士蛋糕</p>
			</div>
			<div class="con">
				<img src="images/list4.png">
				<p>马卡龙</p>
			</div>
			<div class="con">
				<img src="images/list5.png">
				<p>西式甜点</p>
			</div>
	</div>
<!--	classify end-->

CSS代码：

#classify{
	padding: 20px 0;
	width:980px;
	height: 140px;
	background:wheat;
}
.con{
	width:173px;
	height: 196px;
	float: left;
	margin-left: 23px;
	display: inline-block;
	overflow: hidden;
	white-space: nowrap;
	position: relative;
}
.con img{
	border-radius: 50%;
	left: 20px;
	top:0;
/*
	width: 980px;
	height: 100px;
*/
}
.con p{
/*	position: absolute;*/
	width: 250px;
	height: 50px;
	z-index: 2;
	left: 2px;
	top:90px;
	color: #e7bf80;
	margin: 5px 45px;
	position: absolute;
}

4.产品展示show模块代码

HTML代码：

<!--	show begin-->
	<div id="show">
			<div class="three">
				<img src="images/con1.jpg">
				<span>爱的N次方</span>
				<span class="name">马卡龙</span>
				<span class="huan">价格：<span class="huan" style="color:hotpink">30元</span></span>
			</div>
			<div class="three">
				<img src="images/con2.jpg">
				<span>果肉果冻</span>
				<span class="name">双色马卡龙</span>
				<span class="huan">价格：<span class="huan" style="color:hotpink">30元</span></span>
			</div>
			<div class="three">
				<img src="images/con3.jpg">
				<span>芒果味</span>
				<span class="name">布丁马卡龙</span>
				<span class="huan">价格：<span class="huan" style="color:hotpink">30元</span></span>
			</div>
			<div class="three">
				<img src="images/con4.jpg">
				<span>果冻荔枝味</span>
				<span class="name">多彩马卡龙</span>
				<span class="huan">价格：<span class="huan" style="color:hotpink">30元</span></span>
			</div>
			<div class="three">
				<img src="images/con5.jpg">
				<span>果味巧克力</span>
				<span class="name">西式甜点</span>
				<span class="huan">价格：<span class="huan" style="color:hotpink">30元</span></span>
			</div>
			<div class="three">
				<img src="images/con6.jpg">
				<span>奶油水果</span>
				<span class="name">提拉米苏</span>
				<span class="huan">价格：<span class="huan" style="color:hotpink">30元</span></span>
			</div>
			<div class="three">
				<img src="images/con7.jpg">
				<span>玫瑰花型</span>
				<span class="name">布丁</span>
				<span class="huan">价格：<span class="huan" style="color:hotpink">30元</span></span>
			</div>
			<div class="three">
				<img src="images/con8.jpg">
				<span>燕麦奶油</span>
				<span class="name">芝士蛋糕</span>
				<span class="huan">价格：<span class="huan" style="color:hotpink">30元</span></span>
			</div>
	</div>
<!--	show end-->

CSS代码：

#show{
	width: 100%;
	height: 580px;
	background-color:lightgoldenrodyellow;
}
.three{
	padding: 17px;
	float: left;
}
.three img{
	width: 200px;
}
.three span{
	display: block;
	color: #865859;
}
.three .name{
	color: hotpink;
}
.three .huan{
	display: inline;
}

5.版权banquan模块代码

HTML代码：

<!--	banquan begin-->
	<div id="banquan">
		<p>西式甜品网版权所有2020-2030京ICP备08001421号 京公网安备110108007702</p>
	</div>
<!--	banquan end-->

CSS代码：

#banquan{
	width: 100%;
	text-align: center;
	height: 100px;
	background:url("images/footer.png")repeat-x;
}
#banquan p{
	padding-top: 50px;
	color: white;
}

四、完整代码

1.HTML代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="实验1.css" type="text/css" rel="stylesheet"/>
<title>西式甜品网</title>
</head>

<body>
<!--	header begin!-->
	<div id="header">
		<div class="logo">
			<img src="images/logo.jpg" alt="">	
		</div>			
		<div class="one">
			<span>登录&nbsp;&nbsp;|&nbsp;&nbsp;注册</span>
		</div>
	</div>
<!--	herder end-->
	
<!--	banner begin-->
	<div id="banner">
		<div class="two">
			<span>首页</span>
			<span>公司简介</span>
			<span>美食甜品</span>
			<span>用户留言</span>
			<span>联系我们</span>
		</div>
		<div class="imgg">
			<img src="images/banner.jpg">
		</div>
	</div>
<!--	banner end-->
	
<!--	classify begin-->
	<div id="classify">
			<div class="con">
				<img src="images/list1.png">
				<p>提拉米苏</p>
			</div>
			<div class="con">
				<img src="images/list2.png">
				<p>甜甜圈</p>
			</div>
			<div class="con">
				<img src="images/list3.png">
				<p>芝士蛋糕</p>
			</div>
			<div class="con">
				<img src="images/list4.png">
				<p>马卡龙</p>
			</div>
			<div class="con">
				<img src="images/list5.png">
				<p>西式甜点</p>
			</div>
	</div>
<!--	classify end-->
	
<!--	show begin-->
	<div id="show">
			<div class="three">
				<img src="images/con1.jpg">
				<span>爱的N次方</span>
				<span class="name">马卡龙</span>
				<span class="huan">价格：<span class="huan" style="color:hotpink">30元</span></span>
			</div>
			<div class="three">
				<img src="images/con2.jpg">
				<span>果肉果冻</span>
				<span class="name">双色马卡龙</span>
				<span class="huan">价格：<span class="huan" style="color:hotpink">30元</span></span>
			</div>
			<div class="three">
				<img src="images/con3.jpg">
				<span>芒果味</span>
				<span class="name">布丁马卡龙</span>
				<span class="huan">价格：<span class="huan" style="color:hotpink">30元</span></span>
			</div>
			<div class="three">
				<img src="images/con4.jpg">
				<span>果冻荔枝味</span>
				<span class="name">多彩马卡龙</span>
				<span class="huan">价格：<span class="huan" style="color:hotpink">30元</span></span>
			</div>
			<div class="three">
				<img src="images/con5.jpg">
				<span>果味巧克力</span>
				<span class="name">西式甜点</span>
				<span class="huan">价格：<span class="huan" style="color:hotpink">30元</span></span>
			</div>
			<div class="three">
				<img src="images/con6.jpg">
				<span>奶油水果</span>
				<span class="name">提拉米苏</span>
				<span class="huan">价格：<span class="huan" style="color:hotpink">30元</span></span>
			</div>
			<div class="three">
				<img src="images/con7.jpg">
				<span>玫瑰花型</span>
				<span class="name">布丁</span>
				<span class="huan">价格：<span class="huan" style="color:hotpink">30元</span></span>
			</div>
			<div class="three">
				<img src="images/con8.jpg">
				<span>燕麦奶油</span>
				<span class="name">芝士蛋糕</span>
				<span class="huan">价格：<span class="huan" style="color:hotpink">30元</span></span>
			</div>
	</div>
<!--	show end-->
	
<!--	banquan begin-->
	<div id="banquan">
		<p>西式甜品网版权所有2020-2030京ICP备08001421号 京公网安备110108007702</p>
	</div>
<!--	banquan end-->
</body>
</html>

2.CSS代码：

@charset "utf-8";
/* CSS Document */
*{margin: 0 auto 0;padding: 0;}
body{font-family: "微软雅黑";font-size: 16px;width: 980px;} /*页面各个模块居中显示*/

#header{
	width: 980px;
	height: 80px;
	margin: 0 center;
/*	position: absolute; 设置绝对定位*/
	background-color:white;
}

.logo{
	float: left;
	position: relative; /*设置相对定位*/
	padding-left: 20px; /*设置内边距*/
	padding-top: 15px;
}
.one{
	float: right;
	text-align: right;
	padding-right: 30px;
	padding-top: 35px;
	position: relative;
	color: orange;
}

#banner{
	margin: 0 auto 0;
	width: 100%;
	height: 390px;
}
.two{
	width: 980px;
	margin: 0 auto;
	background-color: orange;
	color:brown;
	float: left;
	text-align: center;
	padding-top: 12px;
	height: 30px;
	list-style-type: none;
}
.two span{
	padding: 0 60px;
}
.imgg img{
	width: 100%;
	height: 360px;
}

#classify{
	padding: 20px 0;
	width:980px;
	height: 140px;
	background:wheat;
}
.con{
	width:173px;
	height: 196px;
	float: left;
	margin-left: 23px;
	display: inline-block;
	overflow: hidden;
	white-space: nowrap;
	position: relative;
}
.con img{
	border-radius: 50%;
	left: 20px;
	top:0;
/*
	width: 980px;
	height: 100px;
*/
}
.con p{
/*	position: absolute;*/
	width: 250px;
	height: 50px;
	z-index: 2;
	left: 2px;
	top:90px;
	color: #e7bf80;
	margin: 5px 45px;
	position: absolute;
}

#show{
	width: 100%;
	height: 580px;
	background-color:lightgoldenrodyellow;
}
.three{
	padding: 17px;
	float: left;
}
.three img{
	width: 200px;
}
.three span{
	display: block;
	color: #865859;
}
.three .name{
	color: hotpink;
}
.three .huan{
	display: inline;
}

#banquan{
	width: 100%;
	text-align: center;
	height: 100px;
	background:url("images/footer.png")repeat-x;
}
#banquan p{
	padding-top: 50px;
	color: white;
}