HTML5期末大作业：美食主题网站设计——美食主题(6页) HTML+CSS+JavaScript 学生dreamweaver网页设计作业成品

常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!

文章目录

  • HTML5期末大作业：美食主题网站设计——美食主题(6页) HTML+CSS+JavaScript 学生dreamweaver网页设计作业成品
  • 一、作品展示
  • 二、文件目录
  • 三、代码实现
  • 四、获取更多源码

一、作品展示






二、文件目录

三、代码实现


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/css.css" type="text/css" rel="stylesheet"/>
<title>西二</title>
</head>

<body>
<div class="con">
  <div class="head">
    <div class="logo"><a href="#"><img src="images/logo.png" /></a></div>
    <div class="cart">
      <ul>
        <li><img class="fl" src="images/c1.png" /><a href="#.html">购物车中共有0个商品</a> </li>
        <li><img class="fl pt3" src="images/c2.png" /><a href="#.html">去结算</a> </li>
      </ul>
    </div>
    <!-----------------end cart--------------------->
    <div class="nav">
      <ul>
        <li><a href="#.html">首页</a> </li>
        <li><a href="#.html">美食世界</a>
          <dl>
            <dd><a href="#" >中餐</a></dd>
            <dd><a href="#">西餐</a> </dd>
          </dl>
        </li>
        <li><a href="#.html">美食地理</a>
          <dl>
            <dd><a href="#">餐厅介绍</a></dd>
            <dd><a href="#">餐厅排行</a></dd>
            <dd><a href="#">厨师排行</a></dd>
          </dl>
        </li>
        <li><a href="#.html">美食DIY </a>
          <dl>
            <dd><a href="#">创意料理</a></dd>
            <dd><a href="#">食谱介绍</a></dd>
          </dl>
        </li>
        <li><a href="#.html">食材库 </a>
          <dl>
            <dd><a href="roulei.html">肉  类</a></dd>
            <dd><a href="shucai.html">蔬菜类</a></dd>
            <dd><a href="shuiguo.html">水果类 </a></dd>
            <dd><a href="haixian.html">海鲜类 </a></dd>
            <dd><a href="ruzhipin.html">乳制品 </a></dd>
            <dd><a href="qita.html">其  它 </a></dd>
          </dl>
        </li>
        <li style="margin-left:250px;"><a href="#.html">关于我们</a>
          <dl>
            <dd><a href="#">简介</a></dd>
            <dd><a href="#">联系我们</a></dd>
          </dl>
        </li>
      </ul>
    </div>
    <!-----------------end nav--------------------->
    <div class="search"><a href="#"><img class="fl" src="images/search.png" /></a>
      <div class="hot_search">
        <ul>
          <li><a href="#.html">热门搜索：</a> </li>
          <li><a href="#.html">牛肉</a> </li>
          <li><a href="#.html">鲜虾</a></li>
          <li><a href="#.html">咖喱</a></li>
          <li><a href="#.html">海鲜片 </a></li>
          <li><a href="#.html">鱿鱼丝 </a></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="clear"></div>
  <!-----------------end head--------------------->
  <div class="main">
    <div class="main_list">
      <h2>商品分类</h2>
      <div class="clear"></div>
      <ul>
        <li><a href="roulei.html">肉  类</a></li>
        <li><a href="shucai.html">蔬菜类</a></li>
        <li><a href="shuiguo.html">水果类 </a></li>
        <li><a href="haixian.html">海鲜类 </a></li>
        <li><a href="ruzhipin.html">乳制品 </a></li>
        <li><a href="qita.html">其  它 </a></li>
      </ul>
    </div>
    <!-----------------end main_list--------------------->
    <div class="main_right">
      <div class=" m10"><a href="#"><img  src="images/ruzhipin.png" /></a></div>
    </div>
    <div class="clear"></div>
  </div>
  <!-----------------end main--------------------->
  
  <div class="foot">
    <ul>
      <li><a href="#.html">购物指南</a> </li>
      <li><a href="#.html">配送说明</a></li>
      <li><a href="#.html">支付方式</a></li>
      <li><a href="#.html">常见问题 </a></li>
      <li><a href="#.html">联系我们 </a></li>
      <li><a href="#.html">招聘信息 </a></li>
      <li><a href="#.html">请您留言 </a></li>
      <li><a href="#.html">友情链接 </a></li>
    </ul>
  </div>
  <!-----------------end foot---------------------> 
  
</div>
</body>
</html>

四、获取更多源码

~ 关注我，点赞博文~ 每天带你涨知识!
相关问题可以相互学习，可关注↓公Z号

更多推荐

html期末作业代码网页设计——美食主题(6页) HTML+CSS+JavaScript 学生dreamweaver网页设计作业成品