HTML5期末大作业：红酒销售网站设计——简单的品牌红酒销售网页(4页) HTML+CSS+JavaScript

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

获取更多源码

PC电脑端关注我们

作者主页-更多源码

HTML期末大作业文章专栏

作品介绍

1.网页作品简介 ：HTML期末大学生网页设计作业 A+水平 ,喜欢的可以下载，文章页支持手机PC响应式布局。

2.网页作品编辑：作品下载后可使用任意HTML编辑软件（如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++ 等任意HTML软件编辑修改网页）。

3.网页作品技术：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频、音频元素、Flash，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。

@ TOC

一、作品展示

二、文件目录

三、代码实现

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

<body bgcolor="#F4F4F4">
<div id="login">
<h2>欢迎！</h2>
<div id="loginp"><a href="login.html">登录</a>|<a href="#">注册</a>|<a href="#">联系我们</a></div>
</div>
<div id="logoall">
<div id="logo">
    <div id="logo1">
    <a href="index.html">
    <img src="picture/logo.png" width="200" height="100" />
    </a>
    </div>
    <div id="search">
    <input type="text" id="search_txt" placeholder="请输入" />
    <input type="submit" id="ss" value="搜索" />
    </div>
   <div id="logo2"><img src="picture/logoright.png" width="100" height="25" /></div></div></div>
<div id="naviall">
<div id="navi">
    <ul>
         <li><div class="shouye"><a href="index.html">首页</a></div></li>
         <li><a href="About.html">关于</a></li>
         <li><a href="show.html">产品展示</a></li>
         <li><a href="#">服务</a></li>
         <li><a href="#">专题</a></li>
         <li><a href="#">看点</a></li>
    </ul>
</div>
</div>
<div class="wrap">
        <div class="banner" style="background:#fbf8f3">
            <div class="banner_img">
                <img src="picture/banner1.jpg" width="1200"  />
            </div>
        </div>
        <div class="banner" style="background:#f0f0f0">
            <div class="banner_img">
                <img src="picture/banner2.jpg" width="1200"  />
            </div>
        </div>
        <div class="banner" style="background:#f7ead7">
            <div class="banner_img">
                <img src="picture/banner3.jpg" width="1200" />
            </div>
        </div>
        <div class="banner" style="background:#f1e6ea">
            <div class="banner_img">
                <img src="picture/banner4.jpg" width="1200"  />
            </div>
        </div>
        <div class="banner" style="background:#f7ead7">
            <div class="banner_img">
                <img src="picture/banner5.jpg" width="1200"  />
            </div>
        </div>
        <div class="btn">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>

        </div>
    </div>
<div class="A1">
<div class="A2">
 <div class="A4"></div>
 <div class="A5">红酒知识</div>
 <div class="A71"><img src="picture/g1.jpg" width="270"  /> </div>
 <div class="A7"><h2><a href="#">红酒要怎么喝才既健康又不容易醉</a></h2>
 <p>想喝到冰爽的葡萄酒，白葡萄酒干白葡萄酒的最佳饮用温度是7~10摄氏度，干红葡萄酒则是14~18摄氏度……</p></div>
 <div class="A81"><img src="picture/g2.jpg" width="270" /></div>
 <div class="A8"><h2><a href="#">观察拉菲酒塞，教你识别真假拉菲</a></h2>
 <p>观察酒标。真拉菲的酒标由于是丝印酒标，所以表面摸起来有凹凸的感觉，假的是普通印刷摸起来很滑……</p></div>
 </div>
<div class="A3">
 <div class="A4"></div>
 <div class="A6">热门看点</div>
 <div class="A9">六大“醉”受欢迎的红酒品牌</div>
 <div class="A10">
 <ul>
 <li><div class="A101">1</div><div class="A102"><a href="#">拉菲（Lafite）</a></div><div class="A103"><img src="picture/movie_top.gif" width="20"  /></div></li>
 <li><div class="A101">2</div><div class="A102"><a href="#">木桐（Mouton）</a></div><div class="A103"><img src="picture/movie_top.gif" width="20"  /></div></li>
 <li><div class="A101">3</div><div class="A102"><a href="#">玛歌（Margaux）</a></div><div class="A103"><img src="picture/movie_top.gif" width="20"  /></div></li>
 <li><div class="A101">4</div><div class="A102"><a href="#">拉图(Latour)</a></div><div class="A103"><img src="picture/movie_top.gif" width="20"  /></div></li>
 <li><div class="A101">5</div><div class="A102"><a href="#">奥比昂（Haut-Brion）</a></div><div class="A103"><img src="picture/movie_top.gif" width="20"  /></div></li>
 <li><div class="A101">6</div><div class="A102"><a href="#">卡思黛乐（Castel）</a></div><div class="A103"><img src="picture/movie_top.gif" width="20"  /></div></li>
 </ul>
 </div>
</div>
</div>
<div id="B1">
  <div id="B2"><p>世界红酒</p></div>
  <div id="B3">
  <ul>
    <li>
       <div class="B31"><a href="#"><img src="picture/h1.jpg" width="220" height="220" /></a></div>  
       <div class="B321">   
       <div class="B32">52度 泸州老窖 特曲（7年）<br />2013年产 老酒 500ml</div>
       <div class="B33">249元</div>
       <div class="B34">98人好评</div>
       </div>
    </li>
    <li>
       <div class="B31"><a href="#"><img src="picture/h2.jpg" width="220" height="220" /></a></div>
       <div class="B321">
       <div class="B32">43度 麦卡伦 18年单一麦芽<br />苏格兰威士忌  700ml</div>
       <div class="B33">2080元</div>
       <div class="B34">8人好评</div>
       </div>
    </li>
    <li>
        <div class="B31"><a href="#"><img src="picture/h3.jpg" width="220" height="220" /></a></div>
        <div class="B321">
       <div class="B32">人头马XO 干邑白兰地<br /> 700ml</div>
       <div class="B33">1399元</div>
       <div class="B34">121人好评</div>
       </div>
    </li>
    <li>
       <div class="B31"><a href="#"><img src="picture/h4.jpg" width="220" height="220" /></a></div>
       <div class="B321">
       <div class="B32">【精品礼盒】 澳大利亚奔富<br />BIN389红葡萄酒 750ml</div>
       <div class="B33">618元</div>
       <div class="B34">28人好评</div>
       </div>
    </li>
    <li>
       <div class="B31"><a href="#"><img src="picture/h5.jpg" width="220" height="220" /></a></div>
       <div class="B321">
       <div class="B32">传心（凛）纯米大吟酿<br /> 1800ml</div>
       <div class="B33">1488元</div>
       <div class="B34">0人好评</div>
       </div>
    </li>
  </ul>
  </div></div>
  <div id="C1">
  <div id="C2"><p>红酒类型</p></div>
  <div id="C3">
    <ul>
      <li>
         <div class="C31"><img src="picture/i1.jpg" width="275" height="275" /></div>
          <div class="C32">【精选六只装】</div>
           <div class="C33">696元</div>
      </li>
      <li>
         <div class="C31"><img src="picture/i2.jpg" width="275" height="275" /></div>
          <div class="C32">【名庄口感】雷司令1+伊诺奥塔维</div>
           <div class="C33">606元</div>
      </li>
      <li>
        <div class="C31"><img src="picture/i3.jpg" width="275" height="275" /></div>
          <div class="C32">【新世界红白组合】白诗南+老藤</div>
           <div class="C33">236元</div>
      </li>
      <li>
         <div class="C31"><img src="picture/i4.jpg" width="275" height="275" /></div>
          <div class="C32">【亲情酒】168+纯爱</div>
           <div class="C33">660元</div>
      </li>
    </ul>
  </div>
  </div>
  <div id="D1">
    <div id="D2"><p>红酒精品</p></div>
    <div id="D3">
    <div id="D4"><!--手风琴-->
       <ul id="shoufenq">
        <li><img src="picture/shou1.jpg"></li>
        <li><img src="picture/shou2.jpg" /></li>
        <li><img src="picture/shou3.jpg"/></li>
        <li><img src="picture/shou4.jpg" /></li>
        <li><img src="picture/shou5.jpg" /></li>
        <li><img src="picture/shou6.jpg" /></li>
    </ul>
      </div>
    <div id="D5">
       <ul>
         <li><a href="#"><img src="picture/j8.png" width="238" height="130" /></a></li>
          <li><a href="#"><img src="picture/j9.png" width="238" height="130" /></a></li>
           <li><a href="#"><img src="picture/j10.png" width="238" height="130" /></a></li>
            <li><a href="#"><img src="picture/j11.png" width="238" height="130" /></a></li>
             <li><a href="#"><img src="picture/j12.png" width="238" height="130" /></a></li>
       </ul>
       </div>
    </div>
  </div>
<div class="E1">
 <div class="E2">世界红酒名庄</div>

 <div class="E3">
  <div class="F1">
   <div class="F2"><img src="picture/k1.jpg" width="175" height="175" />
   <ul>
   <li><a href="#">2009年雷诺帝酒庄阿玛罗尼经典红葡萄酒</a></li>
   <li>【WE91】分</li>
   <li><span>¥450</span></li>
   </ul>
   </div>
   <div class="F2"><img src="picture/k2.jpg" width="175" height="175" />
   <ul>
   <li><a href="#">2009年索维酒庄史维瓦岩阿玛罗尼红葡萄酒</a></li>
   <li>【WE93】分</li>
   <li><span>¥4515</span></li>
   </ul>
   </div>
   <div class="F2"><img src="picture/k3.jpg" width="175" height="175" />
   <ul>
   <li><a href="#">2010年拉瓦里酒庄阿玛罗尼经典红葡萄酒</a></li>
   <li>【WE88】分</li>
   <li><span>¥339</span></li>
   </ul>
   </div>
  </div>

   <div class="G1"><img src="picture/k7.jpg" width="400"  />
      <div id="G2">
         <ul>
            <li><a href="#">2012年萨莱特酒庄阿玛罗尼经典…</a><br /><div class="G21">2012 Le Salette Amarone Della Valplicella Class…</div></li>
            <li><a href="#">2006蔻福酒庄欧尚阿玛罗尼经典…</a><br /><div class="G21">2006 Corteforte Amarone Della Valpolicella Class…</div></li>
            <li><a href="#">2008蔻福酒庄圣泽诺阿玛罗尼经典…</a><br /><div class="G21">2008 Corteforte Amarone Della Valpolicella Class…</div></li>
            <li><a href="#">2009年安琪洛阿玛罗尼经典红葡萄酒…</a><br /><div class="G21">2009 Antichello Amarone della Valpolicella Class…</div></li>
         </ul>

      </div>
      <div id="G3">
         <div class="G31">¥380</div>
         <div class="G31">¥525</div>
         <div class="G31">¥380</div>
         <div class="G31">¥389</div>
      </div>

   </div>


   <div class="H1">
   <div class="H2"><img src="picture/k4.jpg" width="175" height="175" />
   <ul>
   <li><a href="#">2009年布里加德拉酒庄维奇阿玛罗尼红葡萄酒</a></li>
   <li>【WE85】分</li>
   <li><span>¥565</span></li>
   </ul>
   </div>
   <div class="H2"><img src="picture/k5.jpg" width="175" height="175" />
   <ul>
   <li><a href="#">2011年萨来特酒庄马瑞嘉阿玛罗尼红葡萄酒</a></li>
   <li>【WE95】分</li>
   <li><span>¥4515</span></li>
   </ul>
   </div>
   <div class="H2">
     <img src="picture/k6.jpg" width="175" height="175" />
     <ul>
       <li><a href="#">2010年福山酒庄阿玛罗尼经典红葡萄酒</a></li>
   <li>【WE84】分</li>
   <li><span>¥485</span></li>
 </ul>
   </div>
   </div>

 </div>
  <div class="E4">意大利名庄：阿玛罗尼<br/><span1>AMARONE DELLA VAPOLICELLA DOCG</span1></div> 
</div>
<div class="E5"><a href="#">更多》</a></div>
<div id="version"><p>关于我们 | 约稿启事 | 网站导航 | 诚聘英才| 刊登广告 | 服务项目 | 联系我们 | 法律声明 | 建议投诉 | 网站帮助| 友情链接<br />
中国葡萄酒资讯网客服QQ：800063399   | 客服电话：0771-2631000|投诉信箱：info@wines-info.com<br />
版权所有： 中国葡萄酒资讯网 | 美酿文化咨询有限公司全程运作 | 桂ICP备05003592号-1 | 经营许可证：桂B2-20110002 |  桂公网安备 45010302000028号<br />
  广西网警ICP备案  广西网警虚拟岗亭 </p> </div>
<script type="text/javascript" src="js/lunbo.js"></script> 
</body>
</html>

四、获取更多源码

~ 关注我，点赞博文~ 每天带你涨知识!

相关问题可以相互学习，可关注↓公Z号获取更多源码 !

五、学习资料

web前端零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程) 适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站

编辑于 2021-11-29 17:19

HTML5

HTML

网页设计