时间：2023-09-14 15:24:02 | 来源：网站运营
时间：2023-09-14 15:24:02 来源：网站运营
HTML5期末大作业：千岛湖旅游网站设计——千岛湖旅游(6页) HTML+CSS+JavaScript web网页设计—— 出游 旅途：常见网页设计作业题材有个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他等网页设计题目,A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!
在线咨询
PC电脑端关注我们1.网页作品简介 ：HTML期末大学生网页设计作业 A+水平 ,喜欢的可以下载，文章页支持手机PC响应式布局。2.网页作品编辑：作品下载后可使用任意HTML编辑软件（如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++ 等任意HTML软件编辑修改网页）。3.网页作品技术：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频、 音频元素 、Flash，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。<!DOCTYPE html><html> <head> <title>首页</title> <meta http-equiv="Content-Type"content="text/html; charset=utf-8"/> <link rel="stylesheet" type="text/css" href="css/initi.css" /> <link rel="stylesheet" type="text/css" href="css/index.css" /> <!-- 下面滚动图插件开始 --> <link rel="stylesheet" type="text/css" href="css/plus1.css" /> <!-- 下面滚动图插件结束 --> <!-- 焦点图插件开始 --> <link type="text/css" href="css/style.css" rel="stylesheet"/> <!-- 焦点图插件结束 --> <script type="text/javascript" src="js/jquery.js"></script> <!-- 焦点图插件开始 --> <script type="text/javascript" src="js/jquery.event.drag-1.5.min.js"></script> <script type="text/javascript" src="js/jquery.touchSlider.js"></script> <!-- 焦点图插件结束 --> <script type="text/javascript"> $(function() { //焦点图插件代码开始 $(".main_visual").hover( function(){ $("#btn_prev,#btn_next").fadeIn() }, function(){ $("#btn_prev,#btn_next").fadeOut() } ); $dragBln = false; $(".main_image").touchSlider({ flexible : true, speed : 200, btn_prev : $("#btn_prev"), btn_next : $("#btn_next"), paging : $(".flicking_con a"), counter : function (e){ $(".flicking_con a").removeClass("on").eq(e.current-1).addClass("on"); } }); $(".main_image").bind("mousedown", function() { $dragBln = false; }); $(".main_image").bind("dragstart", function() { $dragBln = true; }); $(".main_image a").click(function(){ if($dragBln) { return false; } }); timer = setInterval(function(){ $("#btn_next").click(); }, 5000); $(".main_visual").hover( function(){ clearInterval(timer); }, function(){ timer = setInterval( function(){ $("#btn_next").click(); },5000 ); } ); $(".main_image").bind("touchstart",function(){ clearInterval(timer); }).bind("touchend", function(){ timer = setInterval(function(){ $("#btn_next").click(); }, 5000); }); //焦点图插件代码结束 //topbar 单击样式 $(".topbar li a").click(function(){ $(this).css("color", "#0153a5"); $(this).parent().siblings().find("a").css("color", "#666"); }); //鼠标经过列表样式 $(".left_ul li").hover ( function(){ $(this).addClass("li_click_b"); }, function(){ $(this).removeClass("li_click_b"); } ); <!-- 下面滚动图插件开始 --> $li1 = $(".apply_nav .apply_array"); $window1 = $(".apply .apply_w"); $left1 = $(".apply .img_l"); $right1 = $(".apply .img_r"); $window1.css("width", $li1.length*176); var lc1 = 0; var rc1 = $li1.length-5; $left1.click(function(){ if (lc1 < 1) { return; } lc1--; rc1++; $window1.animate({left:'+=176px'}, 1000); }); $right1.click(function(){ if (rc1 < 1){ return; } lc1++; rc1--; $window1.animate({left:'-=176px'}, 1000); }); <!-- 下面滚动图插件结束 --> }); </script> </head> <body> <div class="main"> <div class="header"> <div class="help"> <a href="">联系我们</a> | <a href="">站点帮助</a> | <a href="">问题反馈</a> </div> </div> <div class="topbar"> <ul> <li><a class="clicked" href="index.html">首页</a></li> <li><a href="about.html">公园简介</a></li> <li><a href="news.html">新闻动态</a></li> <li><a href="show.html">图片墙</a></li> <li><a href="map.html">详细地址</a></li> <li><a>图片展示</a></li> <li><a>联系我们</a></li> <li><a>学习资料</a></li> <li><a>搞笑图片</a></li> </ul> </div> <!-- 好像只有添加iframe才能使头部独立成一个文件来处理，而且使用js给导航栏添加单击样式 <iframe name="contain" width="100%" height="100%"></iframe> --> <div class="content"> <!-- 焦点图开始 --> <div class="main_visual"> <div class="flicking_con"> <a href="#">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">5</a> </div> <div class="main_image"> <ul> <li><span class="img_1"></span></li> <li><span class="img_2"></span></li> <li><span class="img_3"></span></li> <li><span class="img_1"></span></li> <li><span class="img_2"></span></li> </ul> <a href="javascript:;" id="btn_prev"></a> <a href="javascript:;" id="btn_next"></a> </div> </div> <!-- 焦点图结束 --> <!-- 通知 --> <div class="notice"> <p>通知：<a href="">1. 冬季来临大家注意保暖。 </a><a href="" class="more">更多>></a></p> </div> <!-- 信息展示框 --> <div class="message"> <div class="left"> <div class="left_m"> <div class="one_left"> <img src="images/one.jpg" style="*float: left" /> <img src="images/more_y.jpg" class="float_right" /> <div class="clear"></div> </div> <ul class="left_ul"> <li><a href="">今天是阳光明媚，是打球的好日子。</a><span class="right_time">[2014-12-19]</span></li> <li class="li_click"><a href="">今天是阳光明媚，是打球的好日子。</a><span class="right_time">[2014-12-19]</span></li> <li><a href="">今天是阳光明媚，是打球的好日子。</a><span class="right_time">[2014-12-19]</span></li> <li><a href="">今天是阳光明媚，是打球的好日子。</a><span class="right_time">[2014-12-19]</span></li> </ul> <div class="clear: both"></div> </div> <div class="shadow"> <img src="images/shadow.jpg" /> </div> </div> <div class="right"> <div class="right_m"> <div class="one_left"> <img src="images/two.jpg" style="_float: left" /> <div class="clear"></div> </div> <div class="login"> <table> <tr> <td> <p class="user">用户名：</p> </td> <td> <input type="text" name="username" class="username" /> </td> <td> </td> </tr> <tr> <td> <p class="pass">密<span style="margin: 0px 6px 0px 7px"></span>码：</p> </td> <td> <input type="text" name="password" class="password" /> </td> <td> <p class="forget"> 忘记密码！</p> </td> </tr> <tr> <td> <input type="submit" value="登录" class="sub" /> </td> <td> <input type="reset" value="取消" class="res" /> </td> <td></td> </tr> </table> </div> <div class="clear: both"></div> </div> <div class="shadow"> <img src="images/shadow.jpg" /> </div> </div> <div class="clear"></div> <div class="left"> <div class="left_m"> <div class="one_left"> <img src="images/three.jpg" style="*float: left" /> <img src="images/more_b.jpg" class="float_right" /> <div class="clear"></div> </div> <ul class="left_ul"> <li><a href="">今天是阳光明媚，是打球的好日子。</a><span class="right_time">[2014-12-19]</span></li> <li ><a href="">今天是阳光明媚，是打球的好日子。</a><span class="right_time">[2014-12-19]</span></li> <li><a href="">今天是阳光明媚，是打球的好日子。</a><span class="right_time">[2014-12-19]</span></li> <li><a href="">今天是阳光明媚，是打球的好日子。</a><span class="right_time">[2014-12-19]</span></li> </ul> <div class="clear: both"></div> </div> <div class="shadow"> <img src="images/shadow.jpg" /> </div> </div> <div class="right"> <div class="right_m"> <div class="one_left"> <img src="images/four.jpg" style="*float: left" /> <img src="images/more_b.jpg" class="float_right" /> <div class="clear"></div> </div> <ul class="left_ul"> <li><a href="">今天是阳光明媚，是打球的好日子。</a><span class="right_time">[2014-12-19]</span></li> <li ><a href="">今天是阳光明媚，是打球的好日子。</a><span class="right_time">[2014-12-19]</span></li> <li><a href="">今天是阳光明媚，是打球的好日子。</a><span class="right_time">[2014-12-19]</span></li> <li><a href="">今天是阳光明媚，是打球的好日子。</a><span class="right_time">[2014-12-19]</span></li> </ul> <div class="clear: both"></div> </div> <div class="shadow"> <img src="images/shadow.jpg" /> </div> </div> <div class="clear"></div> </div> <!-- 下面滚动图片代码 --> <div class="apply"> <div class="img_l"><img src="images/left.gif" /></div> <div class="apply_nav"> <div class="apply_w"> <div class="apply_array"> <div class="apply_img"><img src="images/sinaminiblog.gif" /></div> <div class="apply_info"><a href="http://www.17sucai.com/" target="_blank">新浪微博</a></div> </div> <div class="apply_array"> <div class="apply_img"><img src="images/kaixin001.gif" /></div> <div class="apply_info"><a href="http://www.17sucai.com/" target="_blank">开心001</a></div> </div> <div class="apply_array"> <div class="apply_img"><img src="images/renren.gif" /></div> <div class="apply_info"><a href="http://www.17sucai.com/" target="_blank">人人网</a></div> </div> <div class="apply_array"> <div class="apply_img"><img src="images/sinaminiblog.gif" /></div> <div class="apply_info"><a href="http://www.17sucai.com/" target="_blank">新浪微博</a></div> </div> <div class="apply_array"> <div class="apply_img"><img src="images/kaixin001.gif" /></div> <div class="apply_info"><a href="http://www.17sucai.com/" target="_blank">开心001</a></div> </div> <div class="apply_array"> <div class="apply_img"><img src="images/renren.gif" /></div> <div class="apply_info"><a href="http://www.17sucai.com/" target="_blank">人人网</a></div> </div> <div class="apply_array"> <div class="apply_img"><img src="images/sinaminiblog.gif" /></div> <div class="apply_info"><a href="http://www.17sucai.com/" target="_blank">新浪微博</a></div> </div> <div class="apply_array"> <div class="apply_img"><img src="images/kaixin001.gif" /></div> <div class="apply_info"><a href="http://www.17sucai.com/" target="_blank">开心001</a></div> </div> <div class="apply_array"> <div class="apply_img"><img src="images/renren.gif" /></div> <div class="apply_info"><a href="http://www.17sucai.com/" target="_blank">人人网</a></div> </div> </div> </div> <div class="img_r"><img src="images/right.gif" /></div> </div> <div class="clear"></div> </div> </div> <div class="footer"> <p class="address">地址：浙江省宝鸡市千阳县南寨镇闫家村五组27号</p> <p>张旭超个人版权所有</p> </div> <p style="text-align: center"> 来源:<a href="http://www.mycodes.net/" target="_blank">源码之家</a> </p> </body></html>web前端 零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程) 适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站 HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他* 可满足大学生网页大作业网页设计需求, 喜欢的可以下载! 关键词：旅游,设计,作业
