html+css网页制作

最新推荐文章于 2024-05-31 12:55:05 发布
最新推荐文章于 2024-05-31 12:55:05 发布
阅读量3.2k 收藏 50
点赞数 29
分类专栏： html+css 文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qxpapt/article/details/119561345
版权

简易美食网页制作

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>美食页面</title>
	<link rel="shortcut icon" href="images/xlogo.png">
	<link rel="stylesheet" href="css1.css">
</head>
<body>
	<header>
			<div class="language_change">
				<select name="language">
					<option>简体中文</option>
					<option>English</option>
				</select>
				<select name="currency">
					<option>人民币</option>
					<option>Dollor</option>
				</select>
			</div>
			<div class="title"><p>爱尚美食</p></div>
			<!-- <div class="logo"><a href=""><img src="images/logo.jpg" alt=""></a></div> -->
			<!-- <div class="logo"> -->
			<div class="login_register"><a href="">登陆</a>|<a href="">注册</a></div>
			<div class="shop_cart"><a href=""><img src="images/cart.png" alt="">购物车</a></div>
	</header>
	<!-- 导航栏 -->
	<menu>
		<ul>	
			<li><a href="">首页</a></li>
			<li><a href="">主食</a></li>
			<li><a href="">荤菜</a></li>
			<li><a href="">素材</a></li>
			<li><a href="">甜品</a></li>
			<li><a href="">小吃</a></li>
		</ul>
	</menu>
	<!-- 中间部分 -->
	<article>
	<!-- 第一部分 -->
		<div class="topic1">
			<h1>每日推荐</h1>
			<!--搜索 -->
			<div class="search">
				<input type="text">
				<input type="button" value="站内搜索">
			</div>
			<ul>
				<li>
					<a href=""><img src="images/可乐鸡翅.jpg" alt=""></a>
					<span>28yuan</span>
					<h5>可乐鸡翅</h5>
				</li>
				<li>
					<a href=""><img src="images/蛋糕.jpg" alt=""></a>
					<span>15yuan</span>
					<h5>提拉米苏</h5>
				</li>
				<li>
					<a href=""><img src="images/糖醋排骨.jpg" alt=""></a>
					<span>28yuan</span>
					<h5>糖醋排骨</h5>
				</li>
				<li>
					<a href=""><img src="images/龙虾.jpg" alt=""></a>
					<span>75yuan</span>
					<h5>龙虾</h5>
				</li>
			</ul>
		</div>
		<!-- 第二部分 -->
		<div class="topic2">
			<h1>优惠菜品</h1>
			<ul>
				<li>
					<a href=""><img src="images/生蚝.jpg" alt=""></a>
					<span>49yuan</span>
					<h5>蒜蓉生蚝</h5>
				</li>
				<li>
					<a href=""><img src="images/东坡肉.jpg" alt=""></a>
					<span>49yuan</span>
					<h5>东坡肉</h5>
				</li>
				<li>
					<a href=""><img src="images/蛋糕1.jpg" alt=""></a>
					<span>15yuan</span>
					<h5>丝抹蛋糕</h5>
				</li>
				<li>
					<a href=""><img src="images/披萨.jpg" alt=""></a>
					<span>50yuan</span>
					<h5>芝士</h5>
				</li>
			</ul>
			<div class="div1"></div>
			<div class="div2"><a href=""><img src="images/m.png" alt=""></a></div>
			<h2>微信公众号</h2>
			<div class="div4"></div>
		</div>
		<!-- 第三部分 -->
		<div class="topic3">
			<h1>今日套餐</h1>
			<ul>
				<li>
					<a href=""><img src="images/咖喱饭.jpg" alt=""></a>
					<span>439yuan</span>
					<h5>咖喱鸡饭</h5>
				</li>
				<li>
					<a href=""><img src="images/套餐.jpg" alt=""></a>
					<span>28yuan</span>
					<h5>排骨饭</h5>
				</li>
				<li>
					<a href=""><img src="images/蛋糕2.jpg" alt=""></a>
					<span>20yuan</span>
					<h5>千层蛋糕</h5>
				</li>
				<li>
					<a href=""><img src="images/蛋糕3.jpg" alt=""></a>
					<span>25yuan</span>
					<h5>水果蛋糕</h5>
				</li>
			</ul>
			<div class="div3"></div>
			<h3>特别提示</h3>
			<div class="div4"></div>
			<p>请客人保管好自己的财<br>产安全和账户密码。</p>
			
		</div>
	</article>
	<!-- 末尾部分 -->
	<div class="c" align="center">
		<a href="">关于我们</a>|<a href="">联系我们</a><a href="">
		加入收藏</a>|<a href="">留言板</a>
		<p>版权所有©2019爱尚美食 Email: ASMS@163.com</p>
		<p>地址：衡阳市珠晖区衡阳师范学院 联系方式：88888888</p>
	</div>
</body>
</html>

*{
	margin:0 auto;
	padding: 0px;
}
body{
	height: 100%;
	width: 100%;
}
header{
	background-color: #f6f6f6;
	width: 1200px;
	height: 80px;
	margin:0 auto;
	position: relative;
}
header div{
	float: left;
}
/*.logo{
	height: 20px;
	width: 20px;
	margin-top: 10px;
	margin-left: 12px;
	position: absolute;
}*/
.title{
	font-family: "华文行楷";
	font-weight: bold;  /*加粗*/
	font-size: 68px;
	text-align: center;
	line-height: 80px;
	margin-top: 5px;
	margin-left: 27%;
	color: #333;
}
.language_change select{
	margin-left: 10px;
	height: 24px;
}
a{
	text-decoration: none;
	color: #06f;
}
a:hover{
	color: #f00;
}

/*.logo{
	background-image: url(images/logo.jpg);
	background-size: 300px 300px;
}*/
.login_register{
	float: right;
	margin-right: 10px;
}
.shop_cart{
	float: right;
	margin-right: 40px;
	padding-left:22px;
}
li{
	list-style: none;
}
menu{
	background-color: #f6f6f6;
	height: 70px;
	width: 1200px;
}
menu ul{
	float: left;
	margin-left: 12%;
}
menu ul li{
	height: 35px;
	width: 150px;
	margin-left:30px;
	background-color: #fdea66;
	float: left;
	margin-left: 12px;
	text-align: center;
	line-height: 35px;
}
menu ul li a{
	font-weight: bold;
	color: #333;
	font-size: 20px;
	height: 40px;
	width: 90px;
	display: block; /*点击呈块状*/
	letter-spacing: lem; /*字间距*/
}
menu ul li a:hover{
	color: #f0c; /*点击后呈现的颜色*/
}
article{
	width: 100%;
}
.topic1{
	height: 300px;
	width: 1200px;
	background-color: #f6f6f6;
}
.search{
	float: right;
	margin-right: 30px;
	width: 230px;
	height: 180px;
	background-color: #fdea66;
	text-align: center;
}
.search input{
	margin-top: 60px;
	margin-left: 35px;
	height: 30px;
	width: 160px;
	border:3px solid #06f;
	float: left;
	background-color: #fee;
}
.search input:last-child{
	margin-top: 15px;
	margin-left: 65px;
	height: 30px;
	width: 110px;
	border:3px solid #06f;
	float: left;
	color: #06f;
	letter-spacing: 0.2em;
	font:bold 22px "华文行楷";
}

/*第一部分*/
.topic1 h1{
	font-family: "华文行楷";
	font-size:38px;
	color: #06f;
}
.topic1 ul{
	margin-left: 30px;
	position: absolute;
}
.topic1 ul li{
	float: left;
	margin-right: 20px;
}
.topic1 ul li img{
	height: 150px;
	width: 200px;
}
.topic1 ul li img:hover{
	border:5px solid #f00;
}
.topic1 ul li span{
	font-family: "华文行楷";
	text-align: center;
	font-size: 20px;
	color: #f00;
	display: block;
}
.topic1 ul li h5{
	font-family: "华文行楷";
	text-align: center;
	font-size: 22px;
	color: #6c0;
}

/*第二部分*/
.topic2{
	height: 300px;
	width: 1200px;
	background-color: #f6f6f6;
}
.topic2 h1{
	font-family: "华文行楷";
	font-size:38px;
	color: #06f;
}
.div1{
	width: 230px;
	height: 245px;
	background-color: #fdea66;
	float: right;
	position: relative;
	margin-right:30px; 
}
.div2
{
	position:absolute;
	text-align:right;
	margin-left: 970px;
	margin-top: 60px;
}
.div4
{
	width: 230px;
	border-bottom: 2px solid #06f;
	margin-left: 940px;
	margin-top: 56px;
	position:absolute;
}
.topic2 h2{
	float: right;
	text-align: center;
	font-family: "华文行楷";
	font-weight: bold;
	font-size:38px;
	color: #06f;
	margin-left: 970px;
	margin-top: 10px;
	position:absolute;
}
.topic2 a img{
	height: 170px;
	width: 170px;
	float: right;
}
.topic2 ul{
	margin-left: 30px;
	position: absolute;
}
.topic2 ul li{
	float: left;
	margin-right: 20px;
}
.topic2 ul li img{
	height: 150px;
	width: 200px;
}
.topic2 ul li img:hover{
	border:5px solid #f00;
}
.topic2 ul li span{
	font-family: "华文行楷";
	text-align: center;
	font-size: 20px;
	color: #f00;
	display: block;
}
.topic2 ul li h5{
	font-family: "华文行楷";
	text-align: center;
	font-size: 22px;
	color: #6c0;
}


/*第三部分*/
.topic3{
	height: 300px;
	width: 1200px;
	background-color: #f6f6f6;
}
.div3{
	width: 230px;
	height: 150px;
	background-color: #fdea66;
	float: right;
	position: relative;
	margin-right:30px; 
}
.topic3 h3{
	margin-right: 30px;
	text-align: center;
	font-family: "华文行楷";
	font-weight: bold;
	font-size:38px;
	color: #06f;
	position: absolute;
	margin-left: 970px;
	margin-top: 10px;
}
.div5
{
	width: 230px;
	border-bottom: 2px solid #06f;
	margin-left: 940px;
	margin-top: 70px;
	position:absolute;
}
.topic3 p{
	text-align: center;
	font-family: "华文行楷";
	font-weight: bold;
	font-size:22px;
	color: #06f;
	position: absolute;
	margin-left: 945px;
	margin-top: 90px;
}
.topic3 h1{
	font-family: "华文行楷";
	font-size:38px;
	color: #06f;
}
.topic3 ul{
	margin-left: 30px;
	position: absolute;
}
.topic3 ul li{
	float: left;
	margin-right: 20px;
}
.topic3 ul li img{
	height: 150px;
	width: 200px;
}
.topic3 ul li img:hover{
	border:5px solid #f00;
}
.topic3 ul li span{
	font-family: "华文行楷";
	text-align: center;
	font-size: 20px;
	color: #f00;
	display: block;
}
.topic3 ul li h5{
	font-family: "华文行楷";
	text-align: center;
	font-size: 22px;
	color: #6c0;
}
.c{
	margin-top: 25px;
}

最终界面

请添加图片描述

请添加图片描述
溫馨提示： 由于界面太大就截为两幅图片

三毛是she
关注
  • 29
    点赞
  • 踩
  • 50
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
HTML，CSS样式一个简单网页设计
qq_59384581的博客
05-10 1004
html网页简单制作，和样式总结归纳。
HTML+css网页设计
2301_76192170的博客
07-04 5039
<a href="#">关于我们</a></li><li><a href="#">联系方式</a></li><li><a href="#">首页</a>版权所有 © 2023 我的网页我的网页
html简单网页代码：使用html+css实现一个静态页面（含源码）
qq3200628753的博客
12-21 6053
1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑
HTML+CSS大作业：使用html设计一个简单好看的公司官网首页 浮动布局
最新发布
网页设计与制作 | HTML+CSS+JS
05-31 929
👒 公司官网网站 、企业官网、酒店官网、等网站的设计与制作。🏷️ 网页中包含：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频音频元素，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站
html网页制作——基于HTML+CSS自我介绍网页设计与制作
12-14 5123
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
【HTML网页设计 + CSS样式表】详细记录 / 含代码 by.Akaxi
Akaxi的博客
10-12 6005
【HTML网页设计 + CSS样式表】详细记录 / 含代码
HTML入门网页制作，HTML+css运用做出
weixin_64284850的博客
03-07 1603
如图所示，带有搜索框的简单网页 以下是HTML内容： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>NASA中文网</title><!-- 网页标题 --> <link rel="stylesheet" type="text/css" href="../css/style.css"/>&l...
网页制作基础学习——HTML+CSS
热门推荐
学会改变自己——才能突破
04-29 1万+
网络是大家经常使用的东西，他帮助我们解决了很多问题，在我们生活中扮演着举足轻重的作用。但是如何制作呢，现在已经有很多专门的网页制作软件了（例如：Dreamweaver，Fireworks），而这些软件的根本都是生成代码，让浏览器进行读取，所以我先从背后代码的部分开始学习，进行简单总结。          首先：HTML（HyperText Markup Language）,即超文本
HTML+CSS网页制作成品：网站设计与实现——咖啡网站HTML+CSS+JavaScript
01-04 2639
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
期末大作业+html+css网页制作
05-25
9个网页布局，学校让做的网站作业，虽然是比较基础的网页静态页面，不过我也希望你能做的规范一些，我们专业制作学生网页作业，div css js 等通过dreamwear的工具实现规范化，比如文件夹的规范，代码写作的规范，...
网页设计与制作(HTML+CSS+JavaScript)
01-30
网页设计与制作(HTML+CSS+JavaScript)，资源总大小：786.6MB，欢迎下载
html+css网页设计源码(简洁)
12-25
html+css网页设计源码(简洁)，前端基础代码，拿来就用 评分: ⭐⭐⭐⭐⭐
《html+css+javascript 网页制作案例教程》源代码
04-02
《HTML+CSS+JavaScript 网页制作案例教程》是一本深入浅出的前端开发教材，旨在帮助读者掌握网页设计的基础知识和技能。这个压缩包包含的源代码是书中各个实例的实现，提供了丰富的实践材料，使学习者能够通过实际...
期末大作业+html+css网页制作（美食）
06-07
适合学生的html5响应式网站学校让做的网站作业，虽然是比较基础的网页静态页面，不过我也希望你能做的规范一些，我们专业制作学生网页作业，div css js 等通过dreamwear的工具实现规范化，比如文件夹的规范，代码...
html+css网页设计源代码
11-07
在这个“html+css网页设计源代码”中，我们有机会深入理解这两种语言如何协同工作，创建出具有专业外观和功能的网站。 HTML是网页的基础，它定义了网页的结构和内容。在提供的"html3"文件中，我们可以看到各种HTML...
茶叶文化网站设计与实现 HTML+CSS学生网页设计作业源码
dreamweaver网页设计
10-08 450
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件
使用HTML+CSS+JS网页设计与制作，酷炫动效科技农业网页
mon_star°的博客
11-26 925
使用HTML+CSS+JS网页设计与制作，酷炫动效科技农业网页。可以用于家乡介绍、科技农业、图片画廊展示等个人网站的设计与制作。农业网站、家乡网站、农产品网站、旅游网站。
【网页设计与制作成品】 HTML+CSS制作美味糖果网站】
qq_524614081的博客
01-09 502
📂文章目录一、👨‍🎓网站题目二、✍️网站描述三、📚网站介绍四、🌐网站效果五、🪓 代码实现🧱HTML结构代码💒CSS样式代码六、🥇 如何让学习不再盲目七、🎁更多干货 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【学习资料/简历模板/面试资料/ 网站设计与制作】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例】 一、👨‍🎓网站题目 🥧 美食网页介绍、🍰甜品蛋糕、🦐地方美食小吃文化、🍺餐饮文化、等网站的设计与制作。 二、✍️网站描述 🍧美食主题网站 主要对各种美食进行展示，让浏览者清晰地了解

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

三毛是she

感谢打赏，我会继续努力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值