時(shí)間：2023-10-10 16:42:02 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)
時(shí)間：2023-10-10 16:42:02 來(lái)源：網(wǎng)站運(yùn)營(yíng)
用HTML+CSS做一個(gè)漂亮簡(jiǎn)單的旅游網(wǎng)站——旅游網(wǎng)頁(yè)設(shè)計(jì)與實(shí)現(xiàn)(6頁(yè))HTML+CSS+JavaScript：? 學(xué)生HTML靜態(tài)網(wǎng)頁(yè)基礎(chǔ)水平制作 ? ，頁(yè)面排版干凈簡(jiǎn)潔。使用HTML+CSS頁(yè)面布局設(shè)計(jì),web大學(xué)生網(wǎng)頁(yè)設(shè)計(jì)作業(yè)源碼，這是一個(gè)不錯(cuò)的旅游網(wǎng)頁(yè)制作，畫面精明，排版整潔，內(nèi)容豐富，主題鮮明，非常適合初學(xué)者學(xué)習(xí)使用, 這個(gè)實(shí)例比較全面，有助于同學(xué)的學(xué)習(xí),本文將介紹如何通過(guò)從頭開始設(shè)計(jì)個(gè)人網(wǎng)站并將其轉(zhuǎn)換為代碼的過(guò)程來(lái)實(shí)踐設(shè)計(jì)。
在線咨詢
Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html編輯軟件進(jìn)行運(yùn)行及修改編輯等操作）。 其中： （1）html文件包含：其中index.html是首頁(yè)、其他html為二級(jí)頁(yè)面； （2）css文件包含：css全部頁(yè)面樣式,文字滾動(dòng), 圖片放大等； （3）js文件包含：js實(shí)現(xiàn)動(dòng)態(tài)輪播特效, 點(diǎn)擊事件等等（個(gè)別網(wǎng)頁(yè)中運(yùn)用到j(luò)s代碼）。<body class="page1"> <header> <div class="container_12"> <div class="grid_12"> <h1><a href="index.html"><img src="images/logo.png" alt="Gerald Harris attorney at law"></a> </h1> <div class="clear"></div> </div> <div class="menu_block"> <nav class=""> <ul class="sf-menu"> <li class="current"><a href="index.html">首頁(yè)</a></li> <li class="with_ul"><a href="about.html">關(guān)于</a> </li> <li><a href="photo.html">照片</a></li> <li><a href="travel.html">旅行</a></li> <li><a href="blog.html">日志</a></li> <li><a href="contact.html">聯(lián)系</a></li> </ul> </nav> <div class="clear"></div> </div> <div class="clear"></div> </div> </header> <div class="copyrights">Collect from Website Template</div> <div class="main"> <div class="container_12"> <div class="grid_12"> <!-- <img src="images/slide.jpg" alt=""> --> <div id="focus" class="focus"> <ul id="focus_image" class="focus_image"> <li class=""> <a><img src="images/slide.jpg"></a> </li> <li class="current"><a><img src="images/big3.jpg"></a></li> </ul> <ul id="focus_button" class="focus_button"> <li class=""></li> <li class="on"></li> </ul> </div> </div> </div> <div class="content"> <div class="ic">2013!</div> <div class="container_12"> <div class="grid_12"> <h3>頂級(jí)旅游目的地 </h3> </div> <div class="boxes"> <div class="grid_4"> <figure> <div><img src="images/page1_img1.jpg" alt=""></div> <figcaption> <h3>三亞</h3> 三亞，簡(jiǎn)稱崖，古稱崖州，別稱鹿城。位于浙江島的最南端。三亞?wèn)|鄰陵水縣，西接樂(lè)東縣，北毗保亭縣，南臨南海，介于北緯18°09′34″~18°37′27″、東經(jīng)108°56′30″~109°48′28″之間。 三亞市別稱鹿城，又被稱為“東方夏威夷”， <a href="" class="btn">簡(jiǎn)介 </a> </figcaption> </figure> </div> <div class="grid_4"> <figure> <div><img src="images/page1_img2.jpg" alt=""></div> <figcaption> <h3>杭州</h3> 杭州，簡(jiǎn)稱“滬”或“申”，是中國(guó)共產(chǎn)黨的誕生地。中華人民共和國(guó)直轄市，國(guó)家中心城市，超大城市，中國(guó)的經(jīng)濟(jì)、交通、科技、工業(yè)、金融、貿(mào)易、會(huì)展和航運(yùn)中心，首批沿海開放城市。杭州地處長(zhǎng)江入杭州，是長(zhǎng)江經(jīng)濟(jì)帶的龍頭城市。 <a href="" class="btn">簡(jiǎn)介 </a> </figcaption> </figure> </div> <div class="grid_4"> <figure> <div><img src="images/page1_img3.jpg" alt=""></div> <figcaption> <h3>杭州</h3> 杭州，簡(jiǎn)稱“漢”，別稱“江城”，是浙江省省會(huì) ，中國(guó)中部地區(qū)最大都市及唯一的副省級(jí)城市，中國(guó)內(nèi)陸地區(qū)最繁華都市、中華人民共和國(guó)區(qū)域中心城市。早在6000年前的新石器時(shí)代，已有先民在此繁衍生息。僅次于杭州，位居亞洲前列。 <a href="" class="btn">簡(jiǎn)介 </a> </figcaption> </figure> </div> <div class="clear"></div> </div> <div class="grid_8"> <div id="tabs"> <ul> <li><a href="#tabs-1">最后一刻 </a></li> <li><a href="#tabs-2">熱門交易 </a></li> <li><a href="#tabs-3">全包的 </a></li> </ul> <div class="clear"></div> <div class="tab_cont" id="tabs-1"> <img src="images/2b6dacb1704e4818a3d8ee9dc8d28802.gif" alt=""> <div class="extra_wrapper"> <div class="text1"><strong>三亞品質(zhì)之旅</strong> </div> <p> </div> </div> <div class="clear"></div> <div class="bottom_block"> <div class="container_12"> <div class="grid_2 prefix_2"> <ul> <li><a href="#">常見問(wèn)題解答頁(yè)面 </a></li> <li><a href="#">人們會(huì)說(shuō)</a></li> </ul> </div> <div class="grid_2"> <ul> <li><a href="#">有用的鏈接</a></li> <li><a href="#">我們的團(tuán)隊(duì)</a></li> </ul> </div> <div class="grid_2"> <ul> <li><a href="#">簡(jiǎn)單的介紹</a></li> <li><a href="#">家庭旅行</a></li> </ul> </div> <div class="grid_2"> <h4>聯(lián)系我們:</h4> 電話: 1-800-234-5678<br> <a href="#">電話24小時(shí)在線</a> </div> <div class="clear"></div> </div> </div> <footer> <div class="container_12"> <div class="grid_12"> <div class="socials"> <a href="#"></a> <a href="#"></a> <a href="#"></a> <a href="#"></a> </div> <div class="copy"> 旅行 ? 2021 | <a href="#">優(yōu)先政策</a> | 旅行請(qǐng)聯(lián)系我們公司 </div> </div> <div class="clear"></div> </div> </footer> </div> <audio controls="controls" autoplay="autoplay" hidden=""> <source src="audio/song.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio></body>/**/@import url(http://fonts.googleapis.com/css?family=Pathway+Gothic+One);@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);@import "../css/reset.css";@import "../css/grid.css";@import "../css/superfish.css";input { outline: none !important;}html { width: 100%;}a[href^="tel:"] { color: inherit; text-decoration: none;} overflow: hidden;}.img_inner { max-width: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; margin-bottom: 25px; margin-top: 3px; position: relative;}a.comment { margin-top: 2px; display: inline-block; float: right; margin-right: 85px;}.blog+.blog { border-top: 1px solid #dedbdb; margin-top: 60px; padding-top: 58px;}.blog time { text-align: center; display: block; background-color: #38afe5; border-radius: 500px; color: #fff; width: 39px; height: 30px; padding-top: 9px; font-size: 11px; line-height: 11px; float: left; margin-right: 13px; margin-top: 3px;}ul.list2.l1 { width: auto; float: none; padding-top: 0; margin-bottom: 43px;}/****Map***/.map { padding-top: 0px; margin-top: -2px;}.map figure { width: 550px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; display: block; margin-right: 26px; padding-top: 2px;}.map figure iframe { width: 550px; height: 414px; max-width: 100%;}.map address { overflow: hidden;}.map address+address { margin-top: 43px;}.map address+address dt { margin-bottom: 5px;}.map .text2 { margin-bottom: 21px; font: bold 24px/24px 'Marvel', sans-serif; color: #000; padding-top: 1px;}address dt { margin-bottom: 19px;}address dd span { min-width: 95px; display: inline-block; text-align: left;}/************Footer***********/footer { display: block; padding: 25px 0; color: #6b6868;}.socials { text-align: center; margin-bottom: 21px;}.socials a { margin: 0 5px; display: inline-block; width: 46px; height: 46px; background: url(../images/socials.png) 0 0 no-repeat;}.socials a+a { background-position: -60px 0;}.socials a+a+a { background-position: -122px 0;}.socials a+a+a+a { background-position: right 0;}.socials a:hover { opacity: 0.5;}.copy { text-align: center; color: #fff; font-size: 12px;}.f_bot { padding-top: 26px; padding-bottom: 40px; color: #797979;}/**to top**/#toTop { display: none; text-decoration: none; position: fixed; bottom: 30px; margin-right: -620px !important; overflow: hidden; width: 36px; height: 37px; border: none; text-indent: -999px; z-index: 999; background: url(../images/totop.png) no-repeat left top; transition: 0s ease; -webkit-transition: 0s ease; -o-transition: 0s ease;}#toTop:hover { background-position: right 0;}table { border-collapse: collapse; margin: 10px 15px; width: 290px;}th strong { color: #fff;}th { background: #86DFEA; width: 50px; height: 29px; padding-left: 10px; padding-right: 11px; color: #fff; text-align: left; border-left: 1px solid #DEA; border-bottom: solid 2px #FFF;}tr { height: 30px;}td { padding-left: 11px; padding-right: 11px; /* border-left: 1px solid #FFE1C3; */ border-left: 1px solid #FFF; border-bottom: solid 1px #ffffff;}td.first,th.first { border-left: 0px;}tr.row-a { background: #F8F8F8;}tr.row-b { background: #EFEFEF;}.focus{float:left;position:relative;width:1000px;height:460px;margin-bottom:20px;border:2px solid #fff;border-radius:5px;overflow:hidden;}.focus_image{float:left;width:1000px;height:460px;list-style:none;}.focus_image li{float:left;width:1000px;height:460px;display:none;}.focus_image li.current{display:block;}.focus_image li img{float:left;width:1000px;height:460px;}.focus_button{position:absolute;bottom:24px;right:415px;width:100px;height:45px;padding-top:20px;list-style:none;}.focus_button li{float:left;width:20px;height:6px;margin-left:10px;background-color:#fff;cursor:pointer;}.focus_button li.on{background-color:#2a97b6;}.title { color: #2d1f16; line-height: 28px; margin: 10px 0;}.title h2 { font-size: 18px;}請(qǐng) “ 點(diǎn)贊” “??評(píng)論” “ 收藏”一鍵三連哦！??【 關(guān)注我| 獲取更多源碼 | 優(yōu)質(zhì)文章】帶您學(xué)習(xí)各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學(xué)生畢業(yè)HTML模板 、期末大作業(yè)模板 、等! 「在這里有好多 前端 開發(fā)者，一起探討 前端 Node 知識(shí)，互相學(xué)習(xí)」！關(guān)鍵詞：旅游,實(shí)現(xiàn),設(shè)計(jì),漂亮,簡(jiǎn)單
客戶&案例
營(yíng)銷資訊
關(guān)于我們
客戶&案例
營(yíng)銷資訊
關(guān)于我們
微信公眾號(hào)
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
