HTML5期末大作业
文章目录
一、作品展示
二、文件目录
三、代码实现
<!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|投诉信箱：[email protected]<br />
版权所有： 中国葡萄酒资讯网 | 美酿文化咨询有限公司全程运作 | 桂ICP备05003592号-1 | 经营许可证：桂B2-20110002 | 桂公网安备 45010302000028号<br />
广西网警ICP备案 广西网警虚拟岗亭 </p> </div>
<script type="text/javascript" src="js/lunbo.js"></script>
</body>
</html>
四、获取更多源码
~ 关注我，点赞博文~ 每天带你涨知识