期末作业: 关于粤菜的HTML网页设计——HTML+CSS+JavaScript【经典美食佳肴】

本文链接：https://blog.csdn.net/2301_76221586/article/details/139455778

文章目录

前言

网站致力于为广东美食爱好者提供最全面广东美食信息，网站不仅汇集了广东各地的经典美食，还提供美食制作视频教程，让您可以轻松学会在家做出地道的广东美食。快来广东经典佳肴网站，开启一场美食之旅，感受广东美食的魅力吧！

著名广东菜肴

一、网页介绍

网站布局计划采用浮动网页布局结构，程序语言选用HTML5+CSS3+JS，并确保兼容各大主流浏览器。素材选用精挑细选适合风格的图片。网站文件包含各种网页文件，编辑方面可使用EditPlus编辑软件进行操作。

HTML文件包含首页和其他二级页面；CSS文件包含全部页面样式，文字滚动和图片放大；JS文件包含动态轮播特效。

二、网页效果

三、代码样式

HTML代码如下（示例）：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>经典美食佳肴</title>
<meta name="keywords" content="">
<meta name="description" content="">
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" type="text/css" href="css/lbt.css">
</head>
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?6a5d30920f708caa94e53c2fd0d0719b";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
<body>
<div class="container mt-5 fs-4">
<div class="row g-5"></div>
</div>
<div class="shell-main">
<div class="shell-main-nav">
<div class="logo">
<a href="http://guangdongfood.cn"><img src="./image/logo.jpg" alt="经典美食佳肴" title="经典粤菜"></a>
<a href="http://guangdongfood.cn"><span>经典美食佳肴</span></a>
</div>
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="HTML/YCFL.html">粤菜分类</a></li>
<li><a href="HTML/YCCP.html">粤菜菜谱</a></li>
<li><a href="HTML/YCMD.html">经典佳肴</a></li>
<li><a href="HTML/PH.html">美食排行</a></li>
<div class="nav-box"></div>
</ul>
</div>
<div class="shell">
<ui class="images">
<li class="img"><img loading="lazy" alt="粤菜"></li>
<li class="img"><img loading="lazy" alt="粤菜"></li>
<li class="img"><img loading="lazy" alt="粤菜"></li>
</ui>
<ui class="min-images">
<li class="min"><img loading="lazy"></li>
<li class="min"><img loading="lazy"></li>
<li class="min"><img loading="lazy"></li>
</ui>
<div class="button">
<div class="button-left">< </div>
<div class="button-right">></div>
</div>
</div>
<header>
<h2>了解粤菜</h2>
<center> <a href=""><font size="6"><font color="red">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;粤菜</a></font>:是中国四大菜系、八大菜系之一。粤菜包括广府菜（即广州府菜）、潮州菜（又称潮汕菜）、东江菜（又称客家菜）、粤西菜 。主打粤菜的澳门、顺德和潮州三市是联合国评定的“世界美食之都”</font>
<div class="h-b">
<div class="h-b-l">
<div class="h-b-l-h">
<a href="./Intro/GFC.html"><p>广府菜</p></a>
<font size="4"><span>:是粤菜的代表，源自中原，传承了孔子所倡导的“食不厌精，脍不厌细”的中原饮食风格，做法比较复杂、精细，广府菜的范围包括珠江三角洲、香港、澳门和韶关等地。</span></font>
</div>
<div class="h-b-l-b">
<a href="./Intro/CZC.html"><p>潮州菜</p></a>
<font size="4"><span>:分布在广东省粤东地区的潮州、汕头、揭阳、汕尾等地。受到闽菜影响较多，又受到广府菜、客家菜等的影响，汇闽粤两家之长，风味自成一格。潮州菜目前有三个分支：本土潮州菜、港澳潮州菜以及海外潮州菜，是“国际上最好的中华料理”</span></font>
</div>
</div>
<img src="./image/logo.jpg" alt="美食记录">
<div class="h-b-r">
<div class="h-b-r-h">
<a href="./Intro/KJC.html"><p>客家菜</p></a>
<font size="4"><span>:如同客家语一样古老，是中华汉族饮食文化重要组成部分，是中原汉人迁徙南方定居下来后创造出一种新的饮食文化。主要流行广东的梅州、惠州、深圳 、河源、韶关, 客家菜可分为“山系”“水系”“散客菜”。按流派，客家菜分成六个流派：赣南派、闽西派、梅州派、东江派、桂系派、海外派</span></font>
</div>
<div class="h-b-r-b">
<a href="./Intro/YXC.html"><p>粤西菜</p></a>
<font size="4"><span>:以湛江、茂名、阳江等地为代表，粤西等地饮食习惯相通，粤西菜以白水煮、灼、蒸，配以精制而简单的酱料蘸食，追求一种返璞归真的感觉，味道可以用清、鲜、香、嫩四字概括。</span></font>
</div>
</div>
</div>
</header>
<script type="text/javascript" src="js/lbt.js"></script>
<div id="bottom1">
<br><font size="5" align="center"><h2>美味就是真理<h2></font></br>
<div id="bottom2">
<ul>
<li>
<a href="./Intro/GDZC.html"><img src="./image/4.jpg" alt="广东早茶"></a>
<h2>广东早茶</h2>
</li>
<li>
<a href="./Intro/MCKR.html"><img src="./image/5.jpg" alt="梅菜扣肉"></a>
<h2>梅菜扣肉</h2>
</li>
<li>
<a href="./Intro/YJJ.html"><img src="./image/6.jpg" alt="盐焗鸡"></a>
<h2>盐焗鸡</h2>
</li>


</ul>
<ul>


<li>
<a href="./Intro/CSNRW.html"><img src="./image/7.jpg" alt="潮汕牛肉丸"></a>
<h2>潮汕牛肉丸</h2>
</li>
<li>
<a href="./Intro/ZCF.html"><img src="./image/8.jpg" alt="猪肠粉"></a>
<h2>猪肠粉</h2>
</li>
<li>
<a href="./Intro/NRHG.html"><img src="./image/9.jpg" alt="牛肉火锅"></a>
<h2>牛肉火锅</h2>
</li>
</ul>




</div>
</div>
<hr />
<div id="footer">
<div id="dbwz">
<p><a href="./sitemap.html">网站地图</a></p>
<span><a href="#top"><b>回到导航栏</b></a></span>
</p>
</div>
</div>
</body>
</html>

CSS代码如下（示例）：

#banner img{    
    width:100%;
	height:200px;
	margin:5px auto;
}
element.style{
        object-fit:cover;
    }
#bottom1{
   background-color:#f2ebc7;  
	border-bottom: 1px solid;

}
#bottom2 ul {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-evenly;
  margin-top: 10px;
  text-align: center;
  font-size: 12px;

}

#bottom2 ul li {
  width: 300px;
  height: 300px;
  border: 6px solid rgba(0, 0, 0, 0.1);
  padding: 10px;
  transition: .3s;
  margin-bottom: 50px;
  margin-left:30px;
}
#bottom2 ul li:hover {

  padding: 2px;
  margin: 2px;
}
#bottom2 ul li img {
  width: 100%;
  height:280px;
}
#bottom2 h2{
    	font-family: "妤蜂綋";

}
body .shell-main-bottom {
  display: flex;
  height: 510px;
  flex-direction: column;
  margin: 500px;
}
body .shell-main-bottom h2 {
  font: 100 34px 'font';
  color: #48afa5;
  letter-spacing: 5px;
  margin-left: 100px;
}
body .shell-main-bottom-bottom {
  position: relative;
}
body .shell-main-bottom-bottom::before {
  content: '';
  width: 250px;
  height: 250px;
  border: 20px solid rgba(0, 255, 255, 0.3);
  position: absolute;
  border-radius: 10px;
  right: 70px;
  top: 100px;
  transform: rotate(30deg) translate(-50%, -50%);
  animation: transform 4s infinite;
  opacity: 0.8;
  z-index: -999;
}
body .shell-main-bottom-bottom ul {
  display: flex;
  justify-content: space-evenly;
  margin-top: 40px;
  flex-wrap: wrap;
}
body .shell-main-bottom-bottom ul li {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 12px solid rgba(0, 0, 0, 0.2);
  padding: 10px;
  flex-direction: column;
  transition: .3s;
  margin-bottom: 100px;
}
body .shell-main-bottom-bottom ul li span {
  font-size: 10px;
}

body .shell-main-bottom-bottom ul li:hover {
  padding: 2px;
  margin: 8px;
}

body .shell-main-bottom-bottom ul li:hover h2 {
  letter-spacing: 3px;
}

body .shell-main-bottom-bottom ul li img {
  width: 100%;
  border-radius: 50%;
}

body .shell-main-bottom-bottom ul li h2 {
  margin: 30px 0 10px 0;
  font-size: 24px;
  transition: .3s;
  color: black;
  text-align: center;
  letter-spacing: 0;
}

body .shell-main-bottom-bottom ul li span {
  color: #525252;
  }
   header {
           
            display: flex;
            justify-content: center;
            flex-direction: column;
            align-items: center;
            height:900px;
			margin-top: 40px;
        }

        header img {
            width: 400px;
            height: 500px;
            position: relative;
			margin-top: 40px;
        }

        header h2 {
            font: 60 60px '';
            margin-bottom: 20px;
            font-family:  "妤蜂綋";
            letter-spacing: 6px;
            border-bottom: 2px solid rgb(134, 134, 118);
        }

        header p {
            font: 100 30px '';
            letter-spacing: 5px;
			

        }

        .h-b {
            display: flex;
            justify-content: space-evenly;
            width: 90%;

        }

        .h-b p {
            color: red;
			font-family: "闅朵功";
            margin-bottom: 10px;
        }

        .h-b-l,
        .h-b-r {
            width: 20%;
            display: flex;
            justify-content: space-around;
            align-items: center;
            flex-direction: column;
        }