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

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

QQ个性网空间日志网站模板源码

QQ个性网空间日志网站模板源码

QQ个性网空间日志网站模板源码自带后台登录设置&#xff0c;适用于博客、文章、资讯、其他类网站内容使用。模板自带eyoucms内核&#xff0c;原创设计、手工书写DIVCSS&#xff0c;完美兼容IE7、Firefox、Chrome、360浏览器等;主流浏览器;结构容易优化;多终端均可正常预览。由于…
阅读更多...
保安维稳，四信以科技构筑高速公路安全智慧防线

保安维稳，四信以科技构筑高速公路安全智慧防线

近日&#xff0c;广东梅大高速发生严重塌方事故&#xff0c;造成了严重的人员伤亡和财产损失。这一事件在公众心中敲响了安全的警钟&#xff0c;再次引起了公众对于交通设施运营安全性的重点关注。 国务院安委会办公室和国家防灾减灾救灾委员会办公室等主管机构先后印发紧急通知…
阅读更多...
FuTalk设计周刊-Vol.053

FuTalk设计周刊-Vol.053

#AI漫谈 热点捕手 1.Midjourney推出新功能Room 用户可在聊天室中一起创作图像 Midjourney最近推出了一个有趣的新功能——Room&#xff0c;为用户提供了一个协作和社交平台&#xff0c;用户可以一起创建和分享图像&#xff0c;并参与实时聊天。Room促进了用户之间的互动和合作…
阅读更多...
Mujava 工具的简单使用

Mujava 工具的简单使用

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

excel poi的titleRows 和 headRows含义

titleRows 这个参数的意思是&#xff1a;excel标题占多少行&#xff0c;而不是第几行headRows 这个参数的意思是&#xff1a;excel表头占几行&#xff0c;而不是第几行&#xff08;多行的意思是合并的行数&#xff09; 比如有一个excel如下&#xff0c;1-2行是标题&#xff0c…
阅读更多...
webstorm新建vue项目相关问题

webstorm新建vue项目相关问题

前言 这个迭代后端需求偏少&#xff0c;前端code的键盘都起火星子了。来了4个外包支持&#xff0c;1个后端3个前端&#xff0c;还是不够用啊。刚好趁这个机会稍微学习下vue&#xff0c;其实之前环境也配置过了&#xff0c;所以这里就不分享环境配置了&#xff0c;主要分享下新建…
阅读更多...
Orangepi Zero2 linux系统摄像头设备文件名固定

Orangepi Zero2 linux系统摄像头设备文件名固定

文章目录 1. 寻找设备规则2. 使用udev规则修改挂载设备文件名称 问题&#xff1a; 在多次插拔usb摄像头或者在使用中不小心碰到或松了会导致设备文件名称变化&#xff0c;如从/dev/video1和/dev/video2变为/dev/video2和/dev/video3, 所以每次发生变化后都要充型修改代码或者重…
阅读更多...
安全访问python字典：避免空键错误的艺术

安全访问python字典：避免空键错误的艺术

新书上架~&#x1f447;全国包邮奥~ python实用小工具开发教程http://pythontoolsteach.com/3 欢迎关注我&#x1f446;&#xff0c;收藏下次不迷路┗|&#xff40;O′|┛ 嗷~~ 目录 一、引言 二、直接访问字典键的问题 三、使用get方法安全访问字典键 四、get方法的实际应…
阅读更多...
C语言中的七种常用排序

C语言中的七种常用排序

今天&#xff0c;为大家整理了C语言中几种常用的排序&#xff0c;以及他们在实际中的运用&#xff08;有Bug请在下方评论&#xff09;&#xff1a; 一.桶排序 #include <stdio.h> int main() {int book[1001],i,j,t,n;for(i0;i<1000;i)book[i]0;scanf("%d"…
阅读更多...
第八节 条件装配案例讲解

第八节 条件装配案例讲解

一、条件装配的作用是什么 条件装配是 Spring 框架中一个强大的特性&#xff0c;使得开发者能够创建更加灵活和可维护的应用程序。在 Spring Boot 中&#xff0c;这个特性被大量用于自动配置&#xff0c;极大地简化了基于 Spring 的应用开发。 二、条件装配注解 <dependen…
阅读更多...
为什么要用虚拟时钟Virtual clock？

为什么要用虚拟时钟Virtual clock？

通常RTL设计要求对芯片/module的输入信号进行reg_in打拍处理&#xff0c;对芯片/module的输出也要求做reg_out打拍处理&#xff0c;这是良好的代码习惯&#xff0c;为时序收敛留下足够裕量&#xff0c;也避免顶层例化综合后的子模块时出现模块间IO时序不满足的情况。综合阶段可…
阅读更多...
DNF手游攻略：角色培养与技能搭配！游戏辅助！

DNF手游攻略：角色培养与技能搭配！游戏辅助！

角色培养和技能搭配是《地下城与勇士》中提升战斗力的关键环节。每个职业都有独特的技能和发展路线&#xff0c;合理的属性加点和技能搭配可以最大化角色的潜力&#xff0c;帮助玩家在各种战斗中立于不败之地。接下来&#xff0c;我们将探讨如何有效地培养角色并搭配技能。 角色…
阅读更多...
亿图图示——文本换行

亿图图示——文本换行

一、点击文本框&#xff0c;选择更多 二、勾选文本换行
阅读更多...
数据结构和算法基础（二）

数据结构和算法基础（二）

树和二叉树——树的基本概念 树和二叉树——树转二叉树 树和二叉树——查找二叉树&#xff08;二叉排序树&#xff09; 树和二叉树——构造霍夫曼树&#xff08;最优&#xff09; 树和二叉树——线索二叉树 树和二叉树——平衡二叉树 图——基本概念 1、有向图 2、无向图 3、完…
阅读更多...
Platformer Project

Platformer Project

Platformer项目适合那些寻找坚实基础来构建你梦想中的3D平台游戏的人，提供受该类型最具影响力游戏启发的核心机制。 一般功能 移动支持； 自定义运动学角色控制器； Humanoid Rig支持（共享动画）； 保存/加载（二进制、JSON或Playerprefs）； 支持多个存储槽； 三星、硬币和最…
阅读更多...
Dockerfile使用

Dockerfile使用

1.Dockerfile是什么 官网地址 https://docs.docker.com/reference/dockerfile/概念 是什么 Dockerfile 是用于构建 Docker 镜像的文本文件&#xff0c;它包含一系列的指令&#xff08;instructions&#xff09;和参数&#xff0c;用于描述如何构建和配置镜像。 Dockerfile 是…
阅读更多...
微信小程序中van-tab的title（动态）根据文本内容，自适应宽度

微信小程序中van-tab的title（动态）根据文本内容，自适应宽度

小程序van-tab的title&#xff08;动态&#xff09;根据文本内容&#xff0c;自适应宽度 效果图代码主要调整点 效果图 代码 <van-tabs color"#00aaff" active"{{ active }}" bind:click"onTabChange"><van-tab title"7天内&quo…
阅读更多...
游戏后台开发技术全面解析

游戏后台开发技术全面解析

在这个数字时代&#xff0c;游戏产业已经成为全球最受欢迎的娱乐方式之一。从简单的手机游戏到复杂的大型多人在线角色扮演游戏&#xff08;MMORPG&#xff09;&#xff0c;游戏的世界正变得越来越丰富和多样化。而这一切的背后&#xff0c;都离不开强大的游戏后台技术支持。在…
阅读更多...
【网络技术】【Kali Linux】Wireshark嗅探（十四）QUIC（快速UDP互联网连接）协议报文捕获及分析

【网络技术】【Kali Linux】Wireshark嗅探（十四）QUIC（快速UDP互联网连接）协议报文捕获及分析

往期 Kali Linux 上的 Wireshark 嗅探实验见博客&#xff1a; 【网络技术】【Kali Linux】Wireshark嗅探&#xff08;一&#xff09;ping 和 ICMP 【网络技术】【Kali Linux】Wireshark嗅探&#xff08;二&#xff09;TCP 协议 【网络技术】【Kali Linux】Wireshark嗅探&…
阅读更多...
Mac电脑太卡了怎么办 Mac电脑常见问题 cleanmymacX有必要买吗

Mac电脑太卡了怎么办 Mac电脑常见问题 cleanmymacX有必要买吗

当我们遇到mac电脑出现卡顿的情况&#xff0c;首先应排除是否是电脑硬件的问题&#xff0c;可以通过重启电脑来检测是否硬盘或程序是否发生错误。其次对电脑进行全面的健康检测&#xff0c;找到具体卡顿问题。 磁盘空间不足是导致电脑运行缓慢的常见原因之一。定期清理不需要的…
阅读更多...
最新文章

Copyright @ 2022~2023