大学生WEB前端HTML网页期末作业,静态湘菜美食网站作业—js动态效果

黑白说程序

已于 2024-09-04 17:43:50 修改

阅读量394

点赞数

分类专栏： HTML网页作业美食文章标签：前端 html 课程设计 html5 css javascript 美食

于 2024-09-04 17:41:36 首次发布

本文链接：https://blog.csdn.net/qq_19465203/article/details/141899731

版权

HTML网页作业同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

美食

4 篇文章 0 订阅

订阅专栏

网站简介

网站介绍：湘菜美食网站,一共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 +
    '&nbsp;&nbsp;' +
    text +
    hours +
    ':' +
    min +
    ':' +
    sec +
    '</p>';
}
setInterval('show_time()', 1000);

黑白说程序

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
大学生WEB前端HTML网页期末作业,静态湘菜美食网站作业—js动态效果

网站介绍：湘菜美食网站,一共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，
复制链接

扫一扫

专栏目录