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

最新推荐文章于 2024-11-10 22:45:39 发布

黑白说程序

最新推荐文章于 2024-11-10 22:45:39 发布

阅读量1.1k

点赞数 17

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

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

版权

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

8 篇文章 0 订阅

订阅专栏

美食

4 篇文章 0 订阅

订阅专栏

网站简介

网站介绍：成都美食网站,一共5个页面，分别包括首页、二级页面包括美食信息、美食评论、登录和注册4个页面，其中美食评论页面，用户提交评论可以通过js将留言信息，写入到本地localstorage中，然后遍历读取显示到页面上，并可以点击删除某条评论

网站布局：网站使用div+css布局页面，网站头部使用js制作banner动态图片切换，网站使用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效果：用户输入标题和留言内容，点击按钮后将留言以列表项（<li>）的形式添加到页面上。每个留言项包含一个标题、留言内容和一个删除链接。同时，还有一个功能允许用户通过点击列表项旁边的特定区域来删除该留言。

网站编辑器：网站是最简单的页面布局，任何编辑器都可以打开网站代码进行编辑，包括Dreamweaver，vs code，HBuilds，sublime，记事本等软件都可以进行编辑

网站截图

网站div代码


  <header class="header">
    <div class="top">
      <div class="logo"> <a href="#"><img src="images/logo.png"></a> </div>
      <div class="logotips">
        <img src="images/tips.png" height="70">
      </div>
    </div>
    <!-------导航开始-------------------->
    <div class="navbox">
      <nav class="nav">
        <ul>
          <li> <a href="index.html">首页</a> </li>
          <li> <a href="goods.html">美食信息</a> </li>
          <li> <a href="talk.html">美食评论</a> </li>
          <li> <a href="login.html">用户登陆</a> </li>
          <li> <a href="res.html">用户注册</a> </li>
          
          

        </ul>
        <div class="sea_box">
          <form name="dataForm" class="search" action="#" method="post">

            <input class="notxt" value="站内搜索" name="query" id="query" onfocus="if(value==defaultValue){value='';}"
              onblur="if(!value){value=defaultValue;}"
              onclick="if(this.value==''){this.value='';this.form.query.style.color='#fff'}" style="color:#fff;"
              type="text">
            <input class="notxt1" name="Submit" value="" type="submit">
          </form>
        </div>
      </nav>

      <!-------导航结束-------------------->

    </div>
  </header>

  <section class="flexslider banner">
    <ul class="slides">
      <li><a><img src="images/banner1.jpg"></a></li>
 
    </ul>
  </section>
 
  <main class="goodbox">
    <div class="menu">
      <h3>推荐美食</h3>
      <p>- 分享成都一生中必吃美食 -</p>
    </div>
    <ul>
      <li>
        <div class="goods">
          <div class="goodsimg"><a href="#"><img src="./images/img1.png" /></a></div>
          <h3> <a href="#">
            担担面 </a> </h3>
          <p>
          四川成都和自贡著名的地方传统面食小吃，是四川十大美食之一，据说源于挑夫们在街头挑着担担卖面。担担面是将面粉擀制成面条，煮熟，舀上炒制的肉末而成。...
          </p>

        </div>
      </li>
      <li>
        <div class="goods">
          <div class="goodsimg"><a href="#"><img src="./images/img2.png" /></a></div>
          <h3> <a href="#">
            串串香 </a> </h3>
          <p>
            四川成都，不仅是四川地区的特色传统小吃之一，也是草根美食最大众化的体现，串串香实际上是火锅的另一种形式，所以人们又往往称其为小火锅。...
          </p>

        </div>
      </li>
      <li>
        <div class="goods">
          <div class="goodsimg"><a href="#"><img src="./images/img3.png" /></a></div>
          <h3> <a href="#">
            鸡丝凉面 </a> </h3>
          <p>
            鸡丝凉面是四川成都著名的传统小吃，历史悠久，广泛流传于成都等四川等地，在四川全省有很大影响，被成都市政府评为“成都市名小吃”。.
          </p>

        </div>
      </li>
      <li>
        <div class="goods">
          <div class="goodsimg"><a href="#"><img src="./images/img4.png" /></a></div>
          <h3> <a href="#">
            棍棍面 </a> </h3>
          <p>
            四川省成都市很有名的一道地方特色小吃，因为重用复制酱油、口味回甜而得名。甜水面的面条如筷子头一般粗，入口很有嚼劲，浇上花椒油红油，调入复制酱油
          </p>
        </div>
      </li>
      <li>
        <div class="goods">
          <div class="goodsimg"><a href="#"><img src="./images/img5.png" /></a></div>
          <h3> <a href="#">
            鸳鸯火锅 </a> </h3>
          <p>
            　　鸳鸯火锅，是以传统毛肚火锅的红汤卤和宴席菊花火锅的清汤卤，两者合并改制而成的四川创新火锅。此品原名“双味火锅”。
          </p>

        </div>
      </li>
      <li>
        <div class="goods">
          <div class="goodsimg"><a href="#"><img src="./images/img6.png" /></a></div>
          <h3> <a href="#">
            钵钵鸡 </a> </h3>
          <p>
            ，钵外面是画着红黄相间的瓷质龙纹，钵内盛放配以麻辣为主的佐料，菜品在特珠殊加工后用钵钵鸡签串制，晾冷浸于各种口味的佐料中，除味道悠长外更添情趣盎然。..
          </p>

        </div>
      </li>
      <li>
        <div class="goods">
          <div class="goodsimg"><a href="#"><img src="./images/img7.png" /></a></div>
          <h3> <a href="#">
            川北凉粉 </a> </h3>
          <p>
            　川北凉粉清朝末年创立于南充。创始人谢天禄在南充渡口搭棚卖凉粉，其凉粉细嫩清爽，佐料香辣味浓，逐渐卖出了名气，谢家便世代相传专卖凉粉，.
          </p>

        </div>
      </li>
      <li>
        <div class="goods">
          <div class="goodsimg"><a href="#"><img src="./images/img8.png" /></a></div>
          <h3> <a href="#">
            回锅肉 </a> </h3>
          <p>
            　陈麻婆豆腐是由国家命名的一家《中华老字号》老牌名店。 清朝同治初年(1862)，开业于成都北郊的万福桥。原名陈兴盛饭铺，主厨为陈春富之妻。
          </p>
        </div>
      </li>
    </ul>
  </main>
  <div class="newsbox">
    <div class="menu">
      <h3>美食新闻</h3>
      <p>- 最新美食新闻、实时发布 -</p>
    </div>
    <div class="newsindex">
      <ul>
        <li>
          <img src="./images/pic1.png" />
          <h3><a href="#"> 安排上了！你想要的地道港味美食 </a> </h3>
          <h4> 香港不仅是金融、经济、法治等领域的高地更有着“美食天堂”的美誉,比如像时尚兰桂坊 港味铜锣湾 中环苏豪区等等 饮食文化横贯中西...</h4>
        </li>
        <li>
          <img src="./images/pic2.png" />
          <h3><a href="#"> 展现欧洲食品和饮料的多彩成都</a> </h3>
          <h4> 欧盟 "源自欧洲的色彩 "活动旨在向中国大陆地区全面推广欧盟的各类安全、优质的农产品。6月2日于西安举办了"欧盟专业餐饮西安品鉴会...</h4>
        </li>
        <li>
          <img src="./images/pic3.png" />
          <h3><a href="#"> 香港人均寿命凭啥居全球第一？观察他们饮食，答案一目了然</a> </h3>
          <h4> 从古至今，长寿健康一直是人们追求的终极目标，长久以来，人们都以为全球人均寿命最高的国家是日本，然而根据最新研究数据表明，香港人平均寿命达到了83.9岁，超2岁的日本，成为了成都第一.</h4>
        </li>
        <li>
          <img src="./images/pic4.png" />
          <h3><a href="#"> 最美遇见你!在美食的成都里邂逅一段浪漫情缘 </a> </h3>
          <h4> 5月22日,由武汉广播电视台(集团)、武汉联投置业有限公司共同打造的全媒体交友真人秀节目《最美遇见你》,为单身男女量身打造了一场精彩的美食情缘交友派对,们大呼“过瘾”。...</h4>
        </li>
      </ul>
    </div>

网站css代码


.nav {
  width: 1100px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}

.nav ul {
  display: flex;
  justify-content: center;
  margin-right: 150px;
}

.nav ul li {
  width: 96px;
  text-align: center;
  padding: 0 1em;
}

.nav ul li a {
  font-size: 17px;
  color: #fff;
}

.sea_box {
  border-radius: 5px;
  float: right;
  height: 34px;
  margin: 9px 10px 0 0;
  width: 238px;
  background-color: #666;
}

.notxt {
  width: 203px;
  float: left;
  height: 34px;
  line-height: 34px;
  border: none;
  background: none;
  text-indent: 10px;
}

.notxt1 {
  background: url(../images/search.png) center center no-repeat;
  width: 34px;
  height: 34px;
  cursor: pointer;
  border: none;
  float: left;
}

.banner {
  width: 100%;
  margin: 0 auto 20px;
  overflow: hidden;
  position: relative;
  overflow: hidden;
}

.banner li a img {
  width: 100%;
}

.news_img {
  height: 400px;
  width: 420px;
  float: left;
}

.titlehote h3 {
  border-bottom: 1px solid #dbdbdb;
  padding-bottom: 10px;
  margin-bottom: 15px;
  font-weight: bold;
  font-size: 16px;
}
.menu {
  padding: 30px 0;
}

.menu h3 {
  text-align: center;
  font-size: 20px;
  margin-bottom: 10px;
}

.menu p {
  text-align: center;
  color: #888;
  margin-bottom: 15px;
}

.goodbox {
  width: 1100px;
  margin: 0 auto 30px;
  overflow: hidden;
}

.goodbox ul {
  overflow: hidden;
}

.goodbox ul li {
  width: 25%;
  float: left;
  height: 320px;
  overflow: hidden;
}

.goodbox ul li h3,
.goodbox ul li p {
  padding: 0 10px;
  line-height: 24px;
}

.goodbox ul li h3 {
  height: 40px;
  line-height: 40px;
  overflow: hidden;
}

.goodbox ul li p {
  padding-bottom: 10px;
}

.goodbox ul li h3 a {
  color: #212529;
  font-size: 18px;
}

.goods {
  margin: 0 20px 0 0;
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 8px;
  overflow: hidden;
}

.goodsimg {
  height: 150px;
  overflow: hidden;
}

.goodsimg img {
  width: 100%;
  transition: all 0.8s ease;
}

.goodsimg img:hover {
  transform: scale(1.05);
}

.newsbox {
  background-color: #f8f9fa;
  width: 100%;
  overflow: hidden;
}

.newsindex {
  width: 1100px;
  margin: 0 auto;
}

.newsindex ul {
  overflow: hidden;
}

.newsindex ul li {
  overflow: hidden;
  margin-bottom: 20px;
  width: 50%;
  float: left;
}

.newsindex ul li img {
  float: left;
  width: 200px;
  height: 130px;
  margin-right: 15px;
}

.newsindex ul li h3 {
  line-height: 36px;
  padding-right: 20px;
  font-size: 16px;
  height: 36px;
  overflow: hidden;
}

.newsindex ul li h4 {
  font-weight: normal;
  padding-right: 20px;
  color: #666;
  line-height: 21px;
}

.newsdetailbox {
  width: 1100px;
  margin: 0 auto;
  overflow: hidden;
  padding-top: 30px;
}

.newsdetail {
  width: 750px;
  margin: 0 0;
  float: left;
}

.newsdetail h3 {
  text-align: center;
  font-size: 20px;
  padding-bottom: 10px;
}

.newsdetail h4 {
  text-align: center;
  font-weight: normal;
  padding-bottom: 15px;
  color: #666;
  border-bottom: 1px solid #dbdbdb;
  margin-bottom: 20px;
}

.center {
  text-align: center;
}

.newsintro {
  line-height: 32px;
  font-size: 16px;
}

.foot {
  background-color: #f1f1f1;
  text-align: center;
  padding: 30px 0;
}

.main {
  width: 1100px;
  margin: 30px auto;
  overflow: hidden;
}

.newsimg ul li {
  width: 140px;
  float: left;
  margin-right: 10px;
  float: left;
}

.newsimg ul li:nth-child(even) {
  margin-right: 0;
}

.newsimg ul li img {
  width: 100%;
  height: 90px;
}

.newsimg ul li p {
  text-align: center;
  line-height: 40px;
}

.newsdetial {
  line-height: 34px;
}

.goodmenu {
  border-bottom: 1px solid #dbdbdb;
  font-size: 18px;
  padding-bottom: 10px;
  margin-bottom: 20px;
}

.goodbig {
  min-height: 600px;
  line-height: 36px;
  font-size: 16px;
}

.goodsleft {
  width: 220px;
  float: left;
  margin-right: 40px;
}

.goodlist {
  width: 780px;
  float: left;
}

.goodlist ul li {
  width: 33%;
  margin-bottom: 20px;
}

.goodlist ul li h3 {
  height: 36px;
  line-height: 36px;
  overflow: hidden;
}

.goodlist ul li h3 a {
  font-size: 14px;
}

.numzero {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  line-height: 400px;
}

.goodsleft ul li {
  line-height: 38px;
  text-indent: 20px;
}

.goodsleft ul li a {
  font-size: 16px;
  color: #444;
  display: block;
}

.goodsleft ul li a:hover {
  background-color: #f1f1f1;
}

.logintips {
  background: url(../images/login.png) center center no-repeat;
  height: 175px;
  margin-bottom: 20px;
  overflow: hidden;
}

.logintips p {
  width: 1000px;
  margin: 0 auto;
  line-height: 175px;
  color: #fff;
  font-size: 21px;
}

.form-group {
  width: 540px;
  margin: 0 auto 30px;
}

.form-group label {
  font-size: 16px;
  margin-bottom: 10px;
  display: block;
}

.form-control {
  display: block;
  width: 100%;
  height: 30px;
  padding: 2px;
  font-size: 14px;
  font-weight: 400;
  line-height: 30px;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 3px;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.btn {
  display: inline-block;
  font-weight: 400;
  color: #212529;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  color: #fff;
  background-color: #138496;
  padding: 4px 10px;
  font-size: 14px;
  line-height: 1.5;
  border-radius: 3px;
}

.usertipsmain {
  width: 1100px;
  margin: 0 auto;
  text-align: right;
}

.usertipsbox {
  background: #f8f8f8;
  line-height: 38px;
  height: 38px;
}

.usertipsbox a {
  float: right;
  color: #666;
}

.page {
  text-align: center;
  line-height: 40px;
  width: 564px;
  height: 40px;

  border-radius: 2px;
  margin: 0 auto;
}

.page a,
.page span {
  color: #444;
  height: 40px;
  padding: 0 14px;
  display: inline-block;
}

.page a.cur {
  color: #fff;
  background: #4ea2f6;
}

.page a.nextpage {
  border: none;
}

.loginform {
  width: 1000px;
  height: 547px;
  margin: 0 auto;
}

.lbanner {
  width: 580px;
  height: 386px;
  background: url(../images/loginbg.png) no-repeat;

  margin-top: 70px;
  float: left;
}

.slogan {
  width: 30px;
  height: 300px;
  font-size: 24px;
  color: #f9dddd;
  text-align: center;
  line-height: 30px;
  margin: 65px 0 0 30px;
}

.login_form {
  width: 368px;
  height: 378px;
  border: 1px solid #c6c6c5;
  background-color: #fff;
  margin-top: 50px;
  float: right;
}

.login_title {
  height: 60px;
  width: 308px;
  margin: 10px auto;
  border-bottom: 1px solid #e0e0e0;
}

.login_title a {
  width: 308px;
  line-height: 20px;
  font-size: 18px;
  color: #900;
  text-align: center;
  float: left;
  margin-top: 20px;
}

.form_input {
  width: 308px;

  margin: 20px auto;
  position: relative;
}
.form_input p {
  font-size: 14px;
  text-align: right;
  padding-bottom: 20px;
}

.form_con .cur {
  display: block;
}

.bar_code_con {
  width: 167px;
  height: 172px;
  margin: 0px auto;
}

.bar_code_tip {
  text-align: center;
  margin-top: 10px;
  font-size: 12px;
}

.third_party {
  border-top: 1px solid #e0e0e0;
  margin-top: 30px;
}

.qq_login,
.weixin_login,
.register_btn {
  float: left;
  line-height: 30px;
  margin-left: 15px;
  margin-top: 7px;
  color: #666;
  font-size: 12px;
  text-indent: 22px;
  background: url(../images/QQ-weixin.png) left 7px no-repeat;
}

.qq_login:hover,
.weixin_login:hover,
.register_btn:hover {
  color: #e3101e;
  text-decoration: underline;
}

.weixin_login {
  background-position: left -35px;
}

.register_btn {
  background: url(../images/icons02.png) left 9px no-repeat;
  float: right;
  margin-right: 15px;
}

.name_input,
.pass_input,
.cpass_input {
  width: 306px;
  height: 36px;
  border: 1px solid #e0e0e0;

  outline: none;
  font-size: 14px;
  text-indent: 10px;
  position: relative;
  left: 0;
  top: 0;
  margin-bottom: 20px;
}

网站JS实现留言增查改删代码

//点击发布按钮，获取文本域中的文本，给下面新创建li中的值
    var title = document.querySelector('#title')
    var text = document.querySelector('textarea')
    var btn = document.querySelector('#btn')
    var ul = document.querySelector('#tlakbox')
    var first = document.querySelector('#first')
    first.onclick = function () {
      ul.removeChild(this.parentNode.parentNode)
     }
    //当按下按钮后就创建新的li元素,放到ul的后面
    btn.onclick = function () {
      //创建li元素   因为是每按一次按钮，下面就会添加一个li，需要用到循环
      console.log(text.value);
      if (title.value != '' && text.value != '') {
        var li = document.createElement('li')    //li里面创建一个p放内容


        ul.insertBefore(li, ul.children[0])

        //添加节点
        //赋值li里面的内容
        li.innerHTML = "<h3>" + title.value + "<a class='del' href='javascript:;'>删除</a></h3><p>" + text.value + "</p>"

        //按下按钮后，文本框里面的值要清空
        text.value = ''

        var as = document.querySelectorAll('.del')
        for (var i = 0; i < as.length; i++) {
          console.log(as[i]);
          as[i].onclick = function () {
            console.log(this.parentNode.parentNode);
            ul.removeChild(this.parentNode.parentNode)
          }
        }
      } else {
        alert('留言内容不能为空');
      }

    }