基于HTML+CSS+JavaScript制作美食文化网站 ——卡通创意的烧烤(5个页面) html静态网页设计制作 dw静态网页成品模板素材网页 web前端网页设计与制作 div静态网页设计

2023-12-31 18:19:12

👨?🎓静态网站的编写主要是用HTML DIV+CSS JS等来完成页面的排版设计👩?🎓,常用的网页设计软件有Dreamweaver、EditPlus、HBuilderX、VScode 、Webstorm、Animate等等，用的最多的还是DW，当然不同软件写出的前端Html5代码都是一致的，本网页适合修改成为各种类型的产品展示网页，比如美食、旅游、摄影、电影、音乐等等多种主题，希望对大家有所帮助。

? 【作者主页——🔥获取更多优质源码】

? 【学习资料/简历模板/面试资料/ 网站设计与制作】

? 【web前端期末大作业——🔥🔥毕设项目精品实战案例】

文章目录📂

一、网站题目👨?🎓

🥧 美食网页介绍、🍰甜品蛋糕、🦐地方美食小吃文化、🍺餐饮文化、等网站的设计与制作。

二、网站描述??

🍧美食主题网站 主要对各种美食进行展示，让浏览者清晰地了解到各种美食的详细信息，便于浏览者进行选择。该模块的左侧有个美食分类，用户可以选择自己喜欢的种类，当点击种类后，就会在右侧出现该分类下的各种美食，用户可以点击自己感兴趣的食品，从而看到它的具体信息。它的具体信息包括配料、产地及它的一些功能，使用户对该食品有着全面的认识。

三、网站介绍📚

📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。

📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。

📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；

📙网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）📜html文件包含：其中index.html是首页、其他html为二级页面；
（2）📑 css文件包含：css全部页面样式,文字滚动, 图片放大等；
（3）📄 js文件包含：js实现动态轮播特效, 表单提交, 点击事件等等（个别网页中运用到js代码）。

四、网站效果🌐

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

五、代码实现 🪓

HTML结构代码🧱


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<meta name="description" content="">
	<meta name="author" content="BBQ">
	<title>烤天下酒吧烧烤加盟官网 酒吧文化烧烤领导者 </title>

</head>
<body>
<!-- Header -->
<header id="header" class="">
	<div class="container">
		<div class="global-nav">
			<button class="navbar-toggle">
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<a class="brand" href="index.html">烤天下</a>
			<nav class="navbar">
				<ul class="nav">
					<li class="active">
						<a href="index.html" class="home-current">首页</a>
					</li>
					<li class="">
						<a href="food.html">招牌美食</a>
					</li>
					<li class="">
						<a href="join.html">招商加盟</a>
					</li>
					<li class="">
						<a href="profile.html">企业概况</a>
					</li>
					<li class="">
						<a href="about.html">联系我们</a>
					</li>
				</ul>
			</nav>
		</div>
	</div>
</header>
<!--Banner-->
<section class="carousel-top">
	<div class="banner">
		<div class="b-img">
			<a href="#" style="background:url(img/banner/slider-1.jpg) center no-repeat; background-size:cover;"></a>
			<a href="#" style="background:url(img/banner/slider-2.jpg) center no-repeat; background-size:cover;"></a>
		</div>
		<div class="b-list"></div>
		<a class="bar-left" href="#"><em></em></a>
		<a class="bar-right" href="#"><em></em></a>
	</div>
</section>
<!-- Product -->
<section id="greenx" style="background:#c30d23">
	<div class="container">
		<div class="row">
			<div class="item-title" style="padding-bottom:20px;">
				<h1 style="color:#c30d23">品牌特色</h1>

			</div>
			<div class="col-4 ">
				<div class="item item-ellipse">
					<div class="item-pad item-pad-1"></div>
					<div class="item-ellipse">
						<h2>口味</h2>
						<h3>KOUWEI</h3>
						<p>味道要经过沉淀才能成熟主烤官项目以中创永信（北京）食品科学研究院13年如一日从原料，腌料，串法，烤法，蘸料多方面潜心钻研。</p>
					</div>
				</div>
			</div>
			<div class="col-4">
				<div class="item item-ellipse">
					<div class="item-pad item-pad-2"></div>
					<div class="item-ellipse">
						<h2>品味</h2>
						<h3>PINWEI</h3>
						<p>不平庸，不盲从，不怕错敢去做是90后和00后的时代特征，主烤官从青春的品牌故事，创新的菜品口味，亮眼的包装，多个方面为年轻群体打造属于自己的烧烤店。</p>
					</div>
				</div>
			</div>
			<div class="col-4">
				<div class="item item-ellipse">
					<div class="item-pad item-pad-3"></div>
					<div class="item-ellipse">
						<h2>回味</h2>
						<h3>HUIWEI</h3>
						<p>再好的青春，回忆的次数多了味道也就淡了。主烤官用心将青春的味道化作一道道美食完整的保留下来，为每位食客记录记忆中的青春，让每次回忆逗有滋有味。</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- News -->
<section id="philosophy">
	<div class="container">
		<div class="row">
			<div class="item-title" style="padding-bottom:30px">
				<h1>新闻</h1>
			</div>
			<div class="col-5 item-news">
				<div class="item-lists">
					<div class="news-img"><a href="#"><img src="img/bj/news.jpg" alt=""></a></div>
					<div class="news-text">
						<h4><a href="news-page.html">烤天下成都新店开张</a></h4>
						<p>个性定位，打造极致体验，新店开张火爆成都，要玩要嗨就来烤天下，预定电话 8020113</p>
						<p class="news-large">04-20</p>
						<p>2017</p>
					</div>
				</div>
			</div>
			<div class="col-7 item-axis">
				<div class="item-axis-list clearfix">
					<div class="item-sou">
						<form action="">
							<input  type="text" placeholder="搜索以前的文章">
							<i class="icon-sou"></i>
							<button>搜索</button>
						</form>
					</div>
					<div class="it_expert3">
						<div id="hot_ranks2">
							<ul class="clearfix current" style="display:block">
								<li>
									<a href="news-page.html">
										<div class="axis-time">
											<h4>05-16</h4>
											<span>2017</span>
										</div>
										<div class="axis-title">
											<h5>烤天下创始人做客2017央视元宵晚会</h5>
											<p>个性定位，打造极致体验，新店开张火爆成都，要玩要嗨就来烤天下，预定电话 010-8020113</p>
										</div>
									</a>
								</li>
								<li>
									<a href="#">
										<div class="axis-time">
											<h4>04-12</h4>
											<span>2017</span>
										</div>
										<div class="axis-title">
											<h5>夏天烧烤季 你的舌尖归我们</h5>
											<p>如何让烧烤爱好者们从路边摊挪到干净的厅堂里吃烧烤？这是一个餐饮习惯的迁移问题，要打通迁移的通道，首</p>
										</div>
									</a>
								</li>
								<li>
									<a href="#">
										<div class="axis-time">
											<h4>04-08</h4>
											<span>2017</span>
										</div>
										<div class="axis-title">
											<h5>做品牌，跳出套路才更有价值</h5>
											<p>一个有生命力的品牌对于用户群体来说像一块具有内循环功能的海绵，不断的吸收，然后反作用于自身来变得更强大，从而达到更大的体量</p>
										</div>
									</a>
								</li>

							</ul>
							<ul class="clearfix current" style="display:none">
								<li>
									<a href="#">
										<div class="axis-time">
											<h4>04-01</h4>
											<span>2017</span>
										</div>
										<div class="axis-title">
											<h5>我们的初心，就是让创业者们成功</h5>
											<p>在风起云涌的餐饮江湖，烤天下异军突起，不仅凭借强势的酒吧烧烤文化刷新了烧烤行业的标准</p>
										</div>
									</a>
								</li>
								<li>
									<a href="#">
										<div class="axis-time">
											<h4>03-28</h4>
											<span>2017</span>
										</div>
										<div class="axis-title">
											<h5>丹麦最近有点忧伤，</h5>
											<p> 夏天吃烧烤有三怕，第一是呛烟四起眼泪咳嗽喝着肉一起吃；第二是邻座光膀子撸串嗨起的食客辣眼睛</p>
										</div>
									</a>
								</li>
								<li>
									<a href="#">
										<div class="axis-time">
											<h4>03-26</h4>
											<span>2017</span>
										</div>
										<div class="axis-title" style="border-bottom:none">
											<h5>烤天下成都新店开张</h5>
											<p>个性定位，打造极致体验，新店开张火爆成都，要玩要嗨就来烤天下，预定电话 010-8020113</p>
										</div>
									</a>
								</li>
							</ul>
							<ul class="clearfix current" style="display:none">
								<li>
									<a href="#">
										<div class="axis-time">
											<h4>03-22</h4>
											<span>2017</span>
										</div>
										<div class="axis-title">
											<h5>2烤天下成都新店开张</h5>
											<p>个性定位，打造极致体验，新店开张火爆成都，要玩要嗨就来烤天下，预定电话 010-8020113</p>
										</div>
									</a>
								</li>
								<li>
									<a href="#">
										<div class="axis-time">
											<h4>03-21</h4>
											<span>2017</span>
										</div>
										<div class="axis-title">
											<h5>烤天下成都新店开张</h5>
											<p>个性定位，打造极致体验，新店开张火爆成都，要玩要嗨就来烤天下，预定电话 010-8020113</p>
										</div>
									</a>
								</li>
								<li>
									<a href="#">
										<div class="axis-time">
											<h4>03-18</h4>
											<span>2017</span>
										</div>
										<div class="axis-title" style="border-bottom:none">
											<h5>烤天下成都新店开张</h5>
											<p>个性定位，打造极致体验，新店开张火爆成都，要玩要嗨就来烤天下，预定电话 010-8020113</p>
										</div>
									</a>
								</li>
							</ul>
						</div>
					</div>
					<div class="button-cut">
						<span id="it_awewe" class="it_awewe">
							<a href="javascript:volid(0);" class="cut-up it_expertspan1" id="previous2"></a>
							<a href="javascript:volid(0);" class="cut-dow it_expertspan2" id="next2"></a>
						</span>
					</div>
				</div>
			</div>

		</div>
	</div>
</section>

<!-- Taste -->
<section id="net">
	<div class="container">

		<div class="row">
			<div class="col-3">
				<div class="items">
					<img src="img/icon/f-1.png" alt="">
					<h3>半成品输出，极速配送</h3>
				</div>
			</div>
			<div class="col-3">
				<div class="items">
					<img src="img/icon/f-2.png" alt="">
					<h3>优质产地，严格品控</h3>
				</div>
			</div>
			<div class="col-3">
				<div class="items">
					<img src="img/icon/f-3.png" alt="">
					<h3>品类齐全，口味丰富</h3>
				</div>
			</div>
			<div class="col-3">
				<div class="items">
					<img src="img/icon/f-4.png" alt="">
					<h3>菜品创新，活动迭代</h3>
				</div>
			</div>

		</div>
	</div>
</section>

<!-- Footer -->
<footer id="footer">
	<div class="container">
		<div class="copy">?AUI 素材网 京ICP备15006025号-1
		</div>
		<div class="copy">
			Copyright ? 2012-2016 www.a-ui.cn <span>地址：北京市海淀区北三环西路43号中航广场6层</span>
		</div>
	</div>
</footer>

</body>
</html>

CSS样式代码💒


html,body {margin:0;padding:0;height:100%; font-family: PingFang SC,Helvetica Neue,Helvetica,Arial,Hiragino Sans GB,Microsoft Yahei,\\5FAE软雅黑,STHeiti,\\534E文细黑,sans-serif;background:#302a34;}

* {-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
button:focus { outline:none;}
a {text-decoration:none;color:#000;}
ul{padding:0; margin:0;}
li{padding:0; margin:0; list-style:none}
img {border:0;}
hr {height:0;margin-top:10px;margin-bottom:10px;border:0;border-top:solid 1px #353c48;}

#header {background:#444250;position:fixed;top:0;left:0;right:0;z-index:20;}

.brand {display:block;overflow:hidden;width:101px;height:32px;margin:9px 0;text-indent:-999px;background:url("../img/icon/site-brand.png") no-repeat center top;-moz-background-size:cover;-webkit-background-size:cover;background-size:cover;}

@media print, only screen and (-webkit-min-device-pixel-ratio: 1.5), screen and (min-resolution: 144dpi), screen and (min-resolution: 144dppx){
	.brand {background-image:url("../img/icon/site-brand@2x.png");}
}

.navbar-toggle {float:right;width:40px;height:32px;margin:9px 0;border:0;padding:5px 9px;background:none;cursor:pointer;}
.navbar-toggle .icon-bar {display:block;width:22px;height:2px;background:#fff;-webkit-transition: 0.15s cubic-bezier(0.75, -0.55, 0.25, 1.55);transition: 0.15s cubic-bezier(0.75, -0.55, 0.25, 1.55);}
.navbar-toggle .icon-bar + .icon-bar {margin-top:4px;}

.navbar-toggle.active .icon-bar {position:absolute;margin:0;}
.navbar-toggle.active .icon-bar:nth-child(1) {-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}
.navbar-toggle.active .icon-bar:nth-child(2) {opacity:0;}
.navbar-toggle.active .icon-bar:nth-child(3) {-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);}

.navbar {display:none;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, .5);box-shadow:inset 0 1px 0 rgba(255, 255, 255, .5);}
.nav {margin:5px 0;padding-left:0;}
.nav li {list-style:none;border-top:solid 1px rgba(255,255,255,.2);position:relative;}
.nav li:first-child {border-top:0;}
.nav li a {display:block;padding:20px 15px;font-size:16px;color:#fff;}
.nav li.active a {background:#c30e23; color:#dfd1b5}
.collapse {display:block;overflow:hidden;overflow-y:auto;visibility:visible;
	-webkit-transition-timing-function: ease;
	transition-timing-function: ease;
	-webkit-transition-duration: .35s;
	transition-duration: .35s;
	-webkit-transition-property: height, visibility;
	transition-property: height, visibility;}

八、更多干货🎁

1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “??评论” “💙收藏” 一键三连哦！

2.💗【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！

3.

以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻💬

文章来源:https://blog.csdn.net/qq_524614081/article/details/134894841
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。