Html+Css:美食网页制作(大学生期末大作业详解)

小涛砸

已于 2023-11-22 21:16:36 修改

阅读量5.7k

点赞数 41

分类专栏： html+css静态项目文章标签： html css 美食 html5 前端前端框架

于 2023-11-20 11:33:18 首次发布

本文链接：https://blog.csdn.net/A0123abc_/article/details/134501173

版权

html+css静态项目专栏收录该内容

1 篇文章 4 订阅

订阅专栏

本文作者分享了学习HTML和CSS时制作的四川美食首页，介绍了页面的结构（header,content,footer）和CSS布局，包括导航栏、轮播图、内容区块（川菜介绍、热点、经典菜品和链接）的设计。

摘要由CSDN通过智能技术生成

前言

这是我前几周学html+css时写的简单四川美食首页界面,等我JS学完后会再加以改进,到时重写改一遍,我在这篇详细介绍了首页的总体框架和布局,对于具体css样式我并未做详细讲解,底端附录了我的代码,有需要的可以进行参考.

总体框架

由三个div组成（.header .content .footer），header部分就只是一个标题列表+轮播图；comtent部分是川菜结束+经典菜品+友情链接组成。footer是最底端部分.

总体效果图

在这里插入图片描述

.header

顶部导航栏是用table标签内嵌a标签(也可以用li标签内嵌a标签来写),导航栏下边是由四张图片组成轮播图，第二张图.header大纲
在这里插入图片描述

.content

川菜介绍用一个div左浮,川菜热点用一个div右浮,经典作品和友情链接是个div.
川菜热点:用li 标签里面包了一个span和文字,span里面写数字并为其设置样式，
经典菜品和友情链接用table标签,不同的是前者文字用span后者文字用包裹

在这里插入图片描述

.footer

.footer内容比较简单，具体代码如下：
在这里插入图片描述

在这里插入图片描述

首页.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="主页.css" />
  </head>
  <body>
    <div class="header">
      <div class="nav">
        <div class="nav-left"><span>四川美食</span></div>
        <div class="nav-right">
          <table class="table1">
            <tr>
              <td><a href="主页.html"">首页</a></td>
              <td><a href="川菜介绍.html">川菜介绍</a></td>
              <td><a href="经典菜品.html">经典川菜</a></td>

              <td><a href="菜谱大全.html">菜谱大全</a></td>
              <td><a href="联系我们.html">联系我们</a></td>
            </tr>
          </table>
        </div>
      </div>
      <div id="screen">
        <div id="tv">
          <img src="images/01.jpg" alt="" />
          <img src="images/02.jpg" alt="" />
          <img src="images/03.jpg" alt="" />
          <img src="images/04.jpg" alt="" />
        </div>
      </div>
    </div>
    <div class="content">
      <div class="content-left">
        <div>
          <span class="span1">About</span><span class="span2">川菜介绍</span>
        </div>

        <img src="images/06.jpg" alt="" />
        <div class="right">
          <p>
            川菜是中国汉族传统的四大菜系之一、中国八大菜系之一。川菜有着本土川菜与海派川菜之分，本土川菜中，四川菜系又包括川味菜肴、面点小吃、火锅等。
          </p>
          <p>
            川菜分为三派：蓉派（上河帮）、渝派（下河帮）、盐帮派（小河帮）。上河帮川菜即以川西成都示乐山为中心地区的川菜；小河帮川菜即以川南自贡为中心的盐帮菜，同时包括宜宾菜、泸州菜和内江菜。
          </p>
          <p>
            下河帮川菜即以老川东地区达州菜、重庆菜、万州菜为代表的江湖菜。三者共同组成川菜三大主流地方风味流派分支菜系◇代表川菜发展最高艺术水平
          </p>
        </div>
      </div>
      <div class="content-right">
        <div>
          <span class="span1">Hot</span><span class="span2">川菜热点</span>
        </div>

        <ul>
          <li>
            <span style="background-color: red">1</span
            >第十三届中国泡菜食品国际博览会在眉山．
          </li>
          <li>
            <span style="background-color: aqua">2</span
            >第二届中国餐饮B2B产业大会在成都举行南充举办
          </li>
          <li>
            <span style="background-color: yellowgreen"> 3</span
            >三国文化特色美食厨艺创新大赛
          </li>
          <li>
            <span style="background-color: rgba(0, 0, 0, 0.37)">4</span
            >四川启动编撰全国首部《中国川派餐饮丛
          </li>
          <li>
            <span style="background-color: rgba(0, 0, 0, 0.37)">5</span
            >中国川派餐饮丛．饕餮盛宴落户雅安
          </li>
          <li>
            <span style="background-color: rgba(0, 0, 0, 0.37)">6</span
            >世界川菜大会摆出火锅宴川渝名厨比拼川菜
          </li>
          <li>
            <span style="background-color: rgba(0, 0, 0, 0.37)">7</span>
            第五届世界川菜大会将在四川雅安举行
          </li>
        </ul>
      </div>
    </div>
    <div class="content-center">
      <span class="span1">classic</span><span class="span2">经典菜品</span>
      <table>
        <tr>
          <td><img src="images/meishi1.jpg" alt="" /></td>
          <td><img src="images/meishi2.jpg" alt="" /></td>
          <td><img src="images/meishi3.jpg" alt="" /></td>
          <td><img src="images/meishi4.jpg" alt="" /></td>
        </tr>
        <tr>
          <td><span class="span3">夫妻肺片</span></td>
          <td><span class="span3">担担面</span></td>
          <td><span class="span3">廖排骨</span></td>
          <td><span class="span3">赖汤元</span></td>
        </tr>
        <tr>
          <td><span class="span4">味道麻辣爽口</span></td>
          <td><span class="span4">“中国十大面条”之一</span></td>
          <td><span class="span4">全国著名的卤食品牌</span></td>
          <td><span class="span4">皮粑绵糯、营养丰富</span></td>
        </tr>
        <tr>
          <td><img src="images/meishi5.jpg" alt="" /></td>
          <td><img src="images/meishi6.jpg" alt="" /></td>
          <td><img src="images/meishi7.jpg" alt="" /></td>
          <td><img src="images/meishi8.jpg" alt="" /></td>
        </tr>
        <tr>
          <td><span class="span3">麻婆豆腐</span></td>
          <td><span class="span3">龙抄手</span></td>
          <td><span class="span3">口水鸡</span></td>
          <td><span class="span3">串串香</span></td>
        </tr>
        <tr>
          <td><span class="span4">口味独特，口感顺滑</span></td>
          <td><span class="span4">龙抄手是成都市有名的传统小吃</span></td>
          <td><span class="span4">佐料丰富，集麻辣鲜香嫩爽于一身。</span></td>
          <td><span class="span4">草根美食最大众化的体现</span></td>
        </tr>
      </table>
    </div>
    <div class="content-footer">
      <span class="span1">Link</span>
      <span class="span2">友情链接</span>
      <table>
        <tr>
          <td><a href="https://www.meishichina.com/">美食天下</a></td>
          <td><a href="https://www.meishij.net/">美食杰</a></td>
          <td><a href="https://www.xiachufang.com/">中国美食</a></td>
          <td><a href="https://www.douguo.com/">网学厨艺</a></td>
        </tr>
      </table>
    </div>
    <div class="footer">
      <span>copyRight&copy;四川美食</span>
    </div>
  </body>
</html>

首页.css部分

<style>
body {
  background-color: rgba(49, 13, 5, 0.082);
  }
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  .header {
    width: 1500px;
    height: 532px;
   background-color: rgba(255, 51, 0, 0.96);
    margin: 0 auto;
  }
  .nav{
   height: 30px;
   line-height: 30px;
  }
  .nav span {
display: inline-block;
height: 20px;
line-height: 20px;
    font-size: 20px;
    color: white;
   padding: 4px;
    line-height: 20px;
    font-family: "微软雅黑";
    font-weight: bold;
  }
  .nav-left {
    float: left;
    margin-left: 100px;
  }
  .nav-right {
    float: right;
    margin-right: 100px;
  }
  a {
    text-decoration: none;
    font-size: 15px;
    color: white;
    width: 70px;
    height: 20px;
    line-height: 20px;
    margin-left: 100px;
  }
  #screen {
    width: 1500px;
    height: 500px;
    overflow: hidden;
  }
  #tv {
    width: 6000px;
    height: 500px;
    animation: swith 6s ease-out infinite;
  }
  #tv > img {
    /* margin-top: 10px; */
    width: 1500px;
    height: 500px;
    float: left;
    margin-left: 0;
    border-radius: 10px;
  }
  @keyframes swith {
    0%,
    20% {
      margin-left: 0;
    }
    25%,
    45% {
      margin-left: -1500px;
    }
    50%,
    70% {
      margin-left: -3000px;
    }
    75%,
    100% {
      margin-left: -4500px;
    }
  }
.content{
  /* background-color: rgba(49, 13, 5, 0.082); */
  width: 100%;
  height:400px;

}
  .content-left {
    float: left;
    border-radius: 10px;
    background: white;
    margin-left:150px;
    margin-top: 20px;
    width: 800px;
    height: 380px;
  
  }
 

  .content-left img {
    width: 400px;
    height: 300px;
    float: left;
    padding: 5px;
    margin-left: 5px;
    border-radius: 10px;
  }

  p {
    text-indent: 2em;
    color: rgba(0, 0, 0, 0.577);
    font-size: 13px;
  }
  .right {
    float: right;
    width: 390px;
    height: 300px;
    padding: 5px;
  }
  .content-right {
    border-radius: 10px;
    float: right;
    margin-right:150px;
    width: 400px;
    height: 380px;
    margin-top: 20px;
    background: white;
  }

  
 ul li {
    list-style: none;
    height: 30px;
    width:400px;
    padding: 5px;
  margin-top: 10px;
  }
  ul>li>span {
    display: inline-block;
    width: 20px;
    height: 30px;
    line-height: 30px;
    color: white;
    text-align: center;
   
  }
  .span1{
    color: red;
    font-size: 18px;
    font-weight: bold;
    display: inline-block;
    margin: 10px;
  }
  .span2 {
    display: inline-block;
    margin: 10px;
    color: black;
    font-size: 18px;
    font-weight: bold;
  }
  .content-center{
    margin: 0 auto;
    background: white;
    margin-top: 20px;
    width: 1200px;
    height: 600px;
    border-radius: 10px;
  }
  .content-center img{
    width: 260px;
    margin: 20px;
    height: 160px;
    display: inline-block;
    border-radius: 10px;
  }
  .span3{
    color: black;
    font-size: 18px;
    margin-left: 20px;
  }
  .span4{
    color: rgba(0, 0, 0, 0.433);
    font-size: 18px;
    margin-left: 20px;
  }

  .content-footer{
    margin: 0 auto;
    background: white;
    margin-top: 20px;
    width: 1200px;
    height: 100px;
    border-radius: 10px;
  }
  .content-footer table tr td{
    width: 100px;
    height: 30px;
    line-height: 30px;
    font-size: 18px;
    padding-left: 10px;
  }
  .content-footer table a{
    display: inline-block;
    width: 100px;
    height: 30px;
    color: black;
    font-size: 18px;
  }
  .footer{
    width: 100%;
    height:30px;
    line-height: 30px;
    background-color: rgba(22, 18, 17, 0.692);
  text-align: center;
  margin-top: 20px;

  }
  .footer span{
    color: white;
  }
</style>

总结

要想把一个完整的网页做出来，首先就是把不同div之间的布局写出来，取类名时要有根据，不要取什么1t、2t、t3等无意义名字，然后再写css具体样式.我花了大概半天的时间把首页做出来,后续还有几个页面,我会另写一篇文章来介绍.

小涛砸

关注

41
点赞
踩
142

收藏

觉得还不错? 一键收藏
5
评论
Html+Css:美食网页制作(大学生期末大作业详解)

由三个div组成（.header .content .footer），header部分就只是一个标题列表+轮播图；comtent部分是川菜结束+经典菜品+友情链接组成。footer是最底端部分.顶部导航栏是用table标签内嵌a标签(也可以用li标签内嵌a标签来写),导航栏下边是由四张图片组成轮播图，第二张图.header大纲川菜介绍用一个div左浮,川菜热点用一个div右浮,经典作品和友情链接是个div.川菜热点:用li 标签里面包了一个span和文字,span里面写数字并为其设置样式，经典
复制链接

扫一扫