作品介绍
1.网页作品简介 ：采用html+css+js表单验证
2.网页作品编辑：作品下载后可使用任意HTML编辑软件(如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++ 等任意HTML软件编辑修改网页)。
3.网页作品技术：Div+CSS、导航栏效果、banner、表单、二级三级页面等，视频、基本期末作业所需的知识点全覆盖。
网站目录
- 网站首页
- 公司简介
- 产品中心
- 视频
- 留言
- 联系我们
网页设计效果图
1首页
2.公司简介
3.产品中心
4.视频介绍
5.留言（js不能为空验证）
6.联系我们
一、网站首页
html代码：
<!doctype html>
<html><head><meta charset="utf-8">
<title>茶叶</title>
</head>
<body>
<link href="css/css.css" rel="stylesheet" type="text/css">
<div class="starbucks-top">
<div class="starbucks-top-wrap ">
<a href="#" class="starbucks-logo"><img src="images/logo.jpeg"></a>
<div class="fr m_nav">
<ul class="starbucks-daohang">
<li> <a href="index.html" class="daohang-a">首页</a></li>
<li> <a href="jianjie.html" class="daohang-a">公司简介</a></li>
<li> <a href="chanpin.html" class="daohang-a">公司产品</a></li>
<li> <a href="shipin.html" class="daohang-a">视频</a></li>
<li> <a href="liuyan.html" class="daohang-a">留言</a></li>
<li> <a href="lianxi.html" class="daohang-a">联系我们</a></li>
</ul>
</div>
</div>
</div>
<div class="banner">
<img src="images/1640587754389.jpeg" width="1200" height="400px" >
</div>
<div class="main">
<div class="in_news fl">
<!--start-->
<div class="<strong>demo</strong>">
<ul class="tabbtn" id="normaltab">
<li class="current" onMouseMove="showInfo(1)" id="li1"><a href="#">最新新闻</a><!-- 行业新闻 --></li>
</ul><a href="#" target="_blank" class="fr" style="font-family:'微软雅黑';margin-right:5px;position:absolute;right:10px;top:10px;color:#FF6600;font-size:18px;">+</a>
<div class="tabcon" id="normalcon">
<div class="sublist" id="content1">
<div class="news_top">
<div class="news_img fl"><a href="#"><img src="images/107x84_20211224095545_44664.jpg"></a></div>
<div class="news_title fl"><h4><a href="#">没来过普洱，就别跟我说你了解云南！...</a></h4><p><a href="#"></a>
</p></div>
<div class="clear"></div>
</div>
<ul>
<li><span class="dot">▪</span><a href="#">祥源普洱·熟茶系列：每一款都为经典而...</a><span class="timer">12/22</span></li>
<li><span class="dot">▪</span><a href="#">暨陈年普洱老茶拍卖品鉴新闻发布会</a><span class="timer">12/17</span></li>
<li><span class="dot">▪</span><a href="#">普洱·山头茶系列：一山一味，来自...</a><span class="timer">12/16</span></li>
</ul>
</div>
<div class="sublist" id="content2" style="display:none">
<div class="news_top">
<div class="news_img fl"><a href="#"><img src="images/107x84_20190514173408_95639.jpg"></a></div>
<div class="news_title fl"><h4><a href="#">56000元大奖花落谁家？祥源茶20...</a></h4><p><a href="#">为了让消费者更深入的了解祥源易武普洱茶，2019年5月起，祥源茶携手全国各地的合作伙伴，将在全国各地祥源茶门店举办“祥源...</a>
</p></div>
<div class="clear"></div>
</div>
<div class="news_top">
<div class="news_img fl"><a href="#"><img src="images/107x84_20181108170030_99850.jpg"></a></div>
<div class="news_title fl"><h4><a href="#">叮咚~你有一条未读精彩活动待查看！</a></h4><p><a href="#"></a>
</p></div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
<!--end-->
</div>
<div class="fl squr_pic">
<div class="fl">
<a href="#" class="fl"><img src="images/20210730104222_77634.jpg" alt="" width="189" height="251" title="" align="">
<!--<p>祥源·白茶</p>-->
</a>
<div class="fl" style="width:285px;margin-left:1px;">
<a href="#" style="margin-bottom:1px;">
<img src="images/20210730104318_49803.jpg" alt="" width="280" height="130px;">
<!-- 祥源·祁红 --> <!-- <p>祥源·祁红</p>-->
</a>
<a href="#" class="fl"><img src="images/20210730104340_48569.jpg" alt="" width="140">
<!-- 祥源白茶 --> <!-- <p>祥源·普洱</p>-->
</a>
<a href="#" class="fl" style="margin-left:1px;"><img src="images/20210730104451_87697.jpg" alt="" width="140">
<!-- 新品推荐 --><!--<p>其他茶</p>--></a>
</div>
</div>
<div class="fr">
<a href="#"><img src="images/20160317102922_43873.jpg" width="240" height="130"> </a> <br>
<a href="#"><img src="images/20160317102914_34469.jpg" width="240" height="130"> </a>
</div>
</div>
<div class="clear"></div>
</div>
<!--tab 选项卡-->
<script type="text/javascript">
function showInfo(id){
for(var i = 1; i < 3; i++){
$("#li" + i).removeClass('current');
$("#content" + i).hide();
}
$("#li" + id).addClass('current');
$("#content" + id).show();
for(var i = 1; i < 3; i++){
$("#chushouli" + i).removeClass('current2');
$("#chushou" + i).hide();
}
$("#chushouli" + id).addClass('current2');
$("#chushou" + id).show();
}
</script>
<script type="text/javascript">
$(document).ready(function(){
$(".index_focus").hover(function(){
$(this).find(".index_focus_pre,.index_focus_next").stop(true, true).fadeTo("show", 1)
},function(){
$(this).find(".index_focus_pre,.index_focus_next").fadeOut()
});
$(".index_focus").slide({
titCell: ".slide_nav a ",
mainCell: ".bd ul",
delayTime: 500,
interTime: 3500,
prevCell:".index_focus_pre",
nextCell:".index_focus_next",
effect: "fold",
autoPlay: true,
trigger: "click",
startFun:function(i){
$(".index_focus_info").eq(i).find("h3").css("display","block").fadeTo(1000,1);
$(".index_focus_info").eq(i).find(".text").css("display","block").fadeTo(1000,1);
}
});
});
</script>
<div class="footer">
<div class="foot">
<span style="text-align: center; font-size: 32px; color:#FFFFFF">版权所有</span>
</div>
<div>
</div></div></body></html>二、使用步骤
1.引入css代码
代码如下：
<link href="css/css.css" rel="stylesheet" type="text/css">
2.css代码
代码如下：
@charset "utf-8";
* {margin: 0;padding: 0;border: none;color:#333333;list-style: none;text-decoration: none;outline:none;-webkit-text-size-adjust:none;font-size:12px;}
html {-webkit-font-smoothing: subpixel-antialiased; -webkit-tap-highlight-color: transparent;}
a{color:#333333;}
.clear{height:0;clear:both;zoom:1;}
label {font-weight:normal;}
.js body table {border-collapse: separate;}
.fr {float: right !important;}
.fl {float: left;}
clearfix:after {content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix {display:inline-block}
/*hide from IE*/
* html .clearfix {height:1%}
body{margin:0 auto; padding:0; font-size:12px; font-family:"宋体",Arial; color:#373534; background:url(../images/bj.gif) repeat;}
.clearfix {display:block;}
.w_link{float:right;height:20px;line-height:18px;padding-top:20px;color:#666666;margin-bottom:10px;}
.w_link a{color:#666666;font-family:'微软雅黑';}
.starbucks-top {position:relative;margin-top:12px;}
.starbucks-top-wrap {height:120px;position:relative;width:1200px;margin:0 auto;}
.starbucks-logo {float:left;display:block;margin-top:30px; width: 300px;}
.starbucks-logo img {height:auto;vertical-align:bottom; width: 300px;}
.starbucks-daohang {margin-left:100px;height:90px;line-height:80px; float:left; width: 800px;margin-top: 30px;}
.starbucks-daohang li {float:left;height:90px;line-height:80px;width:110px;text-align:center;}
.starbucks-daohang li a {display:block;padding:0 10px;margin:0 6px;height:100%;z-index:94;position:relative;font-family:'微软雅黑';font-size:14px;}
.his_show ul li p{height:54px;}
.starbucks-daohang li a:hover{display:block;padding:0 10px;margin:0 6px;height:100%;z-index:94;position:relative;font-family:'微软雅黑';font-size:14px;color: red}
.starbucks-icon{z-index:94;}
.line-top-foot{width:100%;height:1px;
-webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, .3);
-moz-box-shadow: 0 4px 6px rgba(0, 0, 0, .3);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
behavior: url(../other/iecss3.htc);
z-index:89;background-color:transparent;position:relative;display:none;}
/*banner*/
.banner { margin: 1px auto ;width: 1200px;}
.banner img { width: 1200px; height: 400px;}
.index_focus{position:relative;width:100%;height:500px;margin:0 auto;overflow:hidden;}
.index_focus ul{width:100% !important;}
.index_focus .bd li{display:none;position:absolute;left:50% !important;top:0;width:1920px;margin-left:-960px;}
.index_focus .pic{height:auto;display:block;}
.index_focus .pic:hover{text-decoration:none;}
.index_focus .slide_nav{position:absolute;left:45%;bottom:2%;}
.index_focus .slide_nav a{cursor:pointer;float:left;font-size:28px;font-family:arial;color:#fff;padding:5px 10px;}
.index_focus .slide_nav li:hover,.index_focus .slide_nav .on{text-decoration:none;color:#9c0;filter:alpha(opacity=80);opacity:0.8;}
.index_focus_pre,.index_focus_next{display:none;position:absolute;top:50%;margin-top:-36px;width:72px;height:72px;text-indent:100%;white-space:nowrap;overflow:hidden;z-index:10;background:url(../images/ico_sliding.png) no-repeat;}
.index_focus_pre{left:30px;background-position:0 0;}
.index_focus_pre:hover{background-position:0 -144px;}
.index_focus_next{right:30px;background-position:0 -72px;}
.index_focus_next:hover{background-position:0 -216px;}
.main{width:1200px;margin:0 auto;margin-top:30px;}
.in_news{width:385px;background:url(../images/new_bg.png) no-repeat bottom left;}
.demo {position:relative;}
.tabbtn {height:40px;line-height:40px;background:#FFF4EE;}
.news_top{border-bottom:1px dashed #AB8A6C;padding-bottom:10px;margin-bottom:8px;}
.tabbtn li {margin-right:2px;float:left;width:100px;height:40px;line-height:40px;text-align:center;position:relative;cursor:pointer;}
.tabbtn li a{height:40px;line-height:40px;overflow:hidden;width:100px;display:block;font-family:"微软雅黑";float:left;color:#AD8052;font-size:14px;text-align:center;cursor:pointer;}
.tabbtn li.current a {background:#AD8052;color:#fff;}
.tabcon {position:relative;}
.tabcon .subbox {position:absolute;left:0;top:0;}
.tabcon .sublist {padding:12px 10px;}
.sublist ul{margin-top:10px;padding-bottom:8px;}
.sublist li {clear:both;height:28px;line-height:28px;font-size:12px;}
.sublist li .dot {float:left;margin:0 5px 0 0;font-size:12px;color:#80644A;}
.sublist li a{float:left;color:#3D3935;font-family:"微软雅黑";}
.sublist li .timer{float:right;color:#999999;}
.news_img img{padding:1px;}
.news_title {width:240px;margin-left:10px;color:#666666;line-height:22px;}
.news_title h4 a{font-size:12px;color:#3D3935;font-weight:normal;font-family:"微软雅黑";}
.news_title p a{color:#7C7C7C;font-family:"微软雅黑";}
.squr_pic{margin-left:23px;width:762px;background:url("../images/new_right.png") no-repeat left center;height:250px;padding-left:28px;}
.squr_pic a{display:inline-block;position:relative;}
.squr_pic a p{position:absolute;bottom:0px;left:0;background:url(../images/index_bg.png) repeat-x;height:27px;line-height:27px;width:100%;text-align:center;color:#fff;}
.footer{ margin-top:40px;padding-top:5px;width: 100% ;height: 60px;background: #551617}
.foot{text-align: center; color:#FFFFFF}
.clear{ clear:both;}
.c5{ -moz-border-radius:10px;border-radius:10px;}
.com_txt{ width:900px; height:auto; margin:auto; overflow:hidden;}
.com_txt h1{font-size:22px;line-height:38px; color:#333333; }
.list_pic_show{ width:860px; }
.list_pic_show p{font-size:16px;line-height:38px; color:#333333; }
.list_pic_show li{ width:260px; height:300px; float:left; margin:10px; text-align:center; color:#555; font-size:14px; line-height:28px;}
.list_pic_show li img{ width:260px; height:270px; }
.content2{ background:none; padding-top:12px; *height:100%;}
.sidebar{ width:230px; margin-top:10px; overflow:hidden; border:2px solid #950c0c;float:left; -moz-border-radius:10px;border-radius:10px;}
.sidebar h3{ width:230px; height:40px; background:#950c0c; font-size:18px; color:#fff; line-height:38px; text-indent:1em;font-weight:bold;}
.sidebar p{font-size:15px; color:#555; line-height:28px; text-indent:1em;font-weight:normal;}
.side_list{ width:223px; margin-left:7px; overflow:hidden;}
.side_list li{ width:188px; height:32px; line-height:32px; padding-left:15px; margin:5px;}
.side_list li a{ font-size: 16px;text-align: center}
.side_list li a:hover{ color:#F90; text-decoration:underline;}
.c{clear:both; overflow:hidden; zoom:1;}
.my_page{ text-align:center; margin-top:35px; margin-bottom:25px; clear:both;}
.my_page li { display:inline; text-align:center; margin:0px 2px; padding:0px; font-size:12px;}
.my_page li a{padding:2px 7px; text-align:center; border:1px solid #ccc; color:#333; text-decoration:none; background:#fff;}
.my_page li a:hover{background:#a00303; border-color:#a00303; color:#fff;}
.my_page li.hover a{background:#a00303; border-color:#a00303; color:#fff;}
.main_con{ width:900px; float:right;}
.main_con p{text-indent:2em; color:#555; font-size:14px; line-height:24px; }
.in_cp{ width:900px;height:51px; line-height:48px; color:#f88913; margin-bottom:12px; border-bottom:2px solid #F90;}
.in_cp h3{ float:left;font-size:18px; margin-left:15px; letter-spacing:1px;display:inline;font-family:"Microsoft YaHei"; font-weight:bold;}
.in_cp p{ color:#f88913;float:right; margin-right:28px; display:inline; margin-top:8px; font-size: 16px;}
.in_cp p a{color:#f88913;}
.in_cp p a:hover{ color:#ff0000; text-decoration:underline;}
.login{ width:800px; height:auto; min-height:300px; padding:0px; margin:0px auto; }
.login_in{ width:800px; height:auto; margin:0px auto; padding-top:1px;}
.login_div{ width:350px; height:auto; margin:0px auto;background:#fff; background-color:rgba(255,255,255,0.8); padding:50px;-moz-border-radius:50px;border-radius:50px;}
.login_div h2{font-size:28px; line-height:50px; color:#be1d15; text-align: center; font-weight:normal; border-bottom:1px dotted #be1d15;}
.login_info{width:350px; height:auto; margin:20px auto;font-size:14px; line-height:30px; color:#666;}
.input{ width:350px; height:30px; padding:1px 5px; border:1px solid #be1d15; font-size:14px; color:#333; outline:none;}
.sub{width:350px; height:40px; padding:0px; margin:20px; float:left; background-color:#be1d15; text-align:center;font-size:18px; line-height:40px; border:none; color:#fff; }
.sub:hover{ background-color:#480b08;}
.sub a{ font-size:18px; color:#fff;}
.textarea{ width:350px; height:120px; padding:1px 5px; border:1px solid #be1d15; font-size:14px; color:#333; outline:none;}
.liuyan_div{ width:750px; height:auto; margin:0px auto;background:#fff; background-color:rgba(255,255,255,0.8); padding:50px;-moz-border-radius:50px;border-radius:50px;}
.liuyan_div{ width:750px; height:auto; margin:0px auto;background:#fff; background-color:rgba(255,255,255,0.8); padding:50px;-moz-border-radius:50px;border-radius:50px;}
.liuyan_div h2{font-size:28px; line-height:50px; color:#be1d15; text-align: center; font-weight:normal; border-bottom:1px dotted #be1d15;}
总结
代码演示及购买：http://yuanyuankeji.net/quye001-6/
客服微信：lcxxg666
1012
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
