作品介绍
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="data: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="data: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="data: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="data: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="data: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="data: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="data:images/20210730104318_49803.jpg" alt="" width="280" height="130px;"><!-- 祥源·祁红 -->  <!-- <p>祥源·祁红</p>--></a><a href="#" class="fl"><img src="data:images/20210730104340_48569.jpg" alt="" width="140"><!-- 祥源白茶 --> <!-- <p>祥源·普洱</p>--></a><a href="#" class="fl" style="margin-left:1px;"><img src="data:images/20210730104451_87697.jpg" alt="" width="140"><!-- 新品推荐 --><!--<p>其他茶</p>--></a></div></div><div class="fr"><a href="#"><img src="data:images/20160317102922_43873.jpg" width="240" height="130"> </a> <br>
<a href="#"><img src="data: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

HTML5网页设计期末大作业 ~金福普洱茶叶网页设计成品6页面带视频留言验证(HTML+CSS+JS)~ 学生hbuilder网页设计作业成品源码相关推荐

HTML5期末大作业：简单全屏音乐个人网站模板——音乐娱乐网站(6页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码
HTML5期末大作业:简单全屏音乐个人网站模板--音乐娱乐网站(6页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码常见网页 ...
HTML5期末大作业：明星个人主页介绍网站设计——明星薛子谦(7页)带轮播特效 HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计大学生毕设网页设计
HTML5期末大作业:明星个人主页介绍网站设计--明星薛子谦(7页)带轮播特效 HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计大学生毕设网页设计源码H ...
HTML5期末大作业：网站——美丽家乡(南京介绍7个页面) 家乡文化介绍学生DW网页设计作业源码(HTML+CSS+JS) ~学生dreamweaver网页设计作业成品
HTML期末大作业~ 学生HTML个人网页作业作品下载 ~ web课程设计网页规划与设计 ~大学生个人网站作业模板 ~简单个人网页制作临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到 ...
HTML5期末大作业：动物宠物主题网站设计——宠物网(8页)HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 web学生网页设计作业源码...
常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装. 体育. 化妆品. 物流. 环保. 书籍. 婚纱. 军 ...
HTML5期末大作业：旅游景点介绍网站设计——平遥古城（6页）HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计...
常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装. 体育. 化妆品. 物流. 环保. 书籍. 婚纱. 军 ...
HTML5期末大作业：电商购物网站设计——仿品优购 (毕业设计含论文) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计学生电商网页作业...
常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装. 体育. 化妆品. 物流. 环保. 书籍. 婚纱. 军 ...
HTML5期末大作业：山河旅行社网站设计——山河旅行社网站(5页) HTML+CSS+JavaScript 学生DW网页出行旅途游玩
HTML5期末大作业:山河旅行社网站设计--山河旅行社网站(5页) HTML+CSS+JavaScript 学生DW网页出行旅途游玩常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游 ...
HTML5期末大作业：出行网站设计——西安旅游-高质量(9页) HTML+CSS+JavaScript 学生DW网页设计
HTML5期末大作业:出行网站设计--西安旅游-高质量(9页) HTML+CSS+JavaScript 学生DW网页设计常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. ...
HTML5期末大作业：仿唯品会购物网站设计——仿唯品会购物商城(5页) HTML+CSS+JavaScript 学生DW网页设计作业成品商城网站设计
HTML5期末大作业:仿唯品会购物网站设计--仿唯品会购物商城(5页) HTML+CSS+JavaScript 学生DW网页设计作业成品商城网站设计常见网页设计作业题材有个人. 美食. 公司. ...

HTML5网页设计期末大作业 ~金福普洱茶叶网页设计成品6页面带视频留言验证(HTML+CSS+JS)~ 学生hbuilder网页设计作业成品源码