web课程设计网页规划与设计：中国风茶文化网站设计(6个页面) HTML+CSS+JavaScript 期末作业HTML代码 学生网页课程设计期末作业下载
临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~
原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，这是一个不错的网页制作，画面精明，非常适合初学者学习使用。
作品介绍
1.网页作品简介方面：HTML期末大学生网页设计作业 ,喜欢的可以下载，文章页支持手机PC响应式布局。
2.网页作品编辑方面：此作品为学生个人主页网页设计题材，代码为简单学生水平 html+css 布局制作，作品下载后可使用任意HTML编辑软件(例如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm所有编辑器均可使用)
3.网页作品布局方面：网页布局整体为LOGO、导航、主体内容布局。子页面多种布局，兴趣爱好内容使用图片列表布局，成绩页面插入了表格，联系我们使用图片对齐方式设置了左对齐。
4.网页作品技术方面：使用CSS制作了网页背景图、鼠标经过及选中导航变色效果、下划线等。 首页制作了留言表单，同时简单使用JavaScript制作了表单判断(提交时表单不能为空)
文章目录
web课程设计网页规划与设计：中国风茶文化网站设计(6个页面) HTML+CSS+JavaScript 期末作业HTML代码 学生网页课程设计期末作业下载作品介绍一、作品演示二、代码目录三、代码实现四、web前端入门到高级(视频+源码+资料+面试)一整套 (教程)五、源码获取六、更多HTML期末大作业(成品下载) >>>戳我>>>点击进入200例期末大作业作品 二、代码目录 三、代码实现<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>海洋茶文化城</title><link href="css/style.css" type="text/css" rel="stylesheet" /><link href="css/lanrenzhijia.css" type="text/css" rel="stylesheet" /></head><body><div id="wrap"><!--整体--><div><img src="img/nav.png" width="100%"/></div><div id="nav-nav"><!--导航开始--><ul id="nav"><li><a href="index.html">网站首页</a></li><img src="img/2.png"><li><a href="about.html">走进茶文化城</a></li><img src="img/2.png"><li><a href="#">楼盘相册</a></li><img src="img/2.png"><li><a href="news.html">活动新闻</a></li><img src="img/2.png"><li><a href="news.html">政策法规</a></li><img src="img/2.png"><li><a href="news.html">健康养生</a></li></ul></div><!--导航结束--><div><img src="img/banner.png" width="100%" /></div><div class="index-box"><!--主要内容开始(幻灯片公司新闻主推户型)--><div class="box-one"><!-- 轮播广告 --><div id="banner_tabs" class="flexslider"><ul class="slides"><li><a title="" target="_blank" href="#"><img width="100%" alt="幻灯片1" style="background: url(img/1.jpg) no-repeat center;" src="img/alpha.png"></a></li><li><a title="" href="#"><img width="100%" alt="幻灯片2" style="background: url(img/2.jpg) no-repeat center;" src="img/alpha.png"></a></li><li><a title="" href="#"><img width="100%" alt="幻灯片3" style="background: url(img/3.jpg) no-repeat center;" src="img/alpha.png"></a></li></ul><ol id="bannerCtrl" class="flex-control-nav flex-control-paging"><li><a><strong>1</strong></a></li><li><a><strong>2</strong></a></li><li><a><strong>3</strong></a></li></ol></div></div><div class="box-two"><div class="box-twonav"><p>公司新闻</p><div class="box-b"><a href="news.html"><img src="img/more.png" width="81"/></a></div></div><div class="news_list"><ul><li><span>-06-01</span> <a href="about.html" title="高房价下的10类“中国式蜗居” ">高房价下的10类“中国式蜗居” </a></li><li><span>-06-01</span><a href="about.html" title="国土资源部：26宗闲置土地曝光 最长达">国土资源部：26宗闲置土地曝光 最长达 </a></li><li><span>-05-30</span><a href="about.html" title="上海囤地企业喊冤：闲置地块已建楼盘">上海囤地企业喊冤：闲置地块已建楼盘</a></li><li><span>-05-28</span><a href="about.html" title="发改委：首11月房地产开发投资增长36.5%">发改委：首11月房地产开发投资增长36.5% </a></li><li><span>-05-30</span><a href="about.html" title="上海传房产税即将出台 二手房赶集过户">上海传房产税即将出台 二手房赶集过户 </a></li></ul></div></div><div class="box-three"><div class="box-twonav"><p>主推户型</p><div class="box-b"><a href="news.html"><img src="img/more.png" width="81"/></a></div></div><a href="about.html"><div class="news_list"><div class="news-pic"><img src="img/pic.png" width="193"/></div><div class="news-text">项目总用地面积约16.8万平方米，地上建筑面积约13万平方米，地下建筑面积约0.55万平方米，功能组织分区为：传统文化街区(A区)、青少年科技展示区(B区)、游客接待会议中心(C区)三个区块。</div></div></a></div></div><!--主要内容结束--><div style=" clear:both;"></div><div class="xian"></div><div class="index-box"><!--主要内容开始(周边配套活动资讯预约看房)--><div class="box-four"><div class="box-fournav"><p>周边配套</p><div class="box-b"><a href="news.html"><img src="img/more.png" width="81"/></a></div></div><div class="one"><div class="one-1"><div class="one-0"><div class="one-1-1"><img src="img/p1.png" width="100%"/></div><div class="one-1-2"><strong>水晶丽都海阳市区房源</strong><br />位于海阳市海政路西段，基地北临海政路，西临海文路，南侧临规划路(现状为厂房)。<a href="about.html"><span>详细>></span></a></div></div><div style=" clear:both;"></div><div class="one-0"><div class="one-1-1"><img src="img/p2.png" width="100%"/></div><div class="one-1-2"><strong>水晶丽都海阳市区房源</strong><br />位于海阳市海政路西段，基地北临海政路，西临海文路，南侧临规划路(现状为厂房)。<a href="about.html"><span>详细>></span></a></div></div></div><div class="one-2"><div class="one-0"><div class="one-1-1"><img src="img/p3.png" width="100%"/></div><div class="one-1-2"><strong>水晶丽都海阳市区房源</strong><br />位于海阳市海政路西段，基地北临海政路，西临海文路，南侧临规划路(现状为厂房)。<a href="about.html"><span>详细>></span></a></div></div><div style=" clear:both;"></div><div class="one-0"><div class="one-1-1"><img src="img/p4.png" width="100%"/></div><div class="one-1-2"><strong>水晶丽都海阳市区房源</strong><br />位于海阳市海政路西段，基地北临海政路，西临海文路，南侧临规划路(现状为厂房)。<a href="about.html"><span>详细>></span></a></div></div></div></div></div><div class="box-five"><div class="box-twonav"><p>活动资讯</p><div class="box-b"><a href="news.html"><img src="img/more.png" width="81"/></a></div></div><div class="news_list"><ul><li><span>-06-01</span> <a href="about.html" title="高房价下的10类“中国式蜗居” ">高房价下的10类“中国式蜗居” </a></li><li><span>-06-01</span><a href="about.html" title="国土资源部：26宗闲置土地曝光 最长达">国土资源部：26宗闲置土地曝光 最长达 </a></li><li><span>-05-30</span><a href="about.html" title="上海囤地企业喊冤：闲置地块已建楼盘">上海囤地企业喊冤：闲置地块已建楼盘</a></li><li><span>-05-28</span><a href="about.html" title="发改委：首11月房地产开发投资增长36.5%">发改委：首11月房地产开发投资增长36.5% </a></li><li><span>-05-30</span><a href="about.html" title="上海传房产税即将出台 二手房赶集过户">上海传房产税即将出台 二手房赶集过户 </a></li></ul></div></div><div class="box-six"><div class="six-1">预约看房<br/><span>Booking house</span></div><div class="six-2"><img src="img/yuyue.png" width="142"/></div><div class="six-3"><input type="button" value="预约看房" class="six-button"></div><div class="six-4"><img src="img/dianhua.png" width="156"/></div></div></div></div><!--主要内容结束--><div style="clear:both;"></div><div class="xian"></div><div class="lan"><div class="lan-1"><img src="img/icon1.png" width="16"/></div><div class="lan-2">楼盘相册</div><div class="lan-3"><img src="img/lou.png" width="1019"/></div></div><div><!--楼盘相册开始--><center><div class="blk_18"> <a class="LeftBotton" onmousedown="ISL_GoUp_1()" onmouseup="ISL_StopUp_1()" onmouseout="ISL_StopUp_1()" href="javascript:void(0);" target="_self"></a><div class="pcont" id="ISL_Cont_1"><div class="ScrCont"><div id="List1_1"><!-- piclist begin --><a class="pl" href="picpic.html"><img src="img/1.jpg" alt="图片" width="100%"/>图片一</a><a class="pl" href="picpic.html"><img src="img/2.jpg" alt="图片" width="100%"/>图片二</a><a class="pl" href="picpic.html"><img src="img/3.jpg" alt="图片" width="100%"/>图片三</a><a class="pl" href="picpic.html"><img src="img/4.jpg" alt="图片" width="100%"/>图片四</a><a class="pl" href="picpic.html"><img src="img/1.jpg" alt="图片" width="100%"/>图片五</a><a class="pl" href="picpic.html"><img src="img/2.jpg" alt="图片" width="100%"/>图片六</a><a class="pl" href="picpic.html"><img src="img/3.jpg" alt="图片" width="100%"/>图片七</a><a class="pl" href="picpic.html"><img src="img/4.jpg" alt="图片" width="100%"/>图片八</a><a class="pl" href="picpic.html"><img src="img/1.jpg" alt="图片" width="100%"/>图片九</a><!-- piclist end --></div><div id="List2_1"></div></div></div><a class="RightBotton" onmousedown="ISL_GoDown_1()" onmouseup="ISL_StopDown_1()" onmouseout="ISL_StopDown_1()" href="javascript:void(0);" target="_self"></a> </div><div class="c"></div><script type="text/javascript"><!--picrun_ini()//--></script></center></div><!--楼盘相册结束--><div class="foot"><div class="ewm"><img src="img/ewm.jpg" width="70"/><br/>扫一扫,更多惊喜</div><div class="foot-text"><p>海阳市恒能旅游资源开发有限公司</p><p>公司地址：山东烟台海阳凤城旅游度假区海鑫中路海阳茶文化城办事处公司电话：156 8863 3129 公司联系人：王女士</p><p>技术支持：青岛微信网 《中华人民共和国电信与信息服务业务经营许可证》编号: 鲁ICP备11028614号-1 海阳市诚龙房地产中介策划有限公司</p></div><div class="footpic"><img src="img/footpic.png" width="170" /></div></div></div><script src="js/jquery-1.10.2.min.js"></script><script src="js/slider.js"></script><script type="text/javascript">$(function() {var bannerSlider = new Slider($('#banner_tabs'), {time: 5000,delay: 400,event: 'hover',auto: true,mode: 'fade',controller: $('#bannerCtrl'),activeControllerCls: 'active'});$('#banner_tabs .flex-prev').click(function() {bannerSlider.prev()});$('#banner_tabs .flex-next').click(function() {bannerSlider.next()});})</script></body></html>
