900字范文 > div+css静态网页设计web网页设计实例作业 ——中国风的茶文化(4页) web课程设计-HTM

div+css静态网页设计web网页设计实例作业 ——中国风的茶文化(4页) web课程设计-HTM

时间：2019-09-11 22:20:06

web网页设计实例作业 ——中国风的茶文化(4页) web课程设计-HTML网页制作代码

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

文章目录

web网页设计实例作业 ——中国风的茶文化(4页) web课程设计-HTML网页制作代码一、作品展示二、文件目录三、代码实现四、获取更多源码五、学习资料六、更多源码

一、作品展示

二、文件目录

三、代码实现

<!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" /><script type="text/javascript">var Speed_1 = 10; //速度(毫秒)var Space_1 = 20; //每次移动(px)var PageWidth_1 = 107 * 6; //翻页宽度var interval_1 = 5000; //翻页间隔时间var fill_1 = 0; //整体移位var MoveLock_1 = false;var MoveTimeObj_1;var MoveWay_1="right";var Comp_1 = 0;var AutoPlayObj_1=null;function GetObj(objName){if(document.getElementById){return eval('document.getElementById("'+objName+'")')}else{return eval('document.all.'+objName)}}function AutoPlay_1(){clearInterval(AutoPlayObj_1);AutoPlayObj_1=setInterval('ISL_GoDown_1();ISL_StopDown_1();',interval_1)}function ISL_GoUp_1(){if(MoveLock_1)return;clearInterval(AutoPlayObj_1);MoveLock_1=true;MoveWay_1="left";MoveTimeObj_1=setInterval('ISL_ScrUp_1();',Speed_1);}function ISL_StopUp_1(){if(MoveWay_1 == "right"){return};clearInterval(MoveTimeObj_1);if((GetObj('ISL_Cont_1').scrollLeft-fill_1)%PageWidth_1!=0){Comp_1=fill_1-(GetObj('ISL_Cont_1').scrollLeft%PageWidth_1);CompScr_1()}else{MoveLock_1=false}AutoPlay_1()}function ISL_ScrUp_1(){if(GetObj('ISL_Cont_1').scrollLeft<=0){GetObj('ISL_Cont_1').scrollLeft=GetObj('ISL_Cont_1').scrollLeft+GetObj('List1_1').offsetWidth}GetObj('ISL_Cont_1').scrollLeft-=Space_1}function ISL_GoDown_1(){clearInterval(MoveTimeObj_1);if(MoveLock_1)return;clearInterval(AutoPlayObj_1);MoveLock_1=true;MoveWay_1="right";ISL_ScrDown_1();MoveTimeObj_1=setInterval('ISL_ScrDown_1()',Speed_1)}function ISL_StopDown_1(){if(MoveWay_1 == "left"){return};clearInterval(MoveTimeObj_1);if(GetObj('ISL_Cont_1').scrollLeft%PageWidth_1-(fill_1>=0?fill_1:fill_1+1)!=0){Comp_1=PageWidth_1-GetObj('ISL_Cont_1').scrollLeft%PageWidth_1+fill_1;CompScr_1()}else{MoveLock_1=false}AutoPlay_1()}function ISL_ScrDown_1(){if(GetObj('ISL_Cont_1').scrollLeft>=GetObj('List1_1').scrollWidth){GetObj('ISL_Cont_1').scrollLeft=GetObj('ISL_Cont_1').scrollLeft-GetObj('List1_1').scrollWidth}GetObj('ISL_Cont_1').scrollLeft+=Space_1}function CompScr_1(){if(Comp_1==0){MoveLock_1=false;return}var num,TempSpeed=Speed_1,TempSpace=Space_1;if(Math.abs(Comp_1)<PageWidth_1/2){TempSpace=Math.round(Math.abs(Comp_1/Space_1));if(TempSpace<1){TempSpace=1}}if(Comp_1<0){if(Comp_1<-TempSpace){Comp_1+=TempSpace;num=TempSpace}else{num=-Comp_1;Comp_1=0}GetObj('ISL_Cont_1').scrollLeft-=num;setTimeout('CompScr_1()',TempSpeed)}else{if(Comp_1>TempSpace){Comp_1-=TempSpace;num=TempSpace}else{num=Comp_1;Comp_1=0}GetObj('ISL_Cont_1').scrollLeft+=num;setTimeout('CompScr_1()',TempSpeed)}}function picrun_ini(){GetObj("List2_1").innerHTML=GetObj("List1_1").innerHTML;GetObj('ISL_Cont_1').scrollLeft=fill_1>=0?fill_1:GetObj('List1_1').scrollWidth-Math.abs(fill_1);GetObj("ISL_Cont_1").onmouseover=function(){clearInterval(AutoPlayObj_1)}GetObj("ISL_Cont_1").onmouseout=function(){AutoPlay_1()}AutoPlay_1();}</script></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"><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></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"></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>