一、前言
本实例以“企业”酒庄为主题设计，应用html+css+js、图片轮翻效果、留言板、搜索等，供大家参考。【关注作者|获取更多源码（2000+个Web案例源码）|优质文章】；您的支持是我创作的动力！【点赞收藏博文】，Web开发、课程设计、毕业设计有兴趣的联系我交流分享，3Q！
二、网页文件
三、网页效果
以下为网页正文（节选示例）：
四、代码展示
1.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.net/" 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>
......
2.CSS
代码如下（节选示例）：
.bannerbox {
width: 100%;
height: 400px;
}
.banner {
width: 100%;
height: 400px;
margin: auto;
position: relative;
}
.ban-img{
height: 400px;
width: 100%;
overflow: hidden;
}
.l-bnt{
width: 100px;
height: 100px;
position: absolute;
top: 200px;
left: 400px;
font-size: 46px;
color: rgba(255,255,255,0.6);
cursor: pointer;
display: block;
}
.r-bnt{
width: 100px;
height: 100px;
color: rgba(255,255,255,0.6);
position: absolute;
top: 180px;
right: 400px;
font-size: 46px;
cursor: pointer;
display: block;
}
.l-bnt:hover{color: rgba(255,255,255,0.8);}
.r-bnt:hover{color: rgba(255,255,255,0.8);}
.ban-yqbox {
position: absolute;
top: 90%;
left: 45%;
width: 150px;
height: 30px;
margin: auto;
}
.ban-yqbox>li{
float: left;
width: 15px;
height: 15px;
border: 2px solid #FFFFFF;
border-radius: 50%;
margin-left: 20px;
}
.on{
width: 15px;
height: 15px;
border: 2px solid #930000;
background-color: #DCDCDC;
border-radius: 50%;
margin-left: 20px;
}
.conbox {
width: 1200px;
height: auto;
margin: auto;
}
.con-nav {
width: 1200px;
height: 60px;
}
.con-nav>a{
display: block;
width: 240px;
height: 60px;
text-align: center;
line-height: 60px;
font-size:20px;
float: left;
background-color: rgba(241,183,183,0.0);
transition: all 1s;
}
.connava{
background-color: rgba(241,183,183,0.5)!important;
}
.connent {
width: 1200px;
height: 700px;
overflow: hidden;
}
.con-title {
display: block;
clear: both;
width: 100%;
height: 50px;
text-align: center;
line-height:50px;
font-family: "华文行楷";
font-size: 22px;
color: #686868;
}
.con1 {
float: left;
width: 350px;
height: 300px;
border: 1px solid #767676;
margin-left: 36px;
margin-bottom: 40px;
position: relative;
}
.con1>ul{
width: 300px;
height: 250px;
margin-left: 25px;
margin-top: 25px;
}
.con1>ul>li{
width: 100%;
height: 50px;
line-height: 50px;
background-image: url(../images/con-listimg.png);
background-repeat: no-repeat;
background-position: left;
text-indent: 2em;
}
.con1>ul>li>a{
position: relative;
display: block;
font-family: "华文彩云";
font-size: 18px;
color: #000000;
}
.con1>ul>li>a>span{
position: absolute;
right: 30px;
font-family: "华文彩云";
font-size: 18px;
}
.con1>ul>li>a:hover{
text-decoration: underline;
}
.con-img {
position: absolute;
top: 20px;
right: 30px;
}
.con-ht {
position: absolute;
bottom: 0px;
width: 100%;
height: 35px;
background-color:rgba(0,0,0,0.4);
display: block;
text-align: center;
line-height: 35px;
color: white;
}
.newbox {
clear: both;
width: 100%;
height: auto;
}
.new {
width: 1200px;
height: auto;
margin: auto;
margin-top: 10px;
}
.new-title {
width: 100%;
height: 70px;
text-align: center;
line-height: 70px;
background-image: url(../images/con-hover.png);
background-repeat: no-repeat;
background-position: center bottom;
}
.new-xw {
width: 598px;
height: 230px;
position: relative;
float: left;
box-sizing: border-box;
}
.new-rq {
width: 75px;
height: 75px;
border-radius: 50%;
background-color: #555555;
}
.new-rq1{
position: absolute;
left: 15px;
top: 20px;
}
.new-rq2{
position: absolute;
top: 20px;
right: 15px;
}
.new-rq>p{
font-size:22px;
color: white;
line-height: 35px;
text-align: center;
}
.new-rq>span{width: 75px;height:2px;background-color: white;display: block;}
.new-wz {
width: 450px;
height: 150px;
text-align: left;
}
.new-wz>a:hover{
text-decoration: underline;
}
.new-wz1{
position: absolute;
top: 35px;
right: 40px;}
.new-wz2{
position: absolute;
top: 35px;
left:40px;
text-align: right;
}
.new-wz>a>h4{
color: #272727;
font-size: 14px;
line-height: 30px;
}
.new-wz>p{
font-size: 14px;
color: #4f4f4f;
font-family: "黑体";
line-height: 20px;
}
......
3.JS
代码如下（节选示例）：
// JavaScript Document
$(document).ready(function(){
//导航鼠标事件
$(".nav li").mouseenter(function(){
$(this).addClass("navhover").siblings("li").removeClass("navhover");
});
$(".nav").mouseleave(function(){
$(".nav li:first").addClass("navhover").siblings("li").removeClass("navhover");
});
//内容选项卡鼠标事件！
$(".con-nav>a").mouseenter(function(){
$(this).stop().addClass("connava").siblings("a").removeClass("connava");
var indexNO=$(this).index();
$(".connent>.con ").eq(indexNO).css("display","block").siblings().css("display","none");
});
//焦点图滚动广告
$(".ban-yqbox li").mouseover(function(){
var index=$(this).index();
$(".ban-img li").eq(index).show().siblings().hide();
$(this).addClass("on").siblings().removeClass("on");
});
});
......
标签：web,洋酒,54,height,width,原装,js,正宗,清酒 From： https://blog.csdn.net/A240307/article/details/137243687