時(shí)間：2023-10-01 16:42:01 | 來源：網(wǎng)站運(yùn)營
時(shí)間：2023-10-01 16:42:01 來源：網(wǎng)站運(yùn)營
學(xué)生DW靜態(tài)網(wǎng)頁設(shè)計(jì)——html+css+javascript+jquery+bootstarp馬爾代夫旅游響應(yīng)式網(wǎng)站： ? 靜態(tài)網(wǎng)站的編寫主要是用 HTML DⅣV+ CSSJS等來完成頁面的排版設(shè)計(jì) ? ，一般的網(wǎng)頁作業(yè)需要融入以下知識(shí)點(diǎn)：div布局、浮動(dòng)定位、高級css、表格、表單及驗(yàn)證、js輪播圖、音頻視頻Fash的應(yīng)用、uli、下拉導(dǎo)航欄、鼠標(biāo)劃過效果等知識(shí)點(diǎn)，學(xué)生網(wǎng)頁作業(yè)源碼，制作水平和原創(chuàng)度都適合學(xué)習(xí)或交作業(yè)用，記得點(diǎn)贊。
在線咨詢
Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html編輯軟件進(jìn)行運(yùn)行及修改編輯等操作）。 其中： （1）html文件包含：其中index.html是首頁、其他html為二級頁面； （2）css文件包含：css全部頁面樣式,文字滾動(dòng), 圖片放大等； （3）js文件包含：js實(shí)現(xiàn)動(dòng)態(tài)輪播特效, 點(diǎn)擊事件等等（個(gè)別網(wǎng)頁中運(yùn)用到j(luò)s代碼）。<!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="請輸入關(guān)鍵字"> </div> <button type="submit" class="btn btn-default">搜索</button> </form> </div> </div> </div> </div></div><div class="clearfix"></div><!--導(dǎo)航--><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">關(guān)于馬爾代夫</a></li> <li><a href="jdjs.html">酒店介紹及報(bào)價(jià)</a></li> <li><a href="list.html">最新優(yōu)惠政策</a></li> <li><a href="">預(yù)定流程</a></li> <li><a href="text.html">馬代旅游需知</a></li> <li><a href="yhzc.html">關(guān)于我們</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">杭州時(shí)間</div> <div class="bjtime"></div> </div> <div class="col-md-2 col-sm-2 col-xs-12 md"> <div class="title">馬爾代夫時(shí)間</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>你是風(fēng)兒我是沙 </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">杭州時(shí)間</div> <div class="bjtime"></div> </div> <div class="col-md-2 col-sm-2 col-xs-12 md"> <div class="title">馬爾代夫時(shí)間</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">蔚藍(lán)色的心跳</div> <p>讓心情隨波浪跳動(dòng) </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">杭州時(shí)間</div> <div class="bjtime"></div> </div> <div class="col-md-2 col-sm-2 col-xs-12 md"> <div class="title">馬爾代夫時(shí)間</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">原價(jià)：80450元/人</p><p class="xj">現(xiàn)價(jià)：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">原價(jià)：80450元/人</p><p class="xj">現(xiàn)價(jià)：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">原價(jià)：80450元/人</p><p class="xj">現(xiàn)價(jià)：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">原價(jià)：80450元/人</p><p class="xj">現(xiàn)價(jià)：56900元/人</p></li> </ul> <div class="mkeLbtn"></div> <div class="mkeRbtn"></div> </div> </div> <!--效果html結(jié)束--> <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">截至昨日，參加南博會(huì)的南亞國家已經(jīng)確認(rèn)展位748個(gè)，比去年第五屆南亞國家商品展增長了30.2%。馬爾代夫的展位雖然不如巴基斯坦、斯里蘭卡、印度等國，但其主要推介的海洋產(chǎn)品和旅游項(xiàng)目非常具有特色。</div> </div> <div class="col-md-12 index_news_list"> <h4><a href="#">2013.04.18愛情喜劇電影《馬爾代夫遇見愛》</a></h4> <div class="minute">截至昨日，參加南博會(huì)的南亞國家已經(jīng)確認(rèn)展位748個(gè)，比去年第五屆南亞國家商品展增長了30.2%。馬爾代夫的展位雖然不如巴基斯坦、斯里蘭卡、印度等國，但其主要推介的海洋產(chǎn)品和旅游項(xiàng)目非常具有特色。</div> </div> <div class="col-md-12 index_news_list"> <h4><a href="#">2013.04.18愛情喜劇電影《馬爾代夫遇見愛》</a></h4> <div class="minute">截至昨日，參加南博會(huì)的南亞國家已經(jīng)確認(rèn)展位748個(gè)，比去年第五屆南亞國家商品展增長了30.2%。馬爾代夫的展位雖然不如巴基斯坦、斯里蘭卡、印度等國，但其主要推介的海洋產(chǎn)品和旅游項(xiàng)目非常具有特色。</div> </div> <div class="col-md-12 index_news_list"> <h4><a href="#">2013.04.18愛情喜劇電影《馬爾代夫遇見愛》</a></h4> <div class="minute">截至昨日，參加南博會(huì)的南亞國家已經(jīng)確認(rèn)展位748個(gè)，比去年第五屆南亞國家商品展增長了30.2%。馬爾代夫的展位雖然不如巴基斯坦、斯里蘭卡、印度等國，但其主要推介的海洋產(chǎn)品和旅游項(xiàng)目非常具有特色。</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="分享到人人網(wǎng)" class="bshare-renren" href="javascript:void(0);"></a> <a title="更多平臺(tái)" 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>版權(quán)所有：人和假期旅游咨詢 咨詢電話：15611549285 傳真：010-66094197</p> <p>杭州西城區(qū)復(fù)興門內(nèi)大街45號(hào) 4號(hào)樓101室 郵編：100801 備案專政號(hào) 京IPC備1300362號(hào)</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(); //獲取當(dāng)前月份(0-11,0代表1月) var D = myDate.getDate(); //獲取當(dāng)前日(1-31) var week = myDate.getDay(); //獲取當(dāng)前星期X(0-6,0代表星期天) var days=[ "日 ", "一 ", "二 ", "三 ", "四 ", "五 ", "六 ",] var H = myDate.getHours(); //獲取當(dāng)前小時(shí)數(shù)(0-23) var Mt = myDate.getMinutes(); //獲取當(dāng)前分鐘數(shù)(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;}請 “ 點(diǎn)贊” “??評論” “ 收藏”一鍵三連哦！??【 關(guān)注我| 獲取更多源碼 | 優(yōu)質(zhì)文章】帶您學(xué)習(xí)各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學(xué)生畢業(yè)HTML模板 、期末大作業(yè)模板 、等! 「在這里有好多 前端 開發(fā)者，一起探討 前端 Node 知識(shí)，互相學(xué)習(xí)」！關(guān)鍵詞：響應(yīng),旅游,靜態(tài),設(shè)計(jì),學(xué)生
客戶&案例
營銷資訊
關(guān)于我們
微信公眾號(hào)
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
