作品介绍
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;} _txt{ width:900px; height:auto; margin:auto; overflow:hidden;} _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/quye001-6/
客服微信:lcxxg666
更多推荐
HTML5网页设计期末大作业 ~金福普洱茶叶网页设计成品6页面带视频留言验证(HTML+CSS+JS)~ 学生hbuilder网页设计作业成品源码
发布评论