html网页设计期末大作业——酒庄网页设计实例(5页)
常见网页设计作业题材有
个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他等网页设计题目,A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!
获取更多源码
PC电脑端关注我们
🧡作者主页-更多源码
🧡HTML期末大作业文章专栏
文章目录
- html网页设计期末大作业——酒庄网页设计实例(5页)
- 获取更多源码
- 一、作品展示
- 二、文件目录
- 三、代码实现
- 四、获取更多源码
- 五、学习资料
- 六、更多源码
一、作品展示
二、文件目录
三、代码实现
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>木地酒庄实训项目</title>
<link href="css/font-awesome.css" rel="stylesheet">
<link href="css/header.css" type="text/css" rel="stylesheet">
<link href="css/index.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</head>
<body>
<div class="box">
<!--头部区域-->
<div class="topbox">
<div class="top">
<a href="index.html"><img src="images/top-logo.png" class="top-logo"></a>
<div class="t-sousuo">
<div class="sousuok">
<input type="text" placeholder="葡萄酒" class="t-txt">
<input type="button" value="搜 索" class="t-btn">
</div>
<span class="t-gjc">关键词：<span style="color: #cf3232;">葡萄酒</span> 冰酒
甜酒 香槟 白葡萄酒 红酒 白酒</span>
</div>
<ul>
<li><i class="fa fa-star" aria-hidden="true"></i><a href="index.html">中文</a></li>
<li><i class="fa fa-star" aria-hidden="true"></i><a href="#">English</a></li>
</ul>
</div>
</div>
<!--导航区域-->
<div class="navbox">
<nav class="nav">
<ul>
<li class="navhover"><a href="index.html" >首页</a></li>
<li><a href="chanping.html">产品</a></li>
<li><a href="jianjie.html">公司简介</a></li>
<li><a href="new.html">公司新闻</a></li>
<li><a href="lxwm.html">联系我们</a></li>
</ul>
</nav>
</div>
<!--焦点图区域-->
<div class="bannerbox">
<div class="banner">
<!--图片区域-->
<ul class="ban-img">
<li><img src="images/banner3.jpg"></li>
<li><img src="images/banner1.jpg"></li>
<li><img src="images/banner2.jpg"></li>
</ul>
<!--小圆圈-->
<ul class="ban-yqbox">
<li class="on"></li>
<li></li>
<li></li>
</ul>
<!--左右按钮-->
<i class="fa fa-chevron-left l-bnt" aria-hidden="true"></i>
<i class="fa fa-chevron-right r-bnt" aria-hidden="true"></i>
</div>
<!--内容-选项卡区域-->
<div class="conbox">
<!--内容导航-->
<div class="con-nav">
<a href="#" >CANADA</a>
<a href="#">FRANCE</a>
<a href="#" class="connava">CHINA</a>
<a href="#">U S A</a>
<a href="#">ITALY</a>
</div>
<!--产品-->
<div class="connent">
<!--选项卡1内容-->
<div class="con">
<h3 class="con-title">上帝的恩赐 中国清酒的米水传奇</h3>
<div class="con1">
<ul>
<li><a href="chanping.html">冰 酒 ICEWINE <span>></span></a></li>
<li><a href="chanping.html">红 酒 RED WINE <span>></span></a></li>
<li><a href="chanping.html">白葡萄酒 WHITE WINE <span>></span></a></li>
<li><a href="chanping.html">甜 酒 SWEET WINE <span>></span></a></li>
<li><a href="chanping.html">香 槟 CHAMPAGNE <span>></span></a></li>
</ul>
</div>
<div class="con1">
<a href="spxq.html" >
<img src="images/con-cp2.png" class="con-img" style="right: 0px;">
<span class="con-ht">日本清酒原装进口洋酒 菊正宗清酒</span>
</a>
</div>
<div class="con1">
<a href="spxq.html">
<img src="images/con-cp1.png" class="con-img">
<span class="con-ht">日本清酒原装进口洋酒 菊正宗清酒</span>
</a>
</div>
<div class="con1">
<a href="spxq.html">
<img src="images/con-cp4.png" class="con-img" style=" right: 20px;">
<span class="con-ht">日本清酒原装进口洋酒 菊正宗清酒</span>
</a>
</div>
<div class="con1">
<a href="spxq.html">
<img src="images/con-cp3.png" class="con-img" style=" right: 20px;">
<span class="con-ht">日本清酒原装进口洋酒 菊正宗清酒</span>
</a>
</div>
<div class="con1">
<a href="spxq.html">
<img src="images/con-cp1.png" class="con-img" >
<span class="con-ht">日本清酒原装进口洋酒 菊正宗清酒</span>
</a>
</div>
</div>
<!--选项卡2内容-->
<div class="con">
<h3 class="con-title">上帝的恩赐 中国清酒的米水传奇</h3>
<div class="con1">
<ul>
<li><a href="">冰 酒 ICEWINE <span>></span></a></li>
<li><a href="">红 酒 RED WINE <span>></span></a></li>
<li><a href="">白葡萄酒 WHITE WINE <span>></span></a></li>
<li><a href="">甜 酒 SWEET WINE <span>></span></a></li>
<li><a href="">香 槟 CHAMPAGNE <span>></span></a></li>
</ul>
</div>
<div class="con1">
<a href="spxq.html">
<img src="images/con-cp4.png" class="con-img" style=" right: 20px;">
<span class="con-ht">日本清酒原装进口洋酒 菊正宗清酒</span>
</a>
</div>
<div class="con1">
<a href="spxq.html">
<img src="images/con-cp3.png" class="con-img" style=" right: 20px;">
<span class="con-ht">日本清酒原装进口洋酒 菊正宗清酒</span>
</a>
</div>
<div class="con1">
<a href="spxq.html">
<img src="images/con-cp2.png" class="con-img" style="right: 0px;">
<span class="con-ht">日本清酒原装进口洋酒 菊正宗清酒</span>
</a>
</div>
<div class="con1">
<a href="spxq.html">
<img src="images/con-cp1.png" class="con-img">
<span class="con-ht">日本清酒原装进口洋酒 菊正宗清酒</span>
</a>
</div>
<div class="con1">
<a href="spxq.html">
<img src="images/con-cp1.png" class="con-img" >
<span class="con-ht">日本清酒原装进口洋酒 菊正宗清酒</span>
</a>
</div>
</div>
<!--选项卡3内容-->
<div class="con">
<h3 class="con-title">上帝的恩赐 中国清酒的米水传奇</h3>
<div class="con1">
<ul>
<li><a href="">冰 酒 ICEWINE <span>></span></a></li>
<li><a href="">红 酒 RED WINE <span>></span></a></li>
<li><a href="">白葡萄酒 WHITE WINE <span>></span></a></li>
<li><a href="">甜 酒 SWEET WINE <span>></span></a></li>
<li><a href="">香 槟 CHAMPAGNE <span>></span></a></li>
</ul>
</div>
<div class="con1">
<a href="spxq.html">
<img src="images/con-cp1.png" class="con-img">
<span class="con-ht">日本清酒原装进口洋酒 菊正宗清酒</span>
</a>
</div>
<div class="con1">
<a href="spxq.html">
<img src="images/con-cp2.png" class="con-img" style="right: 0px;">
<span class="con-ht">日本清酒原装进口洋酒 菊正宗清酒</span>
</a>
</div>
<div class="con1">
<a href="spxq.html">
<img src="images/con-cp3.png" class="con-img" style=" right: 20px;">
<span class="con-ht">日本清酒原装进口洋酒 菊正宗清酒</span>
</a>
</div>
<div class="con1">
<a href="spxq.html">
<img src="images/con-cp4.png" class="con-img" style=" right: 20px;">
<span class="con-ht">日本清酒原装进口洋酒 菊正宗清酒</span>
</a>
</div>
<div class="con1">
<a href="spxq.html">
<img src="images/con-cp1.png" class="con-img" >
<span class="con-ht">日本清酒原装进口洋酒 菊正宗清酒</span>
</a>
</div>
</div>
<!--选项卡4内容-->
<div class="con">
<h3 class="con-title">上帝的恩赐 中国清酒的米水传奇</h3>
<div class="con1">
<ul>
<li><a href="">冰 酒 ICEWINE <span>></span></a></li>
<li><a href="">红 酒 RED WINE <span>></span></a></li>
<li><a href="">白葡萄酒 WHITE WINE <span>></span></a></li>
<li><a href="">甜 酒 SWEET WINE <span>></span></a></li>
<li><a href="">香 槟 CHAMPAGNE <span>></span></a></li>
</ul>
</div>
<div class="con1">
<a href="spxq.html">
<img src="images/con-cp1.png" class="con-img">
<span class="con-ht">日本清酒原装进口洋酒 菊正宗清酒</span>
</a>
</div>
<div class="con1">
<a href="spxq.html">
<img src="images/con-cp4.png" class="con-img" style=" right: 20px;">
<span class="con-ht">日本清酒原装进口洋酒 菊正宗清酒</span>
</a>
</div>
<div class="con1">
<a href="spxq.html">
<img src="images/con-cp3.png" class="con-img" style=" right: 20px;">
<span class="con-ht">日本清酒原装进口洋酒 菊正宗清酒</span>
</a>
</div>
<div class="con1">
<a href="spxq.html">
<img src="images/con-cp2.png" class="con-img" style="right: 0px;">
<span class="con-ht">日本清酒原装进口洋酒 菊正宗清酒</span>
</a>
</div>
<div class="con1">
<a href="spxq.html">
<img src="images/con-cp1.png" class="con-img" >
<span class="con-ht">日本清酒原装进口洋酒 菊正宗清酒</span>
</a>
</div>
</div>
<!--选项卡5内容-->
<div class="con">
<h3 class="con-title">上帝的恩赐 中国清酒的米水传奇</h3>
<div class="con1">
<ul>
<li><a href="">冰 酒 ICEWINE <span>></span></a></li>
<li><a href="">红 酒 RED WINE <span>></span></a></li>
<li><a href="">白葡萄酒 WHITE WINE <span>></span></a></li>
<li><a href="">甜 酒 SWEET WINE <span>></span></a></li>
<li><a href="">香 槟 CHAMPAGNE <span>></span></a></li>
</ul>
</div>
<div class="con1">
<a href="spxq.html">
<img src="images/con-cp4.png" class="con-img" style=" right: 20px;">
<span class="con-ht">日本清酒原装进口洋酒 菊正宗清酒</span>
</a>
</div>
<div class="con1">
<a href="spxq.html">
<img src="images/con-cp1.png" class="con-img" >
<span class="con-ht">日本清酒原装进口洋酒 菊正宗清酒</span>
</a>
</div>
<div class="con1">
<a href="spxq.html">
<img src="images/con-cp3.png" class="con-img" style=" right: 20px;">
<span class="con-ht">日本清酒原装进口洋酒 菊正宗清酒</span>
</a>
</div>
<div class="con1">
<a href="spxq.html">
<img src="images/con-cp1.png" class="con-img">
<span class="con-ht">日本清酒原装进口洋酒 菊正宗清酒</span>
</a>
</div>
<div class="con1">
<a href="spxq.html">
<img src="images/con-cp2.png" class="con-img" style="right: 0px;">
<span class="con-ht">日本清酒原装进口洋酒 菊正宗清酒</span>
</a>
</div>
</div>
</div>
</div>
<!--内容-新闻区域-->
<div class="newbox">
<div class="new">
<h3 class="new-title">公司新闻</h3>
<!--第一道新闻-->
<div class="new-xw" style="border-right: 1px solid #666666;border-top: 1px solid #666666">
<div class="new-rq new-rq1">
<p>21</p>
<span></span>
<p>12</p>
</div>
<div class="new-wz new-wz1">
<a href="xwxq.html"><h4>清酒、烧酒、梅酒—— 日本的酒文化</h4></a>
<p>自古以来，日本人最喜欢清酒却是名不虚传<br>
清酒是用秋季收获的大米，在冬季经发酵后酿成的。可以说，“酒是米、水以及酒曲子的艺术结晶”。
所以，名酒的产地必然要有充足的水源而且盛产大米。丰富的水源，优质的大米是生产香醇美酒的先决条件。
日本的森林孕育了丰富的水源，为生产优质名酒提供了良好的环境，这里的名酒产地主要在东北、北陆地区、九福岗、熊本一带。
<a href="xwxq.html" style="color: #549CCB;padding-left: 20px;">阅读>></a></p>
</div>
</div>
<!--第二道新闻-->
<div class="new-xw" style="border-top: 1px solid #666666">
<div class="new-rq new-rq2">
<p>16</p>
<span></span>
<p>12</p>
</div>
<div class="new-wz new-wz2">
<a href="xwxq.html"><h4>清酒、烧酒、梅酒—— 日本的酒文化</h4></a>
<p>自古以来，日本人最喜欢清酒却是名不虚传<br>
清酒是用秋季收获的大米，在冬季经发酵后酿成的。可以说，“酒是米、水以及酒曲子的艺术结晶”。
所以，名酒的产地必然要有充足的水源而且盛产大米。丰富的水源，优质的大米是生产香醇美酒的先决条件。
日本的森林孕育了丰富的水源，为生产优质名酒提供了良好的环境，这里的名酒产地主要在东北、北陆地区、九福岗、熊本一带。
<a href="xwxq.html" style="color: #549CCB;padding-left: 20px;">阅读>></a></p>
</div>
</div>
<!--第三道新闻-->
<div class="new-xw" style="border-top: 1px solid #666666;border-right: 1px solid #666666; border-bottom: 1px solid #666666">
<div class="new-rq new-rq1">
<p>08</p>
<span></span>
<p>12</p>
</div>
<div class="new-wz new-wz1">
<a href="xwxq.html"><h4>清酒、烧酒、梅酒—— 日本的酒文化</h4></a>
<p>自古以来，日本人最喜欢清酒却是名不虚传<br>
清酒是用秋季收获的大米，在冬季经发酵后酿成的。可以说，“酒是米、水以及酒曲子的艺术结晶”。
所以，名酒的产地必然要有充足的水源而且盛产大米。丰富的水源，优质的大米是生产香醇美酒的先决条件。
日本的森林孕育了丰富的水源，为生产优质名酒提供了良好的环境，这里的名酒产地主要在东北、北陆地区、九福岗、熊本一带。
<a href="xwxq.html" style="color: #549CCB;padding-left: 20px;">阅读>></a></p>
</div>
</div>
<!--第四道新闻-->
<div class="new-xw" style="border-top: 1px solid #666666;border-bottom: 1px solid #666666">
<div class="new-rq new-rq2">
<p>25</p>
<span></span>
<p>11</p>
</div>
<div class="new-wz new-wz2">
<a href="xwxq.html"><h4>清酒、烧酒、梅酒—— 日本的酒文化</h4></a>
<p>自古以来，日本人最喜欢清酒却是名不虚传<br>
清酒是用秋季收获的大米，在冬季经发酵后酿成的。可以说，“酒是米、水以及酒曲子的艺术结晶”。
所以，名酒的产地必然要有充足的水源而且盛产大米。丰富的水源，优质的大米是生产香醇美酒的先决条件。
日本的森林孕育了丰富的水源，为生产优质名酒提供了良好的环境，这里的名酒产地主要在东北、北陆地区、九福岗、熊本一带。
<a href="xwxq.html" style="color: #549CCB;padding-left: 20px;">阅读>></a></p>
</div>
</div>
<!---->
</div>
</div>
<!--内容-名酒商标区域-->
<div class="logobox">
<h3 class="lg-title">知名红酒</h3>
<div class="logob">
<a href=""><img src="images/con-ban1.png"></a>
<a href=""><img src="images/con-ban2.png"></a>
<a href=""><img src="images/con-ban3.png"></a>
<a href=""><img src="images/con-ban4.png"></a>
<a href=""><img src="images/con-ban5.png"></a>
<a href=""><img src="images/con-ban1.png"></a>
</div>
</div>
<!--页脚区域-->
<div class="footbox">
<div class="foot">
<div class="huiding"><a href="#">
<i class="fa fa-arrow-up" aria-hidden="true"></i>
</a></div>
<ul>
<li><a href="lxwm.html">联系我们</a></li>
<li><a href="jianjie.html">公司简介</a></li>
<li><a href="new.html">公司新闻</a></li>
<select class="f-xl">
<option>友情链接</option>
<option>翁丰统</option>
<option>胡家俊</option>
<option>张铭聪</option>
</select>
</ul>
<p class="f-small">Copyright @ 2010-2016 木地酒庄有限公司 wengfengtong 更多模板：<a href="http://www.mycodes/" target="_blank">源码之家</p>
<p class="f-sj">劝君更尽一杯酒<br/><span>满韵香含唯此家</span></p>
<img src="images/foot-logo.jpg" style="position:absolute;bottom:10px;right:30px; ">
</div>
</div>
</div>
</body>
</html>
四、获取更多源码
PC电脑端关注我们
五、学习资料
web前端 零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)
适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站
六、更多源码
PC电脑端关注我们
HTML5期末考核大作业源码* 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!
更多推荐
html网页设计期末大作业——酒庄网页设计实例(5页)
发布评论