网站简介
网站介绍:湘菜美食网站,一共10个页面,分别包括首页、二级页面包括湘菜攻略、湘菜美食2个页面,湘菜攻略和湘菜美食各包含4个三个三级详细介绍页面
网站布局:网站使用div+css布局页面,网站使用div,ul,li,a,p,h1,h2,h3,h4,form,input,button,table,tr,td等标签,css使用margin,border,padding,font-weight,font-family,color,width,line-height,overflow,float,text-align,background,display等样式
网站JS效果:网站首页实时显示当前日期时间
网站编辑器:网站是最简单的页面布局,任何编辑器都可以打开网站代码进行编辑,包括Dreamweaver,vs code,HBuilds,sublime,记事本等软件都可以进行编辑
网站截图
<header class="header">
<div class="logo">
<img src="./images/logo.jpg" width="300">
</div>
<div id="timss"></div>
</header>
<!-- 导航开始 -->
<nav class="nav">
<ul>
<li> <a href="index.html"> 首页</a> </li>
<li> <a href="news.html"> 湘菜攻略</a> </li>
<li> <a href="food.html"> 湘菜美食</a> </li>
</ul>
</nav>
<article class="main">
<div class="banner">
<img src="./images/banner.jpg" width="100%">
</div>
<div class="imgbox">
<div class="artbox">
<dl>
<dt>
<img src="./images/gl.jpg" width="100%">
</dt>
<dd>
<h3>了解湘菜 </h3>
<p> 湘菜,又叫湖南菜,是中国历史悠久的汉族八大菜系之一 [1] ,早在汉朝就已经形成菜系。以湘江流域、洞庭湖区和湘西山区三种地方风味为主。 </p>
<p>湘菜制作精细,用料上比较广泛,口味多变,品种繁多;色泽上油重色浓,讲求实惠;品味上注重香辣、香鲜、软嫩;制法上以煨、炖、腊、蒸、炒诸法见称。</p>
<p>
官府湘菜代表菜品以组庵湘菜为代表,如组庵豆腐、组庵鱼翅等;民间湘菜代表菜品有辣椒炒肉、剁椒鱼头、湘西外婆菜、吉首酸肉、牛肉粉,衡阳鱼粉,栖凤渡鱼粉,东安鸡,金鱼戏莲、永州血鸭、九嶷山兔、宁远酿豆腐、腊味合蒸、姊妹团子 、宁乡口味蛇、岳阳姜辣蛇等。
</p>
</dd>
</dl>
</div>
</div>
<!-- 图片区域 -->
<div class="newsimg">
<div class="newstitle" id="pic">
<span>湘菜介绍</span>
<a href="#">更多》</a>
</div>
<div class="imgnewsbox">
<div class="tgjlx pro01">
<ul >
<li >
<div class="nr">
<a href="#">
<div class="picture"><img src="./images/infro1.jpg">
</div>
<h3>组庵鱼翅
</h3>
<p> 组庵鱼翅又叫红煨鱼翅,是湖南传统名菜。组庵鱼翅用料讲究,制作独特。需选脊翅,去粗取精;另用母鸡一只,猪前肘一个,虾仁、干贝、香菇等佐料适量备用。母鸡、猪肘同时用中火开,小火煨好取汤。
</p>
</a>
</div>
</li>
<li>
<div class="nr">
<a href="#">
<div class="picture"><img src="./images/infro2.jpg"></div>
<h3>百鸟朝凤</h3>
<p>百鸟朝凤是一道传统湘菜,象征欢聚一堂,其乐融融。选一只肥嫩母鸡宰杀,去血褪尽鸡毛,除掉嘴壳、脚皮,从颈翅之间用刀划开一寸长左右的鸡皮,取出食管、食袋、气管;再从肛门处横开一寸半长左右的口子,取出其余鸡内脏,清洗干净,这样,整个鸡的形体未遭破坏。 </p>
</a>
</div>
</li>
<li>
<div class="nr">
<a href="#">
<div class="picture"><img src="./images/infro3.jpg">
</div>
<h3>长沙麻仁香酥鸭</h3>
<p> 长沙麻仁香酥鸭是长沙特一级厨师石荫祥大胆推出的优秀之作。此菜集松软、酥脆、软嫩、鲜香于一体,深得四方宾客称赞。此道菜选良种肥鸭。烹饪时在锅内放入花生油,烧至六成热,下入麻仁鸭酥炸,面上浇油淋炸,至麻层呈金黄色时倒去油</p>
</a>
</div>
</li>
<li>
<div class="nr">
<a href="#">
<div class="picture"><img src="./images/infro4.jpg"></div>
<h3>花菇无黄蛋</h3>
<p>
花菇无黄蛋长沙的传统名菜,早在20世纪30年代即闻名遐迩。花菇无黄蛋制作的关键在于掌握火候,既要蒸熟,又不能让蛋清流出,破坏造型。蔡海云制作的无黄蛋,蛋面光滑不破,质地异常鲜嫩。顾客吃到这种没有蛋黄的鸡蛋,往往惊叹不已。
</p>
</a>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="newsmain">
<div class="newsleft" style="margin-right: 17px;">
<div class="newstitle" id="jiaoyu">
<span>湘菜攻略
</span>
<a href="#">更多》</a>
</div>
<ul>
<li><a href="#">● 史上最全湘菜古旅说我没告诉你...</a><span>2024-10-28</span></li>
<li><a href="#">● 湘菜尤重酸辣,是一个地方的风味菜 ..</a><span>2024-10-28</span></li>
<li><a href="#">● 中国粮湖南饭,6000多年了,越吃越香 ...</a><span>2024-10-28</span></li>
<li><a href="#">● 湘菜中的“辣”菜——吃辣是一种幸福感..</a><span>2024-10-28</span></li>
<li><a href="#">● 湘菜招牌之—小炒黄牛肉,这几步让它嫩而不柴,下饭一绝! .</a><span>2024-10-28</span></li>
<li><a href="#">● 火爆出圈的湘菜,你真的了解吗?..</a><span>2024-10-28</span></li>
</ul>
</div>
<div class="newsleft" >
<div class="newstitle">
<span>湘菜新闻 </span>
<a href="#">更多》</a>
</div>
<ul>
<li><a href="#">● 十大湘菜名县刚刚发布,看看有你的家乡吗?.....</a><span>2024-10-28</span></li>
<li><a href="#">● 辣椒何以风靡世界餐桌?|东西问.....</a><span>2024-10-28</span></li>
<li><a href="#">● 湘西州紧锣密鼓备战今年“沪洽周”.....</a><span>2024-10-28</span></li>
<li><a href="#">● 中国粮湖南饭,6000多年了,越吃越香.....</a><span>2024-10-28</span></li>
<li><a href="#">● 寻味“徽菜之乡” 乐享“舌尖风光”.....</a><span>2024-10-28</span></li>
<li><a href="#">● 十大湘菜名县刚刚发布,看看有你的家乡吗?.....</a><span>2024-10-28</span></li>
</ul>
</div>
</div>
</article>
<!-- 底部板块开始 -->
<footer>
<p> 版权所有:期末作业 学号是123456789 </p>
</footer>
网站css代码
.header {
width: 1100px;
margin: 0 auto;
overflow: hidden;
background-color: #fff;
overflow: hidden;
display: flex;
align-items: center;
justify-content: space-between;
}
.header img {
margin-left: 10px;
}
.banner {
overflow: hidden;
margin-bottom: 13px;
}
.banner img {
width: 100%;
}
.nav {
width: 1100px;
margin: 0 auto;
text-align: right;
height: 36px;
line-height: 36px;
background-color: #900;
}
.nav ul li {
float: left;
width: 300px;
position: relative;
text-align: center;
}
.nav ul li a {
font-size: 14px;
color: #fff;
font-weight: bold;
}
.nav ul li dl {
position: absolute;
left: 0;
top: 36px;
width: 88px;
display: none;
}
.nav ul li dl dd {
background: #86020f;
height: 36px;
}
.nav ul li dl dd a {
display: block;
height: 36px;
line-height: 36px;
text-align: center;
color: #fff;
}
.nav ul li dl dd a:hover {
background: #64030e;
color: #fff;
}
/* 导航结束 */
.main {
width: 1100px;
margin: 0 auto;
padding: 22px;
box-sizing: border-box;
background-color: #fff;
}
.imgbox {
overflow: hidden;
margin-bottom: 15px;
}
.artbox {
overflow: hidden;
}
.artbox dl {
overflow: hidden;
}
.artbox dl dt {
border: 1px solid #dbdbdb;
background-color: #f0f0f0;
padding: 10px;
height: 230px;
width: 360px;
float: left;
}
.artbox dl dt video {
height: 230px;
width: 360px;
object-fit: cover;
}
.artbox dl dd {
width: 665px;
padding: 0px 0px 30px 30px;
float: left;
line-height: 21px;
box-sizing: border-box;
}
.artbox dl dd h3 {
line-height: 32px;
text-align: center;
font-size: 18px;
}
.artbox dl dd p {
margin-bottom: 10px;
}
.newstitle {
background-color: #5a0a01;
height: 42px;
line-height: 42px;
color: #fff;
padding: 0 15px;
font-size: 16px;
}
.newbox {
width: 268px;
float: right;
border: 1px solid #dbdbdb;
}
.newstitle a {
float: right;
color: #fff;
font-size: 12px;
}
.newbox ul {
padding: 10px 20px 10px 12px;
}
.newbox ul li {
line-height: 24px;
height: 24px;
overflow: hidden;
}
.newbox ul li a {
width: 150px;
overflow: hidden;
display: block;
float: left;
}
.newbox ul li span {
float: right;
}
.newsmain {
overflow: hidden;
margin-bottom: 20px;
}
.newsleft {
width: 517px;
float: left;
border: 1px solid #dbdbdb;
background-color: #f0f0f0;
}
.newsleft .newstitle {
background-color: #ddd;
color: #000;
}
.newsleft .newstitle a {
color: #000;
}
.newsleft .newstitle span {
background: url(../images/play.jpg) 0 center no-repeat;
padding-left: 20px;
display: block;
float: left;
}
.newsleft ul {
padding: 20px 30px;
}
.newsleft ul li {
height: 30px;
line-height: 30px;
border-bottom: 1px dotted #bbbbbb;
}
.newsleft ul li span {
float: right;
}
/* 最新动态结束 */
footer {
text-align: center;
color: #fff;
padding: 15px 0;
line-height: 30px;
background-color: #900;
width: 1100px;
margin: 0 auto;
}
footer p a {
color: #fff;
margin: 0 5px;
}
/* 底部版权结束 */
/* 注册也左边图片结束 */
.sub-cont {
overflow: hidden;
}
网站js代码
实时显示当前日期时间
function show_time() {
var time = new Date();
var year = time.getFullYear();
var month = time.getMonth() + 1;
var day = time.getDate();
var hours = time.getHours();
var min = time.getMinutes();
var sec = time.getSeconds();
if (hours >= 0 && hours <= 10) {
text = `早上`;
} else if (hours > 10 && hours <= 14) {
text = `中午`;
} else if (hours > 14 && hours <= 18) {
text = `下午`;
} else if (hours > 18 && hours <= 24) {
text = `晚上`;
}
document.getElementById('timss').innerHTML =
'<p>' +
year +
'-' +
month +
'-' +
day +
' ' +
text +
hours +
':' +
min +
':' +
sec +
'</p>';
}
setInterval('show_time()', 1000);