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

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

文章目录

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

一、作品展示

二、文件目录

三、代码实现


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/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>2014-06-01</span> <a href="about.html" title="高房价下的10类“中国式蜗居” ">高房价下的10类“中国式蜗居” </a></li><li><span>2014-06-01</span><a href="about.html" title="国土资源部：26宗闲置土地曝光 最长达18年">国土资源部：26宗闲置土地曝光 最长达18年 </a></li><li><span>2014-05-30</span><a href="about.html" title="上海囤地企业喊冤：闲置地块已建楼盘">上海囤地企业喊冤：闲置地块已建楼盘</a></li><li><span>2014-05-28</span><a href="about.html" title="发改委：首11月房地产开发投资增长36.5%">发改委：首11月房地产开发投资增长36.5% </a></li><li><span>2014-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>2014-06-01</span> <a href="about.html" title="高房价下的10类“中国式蜗居” ">高房价下的10类“中国式蜗居” </a></li><li><span>2014-06-01</span><a href="about.html" title="国土资源部：26宗闲置土地曝光 最长达18年">国土资源部：26宗闲置土地曝光 最长达18年 </a></li><li><span>2014-05-30</span><a href="about.html" title="上海囤地企业喊冤：闲置地块已建楼盘">上海囤地企业喊冤：闲置地块已建楼盘</a></li><li><span>2014-05-28</span><a href="about.html" title="发改委：首11月房地产开发投资增长36.5%">发改委：首11月房地产开发投资增长36.5% </a></li><li><span>2014-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>

四、获取更多源码

~ 关注我，点赞博文~ 每天带你涨知识!
相关问题可以相互学习，可关注↓公Z号获取更多源码 !

五、学习资料

web前端零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)
适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站

六、更多源码

PC电脑端关注我们

HTML5期末考核大作业源码* 包含 个人、美食、公司、学校、旅游、电商、宠物、电器、茶叶、家居、酒店、舞蹈、动漫、明星、服装、体育、化妆品、物流、环保、书籍、婚纱、军事、游戏、节日、戒烟、电影、摄影、文化、家乡、鲜花、礼品、汽车、其他 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!

div+css静态网页设计web网页设计实例作业 ——中国风的茶文化(4页) web课程设计-HTML网页制作代码相关推荐

web网页设计实例作业 ——中国风的茶文化(4页) web课程设计-HTML网页制作代码
web网页设计实例作业 --中国风的茶文化(4页) web课程设计-HTML网页制作代码常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. ...
HTML+CSS大作业web网页设计实例作业 ——中国民间年画 (5页) 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码
web网页设计实例作业 --中国民间年画 (5页) 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物 ...
DIV布局 web网页设计实例作业 ——抗疫-逆行者(5页) 致敬逆行者网页设计作品大学生抗疫感动专题网页设计作业模板疫情感动人物静态HTML网页模板下载
web网页设计实例作业 --抗疫-逆行者(5页) 致敬逆行者网页设计作品大学生抗疫感动专题网页设计作业模板疫情感动人物静态HTML网页模板下载常见网页设计作业题材有个人. 美食. 公司. 学校 ...
web网页设计实例作业 ——中国民间年画 (5页) 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码
web网页设计实例作业 --中国民间年画 (5页) 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物 ...
html期末作业代码网页设计 web网页设计实例作业 ——中国风文化传媒企业官网(6页) 简单网页设计作业静态HTML文化主题网页作业
web网页设计实例作业 --中国风文化传媒企业官网(6页) 简单个人网页设计作业静态HTML文化主题网页作业常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. ...
HTML5期末大作业：关于题介绍的网页作业——我的家乡新密 (15页) 含课程设计论文HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计
HTML5期末大作业:关于家乡介绍的网页设计--我的家乡新密 (15页) 含课程设计论文HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设 ...
html网页设计代码作业`餐饮美食-牛排(9页) 学生DW网页设计作业成品美食肉类进口食材课程设计网页规划与设计
HTML5期末大作业:餐饮美食网站设计--餐饮美食-牛排(9页) 学生DW网页设计作业成品美食肉类进口食材课程设计网页规划与设计文章目录 HTML5期末大作业:餐饮美食网站设计--餐饮美食-牛排 ...
HTML5期末大作业：餐饮美食网站设计——餐饮美食-牛排(9页) 学生DW网页设计作业成品美食肉类进口食材课程设计网页规划与设计
HTML5期末大作业:餐饮美食网站设计--餐饮美食-牛排(9页) 学生DW网页设计作业成品美食肉类进口食材课程设计网页规划与设计常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电 ...
利用Div CSS(嵌套盒模型)布局页面完整实例流程
Div CSS(嵌套盒模型)布局页面完整实例流程: <!DOCTYPE html> <html> <head> <meta charset=" ...

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