HTML5期末大作业：茶页文化网站设计——气高端企业自适应响应式网站模板(6个页面) HTML+CSS+JavaScript 期末作业HTML代码 学生网页课程设计期末作业下载 web网页设计制作成品


常见网页设计作业题材有 ​​个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他​​​ 等网页设计题目, ​​A+水平作业​​​, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!​​​​​



1.临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？ 网页要求的总数量太多？
2.没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~
3.原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，这是一个不错的网页制作，画面精明，非常适合初学者学习使用。


临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？ 网页要求的总数量太多？ 没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~

原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，这是一个不错的网页制作，画面精明，非常适合初学者学习使用。

作品介绍

​​1.网页作品简介​​​ ：HTML期末大学生网页设计作业 A+水平 ,喜欢的可以下载，文章页支持手机PC响应式布局。。包含：​​网站首页, 公司简介, 产品中心, 新闻中心, 下载中心, 公司相册, 在线留言, 联系我们，​​总共12个页面。

​​2.网页作品编辑​​​：此作品为学生期末大作业网页设计题材，代码为简单学生水平 html+css 布局制作，作品下载后可使用任意HTML编辑软件（例如：​​DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++​​ 等任意HTML软件编辑修改网页）。

​​3.网页作品布局​​：网页布局整体为响应式布局、LOGO、导航、主体内容布局。子页面多种布局，兴趣爱好内容使用图片列表布局，成绩页面插入了表格，联系我们使用图片对齐方式设置了左对齐。

​​4.网页作品技术​​：使用DIV+CSS制作网页, 背景图、音乐、视频、flash、鼠标经过及选中导航变色效果、下划线 、等。 表单提交、评论留言，并使用JavaScript制作了表单判断（提交时表单不能为空）。


文章目录

一、作品展示

1.网站首页

HTML5期末大作业：茶页文化网站设计——气高端企业自适应响应式网站模板(6个页面) HTML+CSS+JavaScript_html5

2.公司简介

HTML5期末大作业：茶页文化网站设计——气高端企业自适应响应式网站模板(6个页面) HTML+CSS+JavaScript_css_02

3.公司新闻

HTML5期末大作业：茶页文化网站设计——气高端企业自适应响应式网站模板(6个页面) HTML+CSS+JavaScript_ico_03

4.在线留言

HTML5期末大作业：茶页文化网站设计——气高端企业自适应响应式网站模板(6个页面) HTML+CSS+JavaScript_css_04

5. 下载中心

HTML5期末大作业：茶页文化网站设计——气高端企业自适应响应式网站模板(6个页面) HTML+CSS+JavaScript_javascript_05

二、文件目录

HTML5期末大作业：茶页文化网站设计——气高端企业自适应响应式网站模板(6个页面) HTML+CSS+JavaScript_ico_06

三、代码实现

<!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>html5响应式自适应茶叶公司企业网站html源码静态页面 - </title><meta name="keywords" content=",xxx" /><meta name="description" content="企业网站系统xxx是采用PHP+MYSQL技术和MVC模式进行开发的，架构清晰，代码易于维护。支持伪静态功能，可生成google和百度地图，支持自定义url、关键字和描述，符合SEO标准。拥有企业网站常用的模块功能(企业简介模块、新闻模块、产品模块、下载模块、图片模块、在线留言、在线订单、友情链接、网站地图等)，强大灵活的后台管理功能，可为企业打造出专业且具有营销力的标准网站。" /><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><!-- Fixed navbar --><nav class="navbar navbar-default"><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">导航菜单</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="javascript:;"><img src="images/53007d5b00000.png" class="logo" alt="企业网站管理系统PHP版V2.0"/></a></div><div id="navbar" class="navbar-collapse collapse"><ul class="nav navbar-nav"><li><a href="javascript:;">网站首页</a></li><li><a href="javascript:;">公司简介</a></li><li class="dropdown"><a href="javascript:;">产品中心</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></ul></li><li class="dropdown"><a href="javascript:;">新闻中心</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="javascript:;">下载中心</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="javascript:;">公司相册</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="javascript:;">在线留言</a></li><li><a href="javascript:;">联系我们</a></li></ul></div><!--/.nav-collapse --></div></nav><!-- bxslider --><div class="flash"><ul class="bxslider"><li><a href="javascript:;"><img src="images/53007d7931975.jpg" alt="广告一" /></a></li><li><a href="javascript:;"><img src="images/5300811240d99.jpg" alt="广告二" /></a></li></ul></div><script type="text/javascript">        </header><!-- main --><div class="main"><div class="container"><div class="row"><div class="col-xs-12 col-sm-12 col-md-12"><div class="about_box"><h2 class="about_h2">公司简介</h2><span class="about_span">ABOUT US</span><section><img align="left" src="images/about.png" alt="公司简介"><p class="about_contents">
  企业网站系统xxx是采用PHP+MYSQL技术和MVC模式进行开发的，架构清晰，代码易于维护。支持伪静态功能，可生成google和百度地图，支持自定义url、关键字和描述，符合SEO标准。拥有企业网站常用的模块功能(企业简介模块、新闻模块、产品模块、下载模块、图片模块、在线留言、在线订单、友情链接、网站地图等)，强大灵活的后台管理功能，可为企业打造出专业且具有营销力的标准网站。

网站系统功能介绍：
1. 单页模块：可发布企业的各类信息，如企业简介、组织机构、企业荣誉、联系方式等，并可随意增删。 
2. 新闻模块：可发布企业新闻和行业新闻等，支持二级栏目，栏目个数无限制。
3. 产品模块：产品支持二级分类，并可对产品直接下订单询价，且支持邮件通知，更符合企业营销。 
4. 图片模块：以图片相册的方式，可发布成功案例或公司相册等栏目，更直观的展示企业的优越...</p><section></div></div></div></div><div class="container"><div class="row"><div class="col-xs-12 col-sm-12 col-md-12"><div class="index_product"><img src="images/tea.png" alt="产品展示" style="display: block; margin:0 auto; padding-top:50px;" /><div class="product_list"><div class="col-sm-4 col-md-2 col-mm-6 product_img"><a href="javascript:;"><img src="images/5300c196f0537.png" class="opacity_img" alt="行车记录仪 白色真爱版WDR宽动态"></a><p class="product_title"><a href="javascript:;" title="行车记录仪 白色真爱版WDR宽动态">行车记录仪 白色真爱版WDR宽动态</a></p></div><div class="col-sm-4 col-md-2 col-mm-6 product_img"><a href="javascript:;"><img src="images/5300c3850b71b.jpg" class="opacity_img" alt="PAPAGO行车记录仪1080P全高清"></a><p class="product_title"><a href="javascript:;" title="PAPAGO行车记录仪1080P全高清">PAPAGO行车记录仪1080P全高清</a></p></div><div class="col-sm-4 col-md-2 col-mm-6 product_img"><a href="javascript:;"><img src="images/5300c83ab71b0.jpg" class="opacity_img" alt=" GoSafe650安全驾驶多功能行车记录仪"></a><p class="product_title"><a href="javascript:;" title=" GoSafe650安全驾驶多功能行车记录仪"> GoSafe650安全驾驶多功能行车记</a></p></div><div class="col-sm-4 col-md-2 col-mm-6 product_img"><a href="javascript:;"><img src="images/5300c62e98968.jpg" class="opacity_img" alt="爱国者蓝牙后视镜行车记录仪"></a><p class="product_title"><a href="javascript:;" title="爱国者蓝牙后视镜行车记录仪">爱国者蓝牙后视镜行车记录仪</a></p></div><div class="col-sm-4 col-md-2 col-mm-6 product_img"><a href="javascript:;"><img src="images/5300c769af79e.jpg" class="opacity_img" alt="惠普HP F310行车记录仪 极地白"></a><p class="product_title"><a href="javascript:;" title="惠普HP F310行车记录仪 极地白">惠普HP F310行车记录仪 极地白</a></p></div><div class="col-sm-4 col-md-2 col-mm-6 product_img"><a href="javascript:;"><img src="images/5300c8cb76417.jpg" class="opacity_img" alt="东风A60专用DVD导航仪"></a><p class="product_title"><a href="javascript:;" title="东风A60专用DVD导航仪">东风A60专用DVD导航仪</a></p></div></div></div><div class="left_nav index_left_nav" id="categories"><h2 class="pro_h2">导航栏目</h2><ul class="left_nav_ul" id="firstpane"><li><a class="biglink" href="javascript:;">产品大类1</a><span class="menu_head">+</span><ul class="left_snav_ul menu_body"><li><a href="javascript:;">产品小类1_1</a></li><li><a href="javascript:;">产品小类1_2</a></li><li><a href="javascript:;">产品小类1_3</a></li></ul></li><li><a class="biglink" href="javascript:;">产品大类2</a><span class="menu_head">+</span><ul class="left_snav_ul menu_body"><li><a href="javascript:;">产品小类2_1</a></li><li><a href="javascript:;">产品小类2_2</a></li></ul></li><li><a class="biglink" href="javascript:;">产品大类3</a><span class="menu_head">+</span><ul class="left_snav_ul menu_body"></ul></li></ul></div></div></div></div><div class="container"><div class="row"><div class="col-xs-12 col-sm-8 col-md-7"><div class="news_box"><h2 class="about_h2">新闻中心</h2><span class="about_span">NEWS CENTER</span><ul class="index_news"><li><a href="javascript:;" title="油价上涨激发勘探业石油钻探设备出">油价上涨激发勘探业石油钻探设备出</a><span class='news_time'>2013-09-28</span></li><li><a href="javascript:;" title="涨激发勘探业石油钻探设备出口激增">涨激发勘探业石油钻探设备出口激增</a><span class='news_time'>2013-05-06</span></li><li><a href="javascript:;" title="公司全面实施国际质量管理和质量保证体系">公司全面实施国际质量管理和质量保证体系</a><span class='news_time'>2013-05-06</span></li><li><a href="javascript:;" title="国际质量管理和质量保证体系国际质量管理">国际质量管理和质量保证体系国际质量管理</a><span class='news_time'>2013-09-12</span></li><li><a href="javascript:;" title="迎中兴金鸡湖花园开盘，大型团装团购征集样板房活动">迎中兴金鸡湖花园开盘，大型团装团购征集样板房活动</a><span class='news_time'>2013-12-19</span></li></ul></div></div><div class="col-xs-12 col-sm-4 col-md-5"><div class="index_contact"><h2 class="about_h2">联系我们</h2><span class="about_span">CONTACT US</span><p style="padding-top:20px;">联系人：</p><p>手 机：xxx</p><p>电 话：020-xxx</p><p>邮 箱：xxx@163.com</p><p>地 址：xxx</p></div><div class="btn-group dropup" style="margin-bottom:15px;"><button type="button" class="btn btn-default btn-sm" data-toggle="dropdown" aria-expanded="false" style="line-height:13px;background:transparent; border:1px solid #e6d5c4;">---友情链接---</button><button type="button" class="btn btn-default dropdown-toggle btn-sm"  style="line-height:13px;background:transparent;border:1px solid #e6d5c4;"><span class="caret"></span><span class="sr-only">友情链接</span></button><ul class="dropdown-menu" role="menu"><li><a target="_blank" href="http://bulamao.taobao.com">淘宝店</a></li><li><a target="_blank" href="http://">外贸网站</a></li></ul></div></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 2013 All Right Reserved 外贸网站&nbsp;ICP:xxx<a href="javascript:;" target="_blank">网站地图</a></p><p class="copyright_p">地址：xxx &nbsp;电话：020-xxx &nbsp;传真：020-98-xxx&nbsp;</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="http://wpa.qq.com/pa?p=2:xxx:52" alt="QQ在线客服"/>售前客服</a></div><div class="msggroup"><a target="_blank" href="javascript:;"><img class="qqimg" src="http://wpa.qq.com/pa?p=2:xxx:52" alt="QQ在线客服"/>技术咨询</a></div><!--在线MSN--><div class="msggroup"><a href="javascript:;" target="blank"><img class="qqimg" src="images/msn.jpg" alt="MSN在线客服"/>xxx</a></div><!--在线SKYPE--><div class="msggroup"><a href="javascript:;"><img  class="qqimg" src="images/skype.gif" alt="SKYPE在线客服">xxx</a></div><!--淘宝旺旺--><div class="msggroup"><a target=blank href="javascript:;"><img SRC="http://amos.im.alisoft.com/online.aw?v=2&uid=&site=cntaobao&s=1&charset=utf-8" alt="点击联系我"></a></div><!--旺旺国内版--><div class="msggroup"><a target="_blank" href="javascript:;" ><img src="http://amos.alicdn.com/online.aw?v=2&uid=martin7752&site=cnalichn&s=10&charset=UTF-8" alt="点击联系我"/></a></div><!--旺旺国际版--><div class="msggroup"><a class="alitalk-link" data-uid="alibabatest01" target="_blank" href="javascript:;"><img class="qqimg" src="http://amos.alicdn.com/online.aw?v=2&uid=alibabatest01&site=enaliint&s=22&charset=UTF-8" alt="点击联系我"/>xxx</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="images/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">