静态网页设计——贵州美食（HTML+CSS+JavaScript）

发布时间：2024年01月05日

前言

声明：该文章只是做技术分享，若侵权请联系我删除。！！
感谢大佬的视频：
https://www.bilibili.com/video/BV1vC4y1K7de/?vd_source=5f425e0074a7f92921f53ab87712357b

使用技术：HTML+CSS+JS（静态网页设计）
主要内容：对贵州的美食进行介绍

主要内容

1、首页

首页用html标签分割成多个区域，每个区域都是用子div标签继续进行更加细致的分割，并且使用css设置样式，将每个区域想显示的效果用css设计出来，最后根据px单位进行划分，精准的分割页面格式化。
在这里插入图片描述

最上方使用li标签+css设计制作的菜单导航，还有使用js实现的轮播图，可以自动切换图片，
或者点击下方的按钮可以手动切换图片。
在这里插入图片描述
代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>贵州美食</title>
		<link rel="stylesheet" type="text/css" href="css/index.css">
		<script type="text/javascript" src="js/index.js"></script>
</head>
<body>
	<div class="t1">
		<img src="images/1.jpg" width="1024" height="215">
	</div>
	<div class="daohang1">
		<ul class="daohang2">
			<a href="index.html">首页哦</a>
			<a href="html/wh.html">美食文化耶</a>
			<a href="html/qn.html">去哪儿吃啊</a>
			<a href="html/cs.html">去吃什么呀</a>
		</ul>
	</div>
	<div class="banner">
		<div class="banner_pic" id="banner_pic"> 
			<div class="current">
				<img src="images/lg2.jpg" width="800" height="400" alt="" /></div>
			<div class="pic">
				<img src="images/yrf.jpg" width="800" height="400" alt="" /></div>
			<div class="pic">
				<img src="images/ht.jpg" width="800" height="400" alt="" /></div>
			<div class="pic">
				<img src="images/sty3.jpg" width="800" height="400" alt="" /></div>
			<div class="pic">
				<img src="images/sww.jpg" width="800" height="400" alt="" /></div>
			<div class="pic">
				<img src="images/bbt3.jpg" width="800" height="400" alt="" /></div>
		</div>	
		<ol id="button">
			<li class="current"></li>
			<li class="but"></li>
			<li class="but"></li>
			<li class="but"></li>
			<li class="but"></li>
			<li class="but"></li>
		</ol>
		</div>
		<div class="z1">
			<div class="t3">
				<img src="images/3.jpg" width="200" height="200">
			</div>
			<div class="w1">
				<p class="w2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;贵州，除了拥有山水的秀丽外，更让人难忘的是独具特色的美食。这里不仅有19度的夏天——凉都......更有馋人的美食——水城烙锅......</p>
      <p class="w2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;由于政治、经济、文化等各种有利条件，我们这里有许多的少数民族，还有更多的风俗习惯，那我们贵州美食呢，便博采各地的精华，兼并有各民族饮食的风味，挖掘、继承历代宫廷小吃的技艺。</p>
      <p class="w2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;所以呐，贵州美
      食品种繁多、风味各异、麻辣鲜香，引来各地同胞品尝，最爱贵州美食了，嘿嘿！</p>
			</div>
		</div>	
</body>
</html>
2、美食文化节

该页面使用p标签和人span标签嵌入许多文本，将关于网站主题的介绍全部写到网页中，文字排版根据字数来进行，使用不会出现不协调的情况。在文字旁边，使用img标签嵌入一些图片，使得网页整体更加的美观。
在这里插入图片描述

代码：

<div class="z1">
		<h1>美食文化</h1>
		<div>
			<p class="w1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;中国是闻名世界的烹饪王国，菜点美食数以万计。不久前，电视片《舌尖上的中国》轰动了全国，乃至世界。那么，作为贵州人，不禁要问：舌尖上的贵州又会是怎样呢？贵州，山川秀丽，物产丰富，民族众多，饮食文化源远流长，异彩纷呈。贵州的民族民间菜不仅充分利用当地的特产，而且还深深的打上了民族饮食文化的烙印，贵州菜独具风味和民族特色。贵州的风味小吃以"香辣"、"麻辣"著称，不仅辣香醇厚、味美可口，而且色泽艳丽、造型优美。</p>
		</div>
			<img src="../images/7.png" height="215">
			<div>
				<p class="w1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;各族人民在长期的生产实践中，创造了丰富多彩的饮食文化，调制出了许多历史悠久、加工独特、闻名遐迩的民族特色菜点。贵州是一个多民族聚居的民族大省，以农业经济为主，兼营畜牧业和养殖业。由于其居住地域的不同，在主、副食方面是有差异的。大体说来，居住在平坝、河谷地带的土家、布依、侗、壮、水等民族，水稻为主要的农作物，他们则终年以大米为主食。而居住在山区的彝、苗、仡佬等民族，水田极少，主要是旱地，以种植薯类和玉米、麦类为主，故在相当长的历史时期内是以小麦、玉米、土豆、荞麦等粗杂粮为主食。</p>
				<p class="w1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;贵州少数民族的家常菜几乎都以辣为佐料，当地人可以用一种或多种辣椒烹调出干辣、油辣、糟辣、酸辣、青辣、麻辣、蒜辣、酱辣、复合辣等十多种独具风味的系列辣味，仅用辣椒制作的调味就有几十种。同样是辣，三个吃辣出名的省份又有区别。四川是麻辣，湖南是干辣，而贵州是真辣。</p>
				<img src="../images/8.png" width="1024">
				<p class="w1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;贵州地区历来缺盐，勤劳、智慧的苗、侗等族人民，在长期的生活实践，摸索出了以酸代盐，以酸补盐的烹调艺术。少数民族都喜食酸菜，家家有酸汤缸，户户有腌菜坛，几乎天天用酸汤烹饪菜肴。酸菜的制作也很简单，即将青菜洗净，放入缸内用淘米水浸泡两三天即成。常见的酸菜有泡酸萝卜、酸豇豆、酸鸡、酸鸭、酸肉以及既辣又酸的盐酸菜、酸辣椒等。苗族、侗族的酸味菜特别有名，酸汤鱼就是一道著名的苗族风味菜，其做法是将酸汤加水、食盐煮沸，取鲜活鱼割去苦胆，入酸汤中煮制而成。肉嫩汤鲜，清香可口，佐以辣椒，酸辣香嫩，令人食欲大增。</p>
			</div>
	</div>
3、去吃什么呀

该页面使用html+css设计结构和样式，将图片img标签设计成排列整齐的卡片，有些还是卡片超链接，鼠标放上去卡片或者卡片上的文字会变色。
在这里插入图片描述

代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>贵州美食</title>
	<link rel="stylesheet" type="text/css" href="../css/cs.css">
</head>
<body>
	<div class="t1">
		<img src="../images/1.jpg" width="1024" height="215">
	</div>
	<div class="dh1">
		<ul class="dh2">
			<a href="../index.html">首页哦</a>
			<a href="wh.html">美食文化耶</a>
			<a href="qn.html">去哪儿吃啊</a>
			<a href="cs.html">去吃什么呀</a>
		</ul>
	</div>
	<div class="t2">
		<img src="../images/8.png" width="1024" height="220">
	</div>
	<div class="z1">
		<div>
			<h1>去吃什么呀</h1>
			<img src="../images/4.jpg">
			<h1>吃这些</h1>
		</div>
		<div>
			<img src="../images/lg.jpg" width="300" height="225">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="../images/yrf.jpg" width="300" height="225">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="../images/ht.jpg" width="300" height="225">
		</div>
		<div>
			<ul class="w2">
				<a href="lg.html">水城烙锅</a>
				<a href="yrf.html">羊肉粉</a>
				<a href="ht.html">威宁火腿</a>
			</ul>
		</div>
		<div>
			<img src="../images/sty.jpg" width="300" height="225">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="../images/sww.jpg" width="300" height="225">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="../images/bbt.jpg" width="300" height="225">
		</div>
		<div>
			<ul class="w2">
				<a href="sty.html">酸汤鱼</a>
				<a href="sww.html">丝娃娃</a>
				<a href="bbt.html">波波糖</a>
			</ul>
		</div>
	</div>
	<div class="z2"></div>
</body>
</html>

总结

想要看具体效果的同学，可以访问这个链接：
https://www.bilibili.com/video/BV1vC4y1K7de/?vd_source=5f425e0074a7f92921f53ab87712357b
具体的代码也在该链接下。

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