web网页设计实例作业 ——自适应绿色茶叶公司(12页) HTML+CSS+JS网页设计期末课程大作业
常见网页设计作业题材有
个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他等网页设计题目,A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!
文章目录
web网页设计实例作业 ——自适应绿色茶叶公司(12页) HTML+CSS+JS网页设计期末课程大作业一、作品展示二、文件目录三、代码实现四、获取更多源码五、学习资料六、更多源码一、作品展示
二、文件目录
三、代码实现
<!DOCTYPE html><html lang="zh-cn"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>联系我们</title><meta name="keywords" content="联系我们" /><meta name="description" content="联系我们" /><meta name="applicable-device"content="pc,mobile"><link href="css/bootstrap.css" rel="stylesheet"><link href="css/bxslider.css" rel="stylesheet"><link href="css/style.css" rel="stylesheet"><script src="js/jquery.min.js"></script><script src="js/bxslider.min.js"></script><script src="js/common.js"></script><script src="js/bootstrap.js"></script><!--[if lt IE 9]><script src="js/html5shiv.min.js"></script><script src="js/respond.min.js"></script><![endif]--></head><body><header><div class="top_menu"><div class="container"><span class="top_name">欢迎光临~茶叶公司</span><div class="language">语言选择： <a href="javascript:;" title="中文版"><img src="picture/chinese.gif" alt="中文版"></a> ∷ <a href="javascript:;" title="English"><img src="picture/english.gif" alt="英文版"></a></div></div></div><!-- Fixed navbar --><nav class="navbar navbar-default navbar-fixed-top"><div class="container"><div class="navbar-header"><button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><p class="logo_box"><a href="javascript:;"><img src="picture/53007d5b00000.png" class="logo" alt=""/></a></p></div><div id="navbar" class="navbar-collapse collapse"><ul class="nav navbar-nav navbar-nav-c"><li><a href="index.html">网站首页</a></li><li><a href="gsjj.html">公司简介</a></li><li class="dropdown"><a href="chanpingzhongxin.html">产品中心</a><a href="javascript:;" id="app_menudown" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><span class="glyphicon glyphicon-menu-down btn-xs"></span></a><ul class="dropdown-menu nav_small" role="menu"><li><a href="javascript:;">产品大类1</a></li><li><a href="javascript:;">产品大类2</a></li><li><a href="javascript:;">产品大类3</a></li><li><a href="javascript:;">产品大类4</a></li></ul></li><li class="dropdown"><a href="xinwenliebiao.html">新闻中心</a><a href="javascript:;" id="app_menudown" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><span class="glyphicon glyphicon-menu-down btn-xs"></span></a><ul class="dropdown-menu nav_small" role="menu"><li><a href="javascript:;">公司新闻</a></li><li><a href="javascript:;">行业新闻</a></li><li><a href="javascript:;">科技创新</a></li></ul></li><li class="dropdown"><a href="xzlb.html">下载中心</a><a href="javascript:;" id="app_menudown" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><span class="glyphicon glyphicon-menu-down btn-xs"></span></a><ul class="dropdown-menu nav_small" role="menu"><li><a href="javascript:;">帮助文档</a></li><li><a href="javascript:;">档案下载</a></li></ul></li><li class="dropdown"><a href="xclb.html">公司相册</a><a href="javascript:;" id="app_menudown" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><span class="glyphicon glyphicon-menu-down btn-xs"></span></a><ul class="dropdown-menu nav_small" role="menu"><li><a href="javascript:;">员工相册</a></li><li><a href="javascript:;">客户案例</a></li></ul></li><li><a href="zaixianliuyan.html">在线留言</a></li><li><a href="lxwm.html">联系我们</a></li></ul></div><!--/.nav-collapse --></div></nav><!-- bxslider --><div class="flash"><ul class="bxslider"><li><a href="javascript:;"><img src="picture/53007d7931975.jpg" alt="广告一" /></a></li><li><a href="javascript:;"><img src="picture/5300811240d99.jpg" alt="广告二" /></a></li></ul></div><script type="text/javascript"> $('.bxslider').bxSlider({adaptiveHeight: true,infiniteLoop: true,hideControlOnEnd: true,auto:true});</script></header><div class="container"><div class="row"><!-- right --><div class="col-xs-12 col-sm-8 col-md-9" style="float:right"><div class="list_box"><h2 class="left_h1">联系我们</h2><div class="contents"><p> 联系我们 联系我们 联系我们 联系我们 </p><p> 联系我们 联系我们 联系我们 </p></div></div></div><!-- left --><div class="col-xs-12 col-sm-4 col-md-3"><div class="left_nav" id="categories"><h1 class="left_h1">栏目导航</h1><ul class="left_nav_ul" id="firstpane"><li><a class="biglink" href="javascript:;">公司简介</a><span class="menu_head">+</span><ul class="left_snav_ul menu_body"></ul></li><li><a class="biglink" href="javascript:;">联系我们</a><span class="menu_head">+</span><ul class="left_snav_ul menu_body"></ul></li><li><a class="biglink" href="javascript:;">我们的服务优势</a><span class="menu_head">+</span><ul class="left_snav_ul menu_body"></ul></li></ul></div><form id="searchform" method="get" action="/T03/search/index/g/c.html"><div class="input-group search_group"><input type="text" name="name" class="form-control input-sm" placeholder="产品搜索"><span class="input-group-btn"><span id="submit_search" onclick="searchform.submit();" title="产品搜索" class="glyphicon glyphicon-search btn-lg" aria-hidden="true"></span></span></div></form><div class="left_news"><h1 class="left_h1">新闻中心</h1><ul class="index_news"><li><a href="javascript:;" title="油价上涨激发勘探业石油钻探设备出">油价上涨激发勘探业石油钻探设备出</a><span class='news_time'>-09-28</span></li><li><a href="javascript:;" title="涨激发勘探业石油钻探设备出口激增">涨激发勘探业石油钻探设备出口激增</a><span class='news_time'>-05-06</span></li><li><a href="javascript:;" title="公司全面实施国际质量管理和质量保证体系">公司全面实施国际质量管理和质量保证体系</a><span class='news_time'>-05-06</span></li><li><a href="javascript:;" title="国际质量管理和质量保证体系国际质量管理">国际质量管理和质量保证体系国际质量管理</a><span class='news_time'>-09-12</span></li><li><a href="javascript:;" title="迎中兴金鸡湖花园开盘，大型团装团购征集样板房活动">迎中兴金鸡湖花园开盘，大型团装团购征集样板房活动</a><span class='news_time'>-12-19</span></li></ul></div><div class="index_contact"><h1 class="title_h1">联系我们</h1><span class="title_span">CONTACT US</span><p style="padding-top:20px;">联系人：xxxxxx</p><p>手机：XXX</p><p>电话：020-XXX</p><p>邮箱：xxxxxx@</p><p>地址： XXX</p></div></div></div></div><nav class="navbar navbar-default navbar-fixed-bottom footer_nav"><div class="foot_nav btn-group dropup"><a class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="javascript:;"><span class="glyphicon glyphicon-share btn-lg" aria-hidden="true"></span> 分享</a><div class="dropdown-menu webshare"><!-- JiaThis Button BEGIN --><div class="jiathis_style_32x32"> <a class="jiathis_button_qzone"></a> <a class="jiathis_button_tsina"></a> <a class="jiathis_button_tqq"></a> <a class="jiathis_button_weixin"></a> <a class="jiathis_button_renren"></a> <a href="javascript:;" class="jiathis jiathis_txt jtico jtico_jiathis" target="_blank"></a> </div><script type="text/javascript" src="js/jia.js" charset="utf-8"></script> <!-- JiaThis Button END --></div></div><div class="foot_nav"><a href="javascript:;"><span class="glyphicon glyphicon-phone btn-lg" aria-hidden="true"></span>手机</a></div><div class="foot_nav"><a id="gotocate" href="javascript:;"><span class="glyphicon glyphicon-th-list btn-lg" aria-hidden="true"></span>分类</a></div><div class="foot_nav"><a id="gototop" href="javascript:;"><span class="glyphicon glyphicon-circle-arrow-up btn-lg" aria-hidden="true"></span>顶部</a></div></nav><footer><div class="copyright"><p>CopyRight All Right Reserved ICP:XXX<a href="javascript:;" target="_blank">网站地图</a></p><p class="copyright_p">地址：XXX 电话：020-XXX 传真：020-98-XXX </p></div></footer><!--客服面板--><link rel="stylesheet" type="text/css" href="css/online.css" /><div id="cmsFloatPanel"><div class="ctrolPanel"><a class="service" href="javascript:;"></a><a class="message" href="javascript:;"></a><a class="qrcode" href="javascript:;"></a><a class="arrow" title="返回顶部" href="javascript:;"></a></div><div class="servicePanel"><div class="servicePanel-inner"><div class="serviceMsgPanel"><div class="serviceMsgPanel-hd"><a href="javascript:;"><span>关闭</span></a></div><div class="serviceMsgPanel-bd"><!--在线QQ--><div class="msggroup"><a target="_blank" href="javascript:;"><img class="qqimg" src="picture/ea25c1e1149d470f8422fca4520efa23.gif" alt="QQ在线客服"/>技术支持</a></div><!--在线MSN--><div class="msggroup"><a href="javascript:;" target="blank"><img class="qqimg" src="picture/msn.jpg" alt="MSN在线客服"/>xxxxxx</a></div><!--在线SKYPE--><div class="msggroup"><a href="javascript:;"><img class="qqimg" src="picture/skype.gif" alt="SKYPE在线客服">xxxxxx</a></div><!--淘宝旺旺--><div class="msggroup"><a target=blank href="javascript:;"><img SRC="picture/online.aw" alt="点击联系我"></a></div><!--旺旺国内版--><div class="msggroup"><a target="_blank" href="javascript:;" ><img src="picture/online.aw" alt="点击联系我"/></a></div><!--旺旺国际版--><div class="msggroup"><a class="alitalk-link" data-uid="alibabatest01" target="_blank" href="javascript:;"><img class="qqimg" src="picture/online.aw" alt="点击联系我"/>abcde</a></div></div><div class="serviceMsgPanel-ft"></div></div><div class="arrowPanel"><div class="arrow02"></div></div></div></div><div class="messagePanel"><div class="messagePanel-inner"><div class="formPanel"><div class="formPanel-bd"><!-- JiaThis Button BEGIN --><div class="jiathis_style_32x32"> <a class="jiathis_button_qzone"></a> <a class="jiathis_button_tsina"></a> <a class="jiathis_button_tqq"></a> <a class="jiathis_button_weixin"></a> <a class="jiathis_button_renren"></a> <a href="javascript:;" class="jiathis jiathis_txt jtico jtico_jiathis" target="_blank"></a> </div><script type="text/javascript" src="js/jia.js" charset="utf-8"></script> <!-- JiaThis Button END --><a type="button" class="btn btn-default btn-xs" href="javascript:;" style="margin: 6px 0px 0px 10px;">关闭</a></div></div><div class="arrowPanel"><div class="arrow01"></div><div class="arrow02"></div></div></div></div><div class="qrcodePanel"><div class="qrcodePanel-inner"><div class="codePanel"><div class="codePanel-hd"><span style="float:left">用手机扫描二维码</span><a href="javascript:;"><span>关闭</span></a></div><div class="codePanel-bd"><img src="picture/529c3fcc09d41.jpg" alt="二维码"/></div></div><div class="arrowPanel"><div class="arrow01"></div><div class="arrow02"></div></div></div></div></div><script type="text/javascript" src="js/online.js"></script></body></html><script type="text/javascript">var winHeight=200;var timer=null;function show(){document.getElementById("popWin").style.display="block"; timer=setInterval("lift(5)",2);} function hid(){timer=setInterval("lift(-5)",2);} function lift(n) {var w=document.getElementById("popWin"); var h=parseInt(w.style.height||w.currentStyle.height);if (h<winHeight && n>0 || h>1 && n<0){w.style.height=(h+n).toString()+"px"; } else{w.style.display=(n>0?"block":"none");clearInterval(timer);} } window.onload=function(){setTimeout("show()",1000);} </script>
四、获取更多源码
~ 关注我，点赞博文~ 每天带你涨知识!
相关问题可以相互学习，可关注↓公Z号 获取更多源码 !
五、学习资料
web前端 零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)
适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站
六、更多源码
PC电脑端关注我们
HTML5期末考核大作业源码* 包含个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他可满足大学生网页大作业网页设计需求, 喜欢的可以下载!
学生网页作业web网页设计实例作业 ——自适应绿色茶叶公司(12页) HTML+CSS+JS网页设计期末课程大作业
