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

news2024/11/20 1:23:54

目录

一、效果展示图 

二、设计分析

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;
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1691930.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

一条命令安装Metasploit Framework

一条命令安装Metasploit Framework

做安全渗透的人都或多或少的使用kali-Linux系统中msfconsole命令启动工具&#xff0c;然而也经常会有人遇到这样那样的问题无法启动 今天我们就用一条命令来重新安装这个工具 curl https://raw.githubusercontent.com/rapid7/metasploit-omnibus/master/config/templates/met…
阅读更多...
Proteus仿真小技巧(隔空连线)

Proteus仿真小技巧(隔空连线)

用了好几天Proteus了.总结一下使用的小技巧. 目录 一.隔空连线 1.打开添加网络标号 2.输入网络标号 二.常用元件 三.运行仿真 四.总结 一.隔空连线 引出一条线,并在末尾点一下. 1.打开添加网络标号 选择添加网络标号, 也可以先点击按钮,再去选择线(注意不要点端口) 2.…
阅读更多...
PTT票据传递攻击

PTT票据传递攻击

一. PTT票据传递攻击原理 1.PTT介绍 PTT(Pass The Ticket)&#xff0c;中文叫票据传递攻击&#xff0c;PTT 攻击只能用于kerberos认证中,NTLM认证中没有&#xff0c; PTT是通过票据进行认证的。 进行票据传递&#xff0c;不需要提权&#xff0c;域用户或者system用户就可以 …
阅读更多...
2024上海初中生古诗文大会倒计时4个月：单选题真题解析（持续）

2024上海初中生古诗文大会倒计时4个月：单选题真题解析（持续）

现在距离2024年初中生古诗文大会还有4个多月时间&#xff0c;我们继续来看10道选择题真题和详细解析&#xff0c;以下题目截取自我独家制作的在线真题集&#xff0c;都是来自于历届真题&#xff0c;去重、合并后&#xff0c;每道题都有参考答案和解析。 为帮助孩子自测和练习&…
阅读更多...
【JS】并发控制

【JS】并发控制

需求 控制网络请求并发数控制并发按顺序返回结果 码 /** * 控制并发 * param {Function} fn 逻辑处理函数 * param {Array} arr 发送的数据 * param {Number} [max3] 并发数 默认3 * param {Number} [orderfalse] 按顺序返回执行结果 默认false * param {Number} [retry1] 重试…
阅读更多...
javaAPI文档中文版（JDK11在线版）java帮助文档，掌握文档java学习事半功倍。

javaAPI文档中文版（JDK11在线版）java帮助文档，掌握文档java学习事半功倍。

&#x1f320;个人主页 : 赶路人- - &#x1f30c;个人格言 : 要努力成为梧桐&#xff0c;让喜鹊在这里栖息。 要努力成为大海&#xff0c;让百川在这里聚积。 11.by,prep.凭&#xff0c;靠&#xff0c;沿 [baɪ] 12.press,v.按&#xff0c;压 [prɛs] 菜鸟教程javaAPI文档中文…
阅读更多...
探索数字孪生：大数据时代下的UI设计趋势

探索数字孪生：大数据时代下的UI设计趋势

阅读更多...
python水果分类字典构建指南

python水果分类字典构建指南

新书上架~&#x1f447;全国包邮奥~ python实用小工具开发教程http://pythontoolsteach.com/3 欢迎关注我&#x1f446;&#xff0c;收藏下次不迷路┗|&#xff40;O′|┛ 嗷~~ 目录 一、引言 二、理解需求 三、构建字典 1. 数据结构选择 2. 代码实现 3. 结果展示 四、总…
阅读更多...
深入编程逻辑：从分支到循环的奥秘

深入编程逻辑：从分支到循环的奥秘

新书上架~&#x1f447;全国包邮奥~ python实用小工具开发教程http://pythontoolsteach.com/3 欢迎关注我&#x1f446;&#xff0c;收藏下次不迷路┗|&#xff40;O′|┛ 嗷~~ 目录 一、编程逻辑的基石&#xff1a;分支与循环 分支逻辑详解 代码案例&#xff1a;判断整数是…
阅读更多...
速卖通测评揭秘：如何选择安全的渠道操作

速卖通测评揭秘：如何选择安全的渠道操作

许多商家对测评存在误解&#xff0c;认为只需进行几次测评就能迅速打造爆款。实际上&#xff0c;测评是一个需要计划和持久性的过程&#xff0c;以便让平台检测到产品的受众程度并提高产品的曝光和权重。 在进行测评时&#xff0c;安全是首要考虑的问题。平台可以通过设备、网…
阅读更多...
【数据结构】数据结构中的隐藏玩法——栈与队列

【数据结构】数据结构中的隐藏玩法——栈与队列

前言&#xff1a; 哈喽大家好&#xff0c;我是野生的编程萌新&#xff0c;首先感谢大家的观看。数据结构的学习者大多有这样的想法&#xff1a;数据结构很重要&#xff0c;一定要学好&#xff0c;但数据结构比较抽象&#xff0c;有些算法理解起来很困难&#xff0c;学的很累。我…
阅读更多...
二叉树——进阶（递归创建，非递归，广度优先，翻转，深度，对称）

二叉树——进阶（递归创建，非递归，广度优先，翻转，深度，对称）

二叉树——进阶 二叉树的递归创建非递归前中后序遍历非递归前序遍历非递归中序遍历非递归后序遍历 广度优先遍历二叉树&#xff08;层序遍历&#xff09;翻转二叉树 二叉树深度最大深度最小深度 对称二叉树 二叉树的递归创建 1&#xff0c;二叉树是一种结构相对固定的数据&…
阅读更多...
SpringBoot接入Knife4j接口文档

SpringBoot接入Knife4j接口文档

0.介绍 1&#xff09; Knife4j是什么 Knife4j是Java MVC框架集成Swagger生成Api文档的增强解决方案&#xff0c;前身是swagger-bootstrap-ui&#xff0c;有着比Swagger更为美观的UI以及功能。 例如以下效果图&#xff1a; 2&#xff09; 官方链接 官网&#xff1a;Knife4j …
阅读更多...
Mujava 工具的简单使用

Mujava 工具的简单使用

首先下载openjava.jar和mujava.jar&#xff0c;以及自己手写一个mujava.config指向存放mujava的目录&#xff0c;并将这些文件放在mujava目录下。此时&#xff0c;基本的mujava环境就搭建好了。 分别创建src&#xff08;存放源码文件&#xff09;、classes&#xff08;存放源码…
阅读更多...
使用pygame绘制图形

使用pygame绘制图形

参考链接&#xff1a;https://www.geeksforgeeks.org/pygame-tutorial/?reflbp 在窗口中绘制单个图形 import pygame from pygame.locals import * import sys pygame.init()window pygame.display.set_mode((600,600)) window.fill((255,255,255))# pygame.draw.rect(wind…
阅读更多...
针对上一篇微信同声传译语音播报部分坑的解决和优化

针对上一篇微信同声传译语音播报部分坑的解决和优化

1. 上一篇语音播报其实是不完美的&#xff0c;就是如何停止上一个音频开始下一个音频的问题&#xff0c;我在此做一下修改 比如说&#xff1a;现在正在播放1&#xff0c;我点击2让2开始播放&#xff0c;1停止播放&#xff0c;我上面的写法是有问题的&#xff1a; 通过 innerAu…
阅读更多...
编译器 编译过程 compiling 动态链接库 Linking 接口ABI LTO PGO inline bazel增量编译

编译器 编译过程 compiling 动态链接库 Linking 接口ABI LTO PGO inline bazel增量编译

编译器 编译过程 compiling 动态链接库 Linking 接口ABI LTO PGO Theory Shared Library Symbol Conflicts (on Linux) 从左往右查找：Note that the linker only looks further down the line when looking for symbols used by but not defined in the current lib.Linux 下…
阅读更多...
【全部更新完毕】2024电工杯B题详细思路代码成品文章教学：大学生平衡膳食食谱的优化设计及评价

【全部更新完毕】2024电工杯B题详细思路代码成品文章教学：大学生平衡膳食食谱的优化设计及评价

大学生平衡膳食食谱的优化设计及评价 摘要 大学阶段是学生获取知识和身体发育的关键时期&#xff0c;也是形成良好饮食习惯的重要阶段。然而&#xff0c;当前大学生中存在饮食结构不合理和不良饮食习惯的问题&#xff0c;主要表现为不吃早餐或早餐吃得马虎&#xff0c;经常食用…
阅读更多...
JVM学习-垃圾收集器(三)

JVM学习-垃圾收集器(三)

G1回收器-区域化分代式 为了适应不断扩大的内存和不断增加的处理器数量&#xff0c;进一步降低暂停时间&#xff0c;同时兼顾良好的吞吐量官方给G1设定的目标&#xff1a;延迟可控的情况下获得尽可能高的吞吐量&#xff0c;所以才担当起“全功能收集器”的重任与期望G1是一款面…
阅读更多...
构建数字未来：探索Web3在物联网中的新视角

构建数字未来：探索Web3在物联网中的新视角

引言 随着Web3时代的来临&#xff0c;物联网技术正迎来一场新的变革。在这个数字化时代&#xff0c;Web3所带来的技术创新将为物联网的发展开辟新的视角。本文将深入探讨Web3在物联网领域的应用&#xff0c;揭示其在构建数字未来中的重要性和影响。 Web3与物联网的融合 区块链…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023