时间：2023-10-01 16:42:01 | 来源：网站运营
时间：2023-10-01 16:42:01 来源：网站运营
学生DW静态网页设计——html+css+javascript+jquery+bootstarp马尔代夫旅游响应式网站： 静态网站的编写主要是用 HTML DⅣV+ CSSJS等来完成页面的排版设计 ，一般的网页作业需要融入以下知识点：div布局、浮动定位、高级css、表格、表单及验证、js轮播图、音频视频Fash的应用、uli、下拉导航栏、鼠标划过效果等知识点，学生网页作业源码，制作水平和原创度都适合学习或交作业用，记得点赞。
在线咨询
Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。 其中： （1）html文件包含：其中index.html是首页、其他html为二级页面； （2）css文件包含：css全部页面样式,文字滚动, 图片放大等； （3）js文件包含：js实现动态轮播特效, 点击事件等等（个别网页中运用到js代码）。<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><link rel="stylesheet" href="css/bootstrap.min.css" /><link rel="stylesheet" href="css/style.css"></head><body><div class="wrapper header col-xs-12"> <div class="container nav-wrapper"> <div class="head-top"> <div class="logo col-md-6 col-sm-4 col-xs-12"><img src="img/login.png"></div> <div class="logo-right col-md-6 col-sm-8 col-xs-12"> <div class="search col-md-12 col-sm-12"> <i class="taobao"></i> <i class="sina"></i> <i class="wx"></i> <form class="navbar-form col-xs-6" role="search"> <div class="form-group"> <input type="text" class="form-control" name="search" value="" placeholder="请输入关键字"> </div> <button type="submit" class="btn btn-default">搜索</button> </form> </div> </div> </div> </div></div><div class="clearfix"></div><!--导航--><div class="navs"> <nav class="navbar navbar-default" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="index.html">首页</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li><a href="content.html">关于马尔代夫</a></li> <li><a href="jdjs.html">酒店介绍及报价</a></li> <li><a href="list.html">最新优惠政策</a></li> <li><a href="">预定流程</a></li> <li><a href="text.html">马代旅游需知</a></li> <li><a href="yhzc.html">关于我们</a></li> </ul> </div> </div> </nav></div><div class="clearfix"></div><!--banner--><div class="banner"> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="img/banner1.jpg" alt="..."> <div class="carousel-caption-con"> <div class="container"> <div class="col-md-4 col-sm-4 col-xs-12"> <div class="banner-title">人和假期</div> <p>蜜月尽在马尔代夫 </p> <p>咨询电话：010-56149580</p> </div> <div class="col-md-4 col-sm-4 col-xs-12 weather"> <div class="title"></div> <iframe width="210" scrolling="no" height="80" frameborder="0" allowtransparency="true" src="http://i.tianqi.com/index.php?c=code&id=12&color=%23FFFFFF&icon=1&py=male&num=1&nid=119&wid=1190001"></iframe> </div> <div class="col-md-2 col-sm-2 col-xs-12 bj"> <div class="title">杭州时间</div> <div class="bjtime"></div> </div> <div class="col-md-2 col-sm-2 col-xs-12 md"> <div class="title">马尔代夫时间</div> <div class="mdtime"></div> </div> </div> </div> </div> <div class="item"> <img src="img/banner2.jpg" alt="..."> <div class="carousel-caption-con"> <div class="container"> <div class="col-md-4 col-sm-4 col-xs-12"> <div class="banner-title">浪漫沙滩的气味</div> <p>你是风儿我是沙 </p> <p>咨询电话：010-56149580</p> </div> <div class="col-md-4 col-sm-4 col-xs-12 weather"> <div class="title"></div> <iframe width="210" scrolling="no" height="60" frameborder="0" allowtransparency="true" src="http://i.tianqi.com/index.php?c=code&id=12&color=%23FFFFFF&icon=1&py=male&num=1&nid=119&wid=1190001"></iframe> </div> <div class="col-md-2 col-sm-2 col-xs-12 bj"> <div class="title">杭州时间</div> <div class="bjtime"></div> </div> <div class="col-md-2 col-sm-2 col-xs-12 md"> <div class="title">马尔代夫时间</div> <div class="mdtime"></div> </div> </div> </div> </div> <div class="item"> <img src="img/banner3.jpg" alt="..."> <div class="carousel-caption-con"> <div class="container"> <div class="col-md-4 col-sm-4 col-xs-12"> <div class="banner-title">蔚蓝色的心跳</div> <p>让心情随波浪跳动 </p> <p>咨询电话：010-56149580</p> </div> <div class="col-md-4 col-sm-4 col-xs-12 weather"> <div class="title"></div> <iframe width="210" scrolling="no" height="60" frameborder="0" allowtransparency="true" src="http://i.tianqi.com/index.php?c=code&id=12&color=%23FFFFFF&icon=1&py=male&num=1&nid=119&wid=1190001"></iframe> </div> <div class="col-md-2 col-sm-2 col-xs-12 bj"> <div class="title">杭州时间</div> <div class="bjtime"></div> </div> <div class="col-md-2 col-sm-2 col-xs-12 md"> <div class="title">马尔代夫时间</div> <div class="mdtime"></div> </div> </div> </div> </div> </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> <span class="sr-only">Next</span> </a> </div></div><div class="container"> <div class="main col-md-12"> <div class="row products"> <div class="col-md-4 col-sm-4 col-xs-12"><img src="img/main1.png" class="img-responsive"> <div class="products_title">W Retreat & Spa Maldives W宁静岛</div> </div> <div class="col-md-4 col-sm-4 col-xs-12"><img src="img/main1.png" class="img-responsive"> <div class="products_title">Viceroy Maldives 薇斯瑞岛</div> </div> <div class="col-md-4 col-sm-4 col-xs-12"><img src="img/main1.png" class="img-responsive"> <div class="products_title">Medhufushi Island Resort曼德芙岛</div> </div> </div> <div class="row news"> <div class="col-md-4 col-sm-4 col-xs-12"><!--img src="img/main1.png" class="img-responsive"--> <div class="kePublic"> <!--效果html开始--> <div class="mkeFocus"> <div class="mkeUl"> <ul> <li><b class="bg"></b><b class="text">七月份</b><a href="http://www.17sucai.com" target="_blank"><img src="img/ban1.jpg" /></a><p class="yj">原价：80450元/人</p><p class="xj">现价：56900元/人</p></li> <li><b class="bg"></b><b class="text">八月份</b><a href="http://www.17sucai.com" target="_blank"><img src="img/ban2.jpg" /></a><p class="yj">原价：80450元/人</p><p class="xj">现价：56900元/人</p></li> <li><b class="bg"></b><b class="text">马尔代夫</b><a href="http://www.17sucai.com" target="_blank"><img src="img/ban3.jpg" /></a><p class="yj">原价：80450元/人</p><p class="xj">现价：56900元/人</p></li> <li><b class="bg"></b><b class="text">浪漫</b><a href="http://www.17sucai.com" target="_blank"><img src="img/ban4.jpg" /></a><p class="yj">原价：80450元/人</p><p class="xj">现价：56900元/人</p></li> </ul> <div class="mkeLbtn"></div> <div class="mkeRbtn"></div> </div> </div> <!--效果html结束--> <div class="tejia"></div> </div> </div> <div class="col-md-8 col-sm-8 col-xs-12"> <div class="row"> <div class="col-md-12 index_news_list"> <h4><a href="#">2013.04.18爱情喜剧电影《马尔代夫遇见爱》</a></h4> <div class="minute">截至昨日，参加南博会的南亚国家已经确认展位748个，比去年第五届南亚国家商品展增长了30.2%。马尔代夫的展位虽然不如巴基斯坦、斯里兰卡、印度等国，但其主要推介的海洋产品和旅游项目非常具有特色。</div> </div> <div class="col-md-12 index_news_list"> <h4><a href="#">2013.04.18爱情喜剧电影《马尔代夫遇见爱》</a></h4> <div class="minute">截至昨日，参加南博会的南亚国家已经确认展位748个，比去年第五届南亚国家商品展增长了30.2%。马尔代夫的展位虽然不如巴基斯坦、斯里兰卡、印度等国，但其主要推介的海洋产品和旅游项目非常具有特色。</div> </div> <div class="col-md-12 index_news_list"> <h4><a href="#">2013.04.18爱情喜剧电影《马尔代夫遇见爱》</a></h4> <div class="minute">截至昨日，参加南博会的南亚国家已经确认展位748个，比去年第五届南亚国家商品展增长了30.2%。马尔代夫的展位虽然不如巴基斯坦、斯里兰卡、印度等国，但其主要推介的海洋产品和旅游项目非常具有特色。</div> </div> <div class="col-md-12 index_news_list"> <h4><a href="#">2013.04.18爱情喜剧电影《马尔代夫遇见爱》</a></h4> <div class="minute">截至昨日，参加南博会的南亚国家已经确认展位748个，比去年第五届南亚国家商品展增长了30.2%。马尔代夫的展位虽然不如巴基斯坦、斯里兰卡、印度等国，但其主要推介的海洋产品和旅游项目非常具有特色。</div> </div> </div> </div> </div> </div></div><div class="wrapper footer"> <div class="service"> <div class="container"> <div class="col-md-3 col-sm-12"> <div class="link_logo"></div> </div> <div class="col-md-6 col-sm-12"> <div class="link_tel"></div> </div> <div class="col-md-3 col-sm-12 fx"> <div class="bshare-custom icon-medium"> <div class="bsPromo bsPromo2"></div> <a title="分享到一键通" class="bshare-bsharesync" href="javascript:void(0);"></a> <a title="分享到QQ空间" class="bshare-qzone"></a> <a title="分享到新浪微博" class="bshare-sinaminiblog" href="javascript:void(0);"></a> <a title="分享到人人网" class="bshare-renren" href="javascript:void(0);"></a> <a title="更多平台" class="bshare-more bshare-more-icon more-style-addthis"></a> </div> <script type="text/javascript" charset="utf-8" src="http://static.bshare.cn/b/buttonLite.js#style=-1&uuid=&pophcol=2&lang=zh"></script> <script type="text/javascript" charset="utf-8" src="http://static.bshare.cn/b/bshareC0.js"></script> </div> </div> </div> <div class="container"> <div class="friendlink"> <div class="col-md-4 col-sm-4 col-xs-12"><a href="#"><img src="img/wx_link.png" class="img-responsive"></a></div> <div class="col-md-4 col-sm-4 col-xs-12"><a href="#"><img src="img/taobao_link.png" class="img-responsive"></a></div> <div class="col-md-4 col-sm-4 col-xs-12"><a href="#"><img src="img/wb_link.png" class="img-responsive"></a></div> </div> <div class="copyright col-md-12"> <p>版权所有：人和假期旅游咨询 咨询电话：15611549285 传真：010-66094197</p> <p>杭州西城区复兴门内大街45号 4号楼101室 邮编：100801 备案专政号 京IPC备1300362号</p> </div> </div></div><script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> <script language="javascript">var rnum=$(".mkeUl ul li").size();var cnum=0;$(".mke_ns2").html(rnum);$(".mkeUl ul").width(rnum*367);$(".mkeRbtn").click(function(){ cnum++; if(cnum>(rnum-1)){ cnum=0 } $(".mkeUl ul").animate({"left":-cnum*367},300); $(".mke_ns1").html(cnum+1);});$(".mkeLbtn").click(function(){ cnum--; if(cnum<0){ cnum=rnum-1; } $(".mkeUl ul").animate({"left":-cnum*367},300); $(".mke_ns1").html(cnum+1);});function autoPlay(){ cnum++; if(cnum>(rnum-1)){ cnum=0 } $(".mkeUl ul").animate({"left":-cnum*367},300); $(".mke_ns1").html(cnum+1);}var Timer=setInterval(autoPlay,4000);$(".mkeFocus").hover(function(){clearInterval(Timer)},function(){Timer=setInterval(autoPlay,4000);});</script><script language="javascript"> var myDate = new Date(); var y = myDate.getFullYear(); //获取完整的年份(4位,1970-????) var M = myDate.getMonth(); //获取当前月份(0-11,0代表1月) var D = myDate.getDate(); //获取当前日(1-31) var week = myDate.getDay(); //获取当前星期X(0-6,0代表星期天) var days=[ "日 ", "一 ", "二 ", "三 ", "四 ", "五 ", "六 ",] var H = myDate.getHours(); //获取当前小时数(0-23) var Mt = myDate.getMinutes(); //获取当前分钟数(0-59) time ='马尔代夫 '+y+'年'+(M<10 ? "0"+ M : M)+'月'+(D<10 ? "0"+ D : D)+'日'+' '+'星期'+days[week]; bjtime = (H<10 ? "0"+ H : H)+':'+(Mt<10 ? "0"+ Mt : Mt); mdtime = (H<10 ? "0"+ H+2 : H+2)+':'+(Mt<10 ? "0"+ Mt : Mt); $(".weather .title").text(time); $(".bjtime").text(bjtime); $(".mdtime").text(mdtime);</script></body></html>@charset "utf-8";body{background:#e1dac8;color:#E1DAC8;}body,h1,h2,h3,h4,h5,h6, ul, dl, dd, dt, ol, li, p{font-family:"微软雅黑"," 黑体","宋体"; margin:0;padding:0;-webkit-text-size-adjust: none}.wrapper{width:100%;}a{color:#715B1D;}.header{background:url(../img/header_bg.png) no-repeat center center; height:150px;}.logo-right{margin-top:30px;height:15px;}.logo{padding-top:15px;}.search{padding-top:15px;}.search .form-control{background:#463511; border:1px solid #2D2408; color:#968869;}.search .btn-default{background:#2D2408; border:1px solid #2D2408; color:#968869;}.navbar-form{ float:right;padding-right:5px;}.search i{height:34px; width:34px; display:block; float:right;margin-top:8px; background-size: 34px 34px; border-radius:3px; margin-right:5px;}.wx{background:url(../img/wx.png) no-repeat 0px 0px;}.taobao{background:url(../img/taobao.png) no-repeat 0px 0px;}.sina{background:url(../img/sina.png) no-repeat 0px 0px;}.search .btn{margin-left:-8px;}.navbar{ margin-bottom:0px;}.navbar-header{ padding-left:15px;}.navbar-default{background:rgba(0,0,0,.6); border:0px;position:absolute;top:100px; z-index:12; width:100%;}.navbar-default .navbar-brand{color:#fff;}.nav>li>a {font-size:1.4em;}.navbar-default .navbar-nav>li>a{color:#fff; font-size:1.2em;}.navbar-default .navbar-nav>li>a:hover{color:#eee; font-size:1.2em;}.navbar-default .navbar-brand:hover{color: #eee;}.navbar-brand {font-size:1.2em;}.carousel-caption-con{position:absolute;left:0px;right:0px;padding-bottom:0px; height:120px; bottom:0px; padding-top:0px; color:#fff; z-index:11; background:url(../img/bg.png);}.banner-title{margin-top:15px; font-size:1.5em; font-weight:bold; padding-bottom:15px;}请 “ 点赞” “✍️评论” “ 收藏”一键三连哦！❤️【 关注我| 获取更多源码 | 优质文章】带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！关键词：响应,旅游,静态,设计,学生
