HTML5期末大作业:红酒销售网页网站设计——品牌红酒销售网页模板(4页) html网页设计期末大作业_网页设计平时作业

web期末作业设计网页 同时被 3 个专栏收录
385 篇文章 20 订阅
382 篇文章 124 订阅

HTML5期末大作业:红酒销售网页网站设计——品牌红酒销售网页模板(4页) html网页设计期末大作业_网页设计平时作业

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

获取更多源码

PC电脑端关注我们

🧡作者主页-更多源码

🧡HTML期末大作业文章专栏

作品介绍

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

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

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

一、作品展示

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

二、文件目录

在这里插入图片描述

三、代码实现



<!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="image/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="image/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="image/banner1.jpg" width="1200"  />
            </div>
        </div>
        <div class="banner" style="background:#f0f0f0">
        	<div class="banner_img">
            	<img src="image/banner2.jpg" width="1200"  />
            </div>
        </div>
        <div class="banner" style="background:#f7ead7">
        	<div class="banner_img">
            	<img src="image/banner3.jpg" width="1200" />
            </div>
        </div>
        <div class="banner" style="background:#f1e6ea">
        	<div class="banner_img">
            	<img src="image/banner4.jpg" width="1200"  />
            </div>
        </div>
        <div class="banner" style="background:#f7ead7">
        	<div class="banner_img">
            	<img src="image/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="image/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="image/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="image/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="image/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="image/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="image/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="image/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="image/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="image/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="image/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="image/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="image/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="image/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="image/i1.jpg" width="275" height="275" /></div>
          <div class="C32">【精选六只装】</div>
           <div class="C33">696元</div>
      </li>
      <li>
         <div class="C31"><img src="image/i2.jpg" width="275" height="275" /></div>
          <div class="C32">【名庄口感】雷司令1+伊诺奥塔维</div>
           <div class="C33">606元</div>
      </li>
      <li>
        <div class="C31"><img src="image/i3.jpg" width="275" height="275" /></div>
          <div class="C32">【新世界红白组合】白诗南+老藤</div>
           <div class="C33">236元</div>
      </li>
      <li>
         <div class="C31"><img src="image/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="image/shou1.jpg"></li>
        <li><img src="image/shou2.jpg" /></li>
        <li><img src="image/shou3.jpg"/></li>
        <li><img src="image/shou4.jpg" /></li>
        <li><img src="image/shou5.jpg" /></li>
        <li><img src="image/shou6.jpg" /></li>
    </ul>
      </div>
    <div id="D5">
       <ul>
         <li><a href="#"><img src="image/j8.png" width="238" height="130" /></a></li>
          <li><a href="#"><img src="image/j9.png" width="238" height="130" /></a></li>
           <li><a href="#"><img src="image/j10.png" width="238" height="130" /></a></li>
            <li><a href="#"><img src="image/j11.png" width="238" height="130" /></a></li>
             <li><a href="#"><img src="image/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="image/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="image/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="image/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="image/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="image/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="image/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="image/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>


四、获取更多源码

PC电脑端关注我们

五、学习资料

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


六、更多源码

HTML5期末考核大作业源码* 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!
在这里插入图片描述

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: Age of Ai 设计师:meimeiellie 返回首页

打赏作者

web领域优质创作者-网页设计

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值