當(dāng)前位置：首頁 > 前端技术 > HTML >内容正文

HTML

大一学生WEB前端静态网页——旅游网页设计与实现(厦门旅游)

發(fā)布時間：2024/3/26 HTML 43 豆豆

生活随笔收集整理的這篇文章主要介紹了大一学生WEB前端静态网页——旅游网页设计与实现(厦门旅游) 小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

? 源碼獲取文末聯(lián)系 ?

HTML：結(jié)構(gòu)

CSS：樣式
在操作方面上運用了html5和css3，
采用了div+css結(jié)構(gòu)、表單、超鏈接、浮動、絕對定位、相對定位、字體樣式、引用視頻等基礎(chǔ)知識

JavaScript：做與用戶的交互行為

文章目錄

前端學(xué)習(xí)路線
網(wǎng)頁基本結(jié)構(gòu)
網(wǎng)頁演示
- HTML結(jié)構(gòu)代碼
學(xué)的反而越迷茫
學(xué)習(xí)更多

前端學(xué)習(xí)路線

（1）html文件：其中index.html是首頁、其他html為二級頁面；
（2）css文件：css全部頁面樣式,文字滾動, 圖片放大等；
（3）js文件：js實現(xiàn)動態(tài)輪播特效, 表單提交, 點擊事件等等（網(wǎng)頁中運用到j(luò)s代碼）

網(wǎng)頁基本結(jié)構(gòu)

(1)首頁：進入網(wǎng)頁中看到的第一個頁面(LOGO、公司名稱、導(dǎo)航、banner、新聞、相關(guān)信息、底部信息、banner一般是5個　　
(2)二級頁面：從首頁點擊進入之后的頁面叫做二級頁面
(3)三級頁面：從二級頁面點擊進入的頁面

網(wǎng)頁html：網(wǎng)頁是構(gòu)成網(wǎng)站的基本元素，是承載各種網(wǎng)站應(yīng)用的平臺。通俗地說，網(wǎng)站就是由網(wǎng)頁組成的
首頁網(wǎng)站：首頁是一個網(wǎng)站的入口網(wǎng)頁，故往往會被編輯得易于了解該網(wǎng)站多數(shù)作為首頁的文件名是index加上擴展名
導(dǎo)航菜單：是指位于頁面頂部或者側(cè)邊區(qū)域的，也稱之為導(dǎo)航欄，它起著鏈接站點或者軟件內(nèi)的各個頁面的作用.
網(wǎng)頁頁腳：是網(wǎng)頁中每個頁面的底部的區(qū)域。常用于顯示附加信息。如作者、備案號等。

網(wǎng)頁演示

HTML結(jié)構(gòu)代碼

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,user-scalable=no, initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0"><title>首頁</title><link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css"><link rel="stylesheet" href="css/bootstrap.min.css"><link rel="shortcut icon" href="http://www.ylcp.shop/files/files/1649402480106/xy_favicon.ico"><link rel="stylesheet" href="css/common.css"><link rel="stylesheet" href="css/index.css"> </head><body><script src="js/jquery-1.11.1.min.js"></script><script src="js/jquery.mobile-1.4.5.min.js"></script><script src="js/bootstrap.min.js"></script><div class="container"><div data-role="header"><div data-role="navbar"><ul><li><a href="" data-ajax="false" class="ui-icon-home ui-btn-icon-top"><span class="hidden-xs">首頁</span></a></li><li><a href="food.html" data-ajax="false" class="ui-icon-heart ui-btn-icon-top"><span class="hidden-xs">美食</span></a></li><li><a href="spor.html" data-ajax="false" class="ui-icon-location ui-btn-icon-top"><span class="hidden-xs">景區(qū)</span></a></li><li><a href="culture.html" data-ajax="false" class="ui-icon-refresh ui-btn-icon-top"><span class="hidden-xs">文化</span></a></li><li><a href="contact.html" data-ajax="false" class="ui-icon-mail ui-btn-icon-top ui-btn ui-btn-inline ui-corner-all ui-shadow" style="margin-right: 0;"><span class="hidden-xs">信息登記</span></a></li></ul></div></div><div class="main"><div class="row"><div class="banner col-md-1 col-sm-1 col-xs-1"><img src="picture/banner.jpeg" alt="" class=" visible-lg visible-md"></div></div><div class="row sv_nav clearfix" data-role="controlgroup" data-type="horizontal"><div class="sv_lt col-md-2 col-sm-2 col-xs-2"><a href="#book" data-icon="info" data-rel="popup" data-transition="flip" class="ui-btn ui-btn-inline ui-corner-all" data-role="button"><img src="picture/book.jpg" alt="" class="img-thumbnail"><p class="text-muted">購票</p></a><div data-role="popup" id="book" class="ui-content" data-overlay-theme="b" data-dismissible="false"><div data-role="header"><h1>莆田購票務(wù)</h1></div><div data-role="main" class="ui-content"><form method="post" action="#"><label for="time">發(fā)車日期:</label><input type="date" name="time" id="time"><label for="site">起止站點:</label><input type="text" name="site" id="site"><label for="money">單張票價:</label><input type="text" name="money" id="money"><label for="fname">姓名:</label><input type="text" name="fname" id="fname"><label for="phone">電話:</label><input type="text" name="phone" id="phone"><label for="id">身份證件</label><input type="text" name="id" id="id"><input type="button" data-inline="true" value="提交" class="bk_sb"></form></div><div data-role="footer"><h1>莆田購票務(wù)系統(tǒng)</h1></div><a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-icon-delete ui-btn-right ui-btn-icon-notext"></a></div></div><div class="sv_lt col-md-2 col-sm-2 col-xs-2"><a href="#hotel" data-icon="info" data-rel="popup" data-transition="flip" class="ui-btn ui-btn-inline ui-corner-all" data-role="button"><img src="picture/hotel.jpg" alt="" class="img-thumbnail"><p class="text-muted">旅館</p></a><div data-role="popup" id="hotel" class="ui-content" data-overlay-theme="b" data-dismissible="false"><div data-role="header"><h1>訂房</h1></div><div data-role="main" class="ui-content"><form method="post" action="#"><label for="startime">開始住宿:</label><input type="date" name="startime" id="startime"><label for="endtime">結(jié)束住宿:</label><input type="date" name="endtime" id="endtime"><label for="room">房間號:</label><input type="text" name="room" id="room"><label for="fname">姓名:</label><input type="text" name="fname" id="fname"><label for="phone">電話:</label><input type="text" name="phone" id="phone"><label for="id">身份證件</label><input type="text" name="id" id="id"><input type="button" data-inline="true" value="提交" class="bk_sb"></form></div><div data-role="footer"><h1>訂房系統(tǒng)</h1></div><a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-icon-delete ui-btn-right ui-btn-icon-notext"></a></div></div><div class="sv_lt col-md-2 col-sm-2 col-xs-2"><a href="#tour_guide" data-icon="info" data-rel="popup" data-transition="flip" class="ui-btn ui-btn-inline ui-corner-all" data-role="button"><img src="picture/tour_guide.png" alt="" class="img-thumbnail"><p class="text-muted">導(dǎo)游</p></a><div data-role="popup" id="tour_guide" class="ui-content" data-overlay-theme="b" data-dismissible="false"><div data-role="header"><h1>導(dǎo)游</h1></div><div data-role="main" class="ui-content"><form method="post" action="#"><label for="startime">開始時間:</label><input type="date" name="startime" id="startime"><label for="endtime">結(jié)束時間:</label><input type="date" name="endtime" id="endtime"><label for="tour_guide">選擇導(dǎo)游:</label><div class="ui-field-contain"><select name="select-native-1" id="select-native-1" data-iconpos="left"><option value="1">請選擇導(dǎo)游</option><option value="2">李導(dǎo)</option><option value="3">陳導(dǎo)</option><option value="4">張導(dǎo)</option></select></div><label for="fname">姓名:</label><input type="text" name="fname" id="fname"><label for="phone">電話:</label><input type="text" name="phone" id="phone"><input type="button" data-inline="true" value="提交" class="bk_sb"></form></div><div data-role="footer"><h1>導(dǎo)游系統(tǒng)</h1></div><a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-icon-delete ui-btn-right ui-btn-icon-notext"></a></div></div><div class="sv_lt col-md-2 col-sm-2 col-xs-2"><a href="#shop" data-icon="info" data-rel="popup" data-transition="flip" class="ui-btn ui-btn-inline ui-corner-all" data-role="button"><img src="picture/shop.jpg" alt="" class="img-thumbnail"><p class="text-muted">購物</p></a><div data-role="popup" id="shop" class="ui-content" data-overlay-theme="b" data-dismissible="false"><div data-role="header"><h1>購物</h1></div><div data-role="main" class="ui-content"><form method="post" action="#"><label for="fname">姓名:</label><input type="text" name="fname" id="fname"><label for="phone">電話:</label><input type="text" name="phone" id="phone"><label>菜類</label><div class="ui-field-contain"><select name="select-native-1" id="select-native-1" data-iconpos="left"><option value="1">請選擇菜品</option><option value="2">包菜</option><option value="3">西紅柿</option><option value="4">青菜</option></select></div><label for="map">配送地址:</label><input type="text" name="map" id="map"><input type="button" data-inline="true" value="提交" class="bk_sb"></form></div><div data-role="footer"><h1>購物系統(tǒng)</h1></div><a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-icon-delete ui-btn-right ui-btn-icon-notext"></a></div></div><div class="sv_lt col-md-2 col-sm-2 col-xs-2"><a href="#take_out" data-icon="info" data-rel="popup" data-transition="flip" class="ui-btn ui-btn-inline ui-corner-all" data-role="button"><img src="picture/take_out.png" alt="" class="img-thumbnail"><p class="text-muted">外賣</p></a><div data-role="popup" id="take_out" class="ui-content" data-overlay-theme="b" data-dismissible="false"><div data-role="header"><h1>外賣</h1></div><div data-role="main" class="ui-content"><form method="post" action="#"><label for="room">房間號:</label><input type="text" name="room" id="room"><label for="fname">姓名:</label><input type="text" name="fname" id="fname"><label for="phone">電話:</label><input type="text" name="phone" id="phone"><label>美食</label><div class="ui-field-contain"><select name="select-native-1" id="select-native-1" data-iconpos="left"><option value="1">請選擇菜品</option><option value="2">漢堡</option><option value="3">可樂</option><option value="4">卷</option></select></div><label for="map">配送地址:</label><input type="text" name="map" id="map"><input type="button" data-inline="true" value="提交" class="bk_sb"></form></div><div data-role="footer"><h1>外賣系統(tǒng)</h1></div><a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-icon-delete ui-btn-right ui-btn-icon-notext"></a></div></div><div class="sv_lt col-md-2 col-sm-2 col-xs-2"><a href="#vip" data-icon="info" data-rel="popup" data-transition="flip" class="ui-btn ui-btn-inline ui-corner-all" data-role="button"><img src="picture/vip.png" alt="" class="img-thumbnail"><p class="text-muted">vip</p></a><div data-role="popup" id="vip" class="ui-content" data-overlay-theme="b" data-dismissible="false"><div data-role="header"><h1>vip</h1></div><div data-role="main" class="ui-content vip"><form method="post" action="#"><img src="picture/vip.png" alt="" class="img-thumbnail"><label>開通時長</label><div class="ui-field-contain"><select name="select-native-1" id="select-native-1" data-iconpos="left"><option value="1">請選擇時長</option><option value="2">1個月/30元</option><option value="3">3個月/90元</option><option value="4">12個月/360元</option></select></div><label for="phone">電話:</label><input type="text" name="phone" id="phone"><input type="button" data-inline="true" value="提交" class="bk_sb"></form></div><div data-role="footer"><h1>開通VIP服務(wù)</h1></div><a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-icon-delete ui-btn-right ui-btn-icon-notext"></a></div></div></div><div class="news"><a class="row"><div class="col-md-9"><h3>翡翠媽祖安座古田天后宮</h3><p class="text-muted">2020-12-15 09:25 莆田網(wǎng)</p><p class="text-info hidden-xs">這尊翡翠媽祖，由中華媽祖文化交流協(xié)會副會長、上海玉成天賜有限責(zé)任公司董事長趙柳成先生捐贈。中華媽祖文化交流協(xié)會副會長、湄洲媽祖祖廟董事長林金贊到古田天后宮安排分靈安座有關(guān)信俗事宜。</p><p class="text-muted">湄洲日報蘇麗彬</p></div><div class="col-md-3"><img src="picture/later.jpeg" alt="" class="img-thumbnail hidden-sm hidden-xs"></div></a><a class="row"><div class="col-md-9"><h3>莆田文峰宮為貧困大學(xué)生頒發(fā)助學(xué)金</h3><p class="text-muted">2020-12-15 09:25 莆田網(wǎng)</p><p class="text-info hidden-xs">莆田網(wǎng)訊 12月8日，莆田文峰天后宮董事長陳鷺玲走進莆田學(xué)院，為該院17名品學(xué)兼優(yōu)的家庭經(jīng)濟困難學(xué)生頒發(fā)“2020-2021學(xué)年文峰天后宮助學(xué)金”，每人獲助2000元，共計34000元。這是2015年以來莆田文峰天后宮連續(xù)第6年為該學(xué)院學(xué)生頒發(fā)助學(xué)金。</p><p class="text-muted">湄洲日報記者鄭已東</p></div><div class="col-md-3"><img src="picture/wenfeng.jpg" alt="" class="img-thumbnail hidden-sm hidden-xs"></div></a><a class="row"><div class="col-md-9"><h3>跨越海峽兩岸的媽祖情緣</h3><p class="text-muted">2020-12-15 09:24 莆田網(wǎng)</p><p class="text-info hidden-xs">自兩岸開放探親以來，臺灣媽祖分靈廟源源不斷地組團來湄洲媽祖祖廟謁祖進香，掀起天下媽祖回娘家的熱潮。這份起始于鄉(xiāng)愁，寄托于媽祖的“火熱情感”并沒有隨時間冷卻，反而在時光輪轉(zhuǎn)中愈發(fā)凝實，蘊藏著沖破時間和空間的力量，幾十年一直如此。</p><p class="text-muted">湄洲日報周建國文/圖</p></div><div class="col-md-3"><img src="picture/love.jpg" alt="" class="img-thumbnail hidden-sm hidden-xs"></div></a></div></div></div><div data-role="footer"><h1>版權(quán)?**</h1></div> </body></html>

學(xué)的反而越迷茫

有這種感覺很正常，因為你還沒有真正去公司里面待過，也不清楚自己到底要學(xué)多少東西才能勝任公司里面給你分配的活。我從你的表述來看，你的基礎(chǔ)應(yīng)該還是很扎實的。跟著網(wǎng)上那種全套的視頻教程學(xué)肯定沒有問題。

當(dāng)你以后真正進入公司，發(fā)現(xiàn)工作的難度和量大約只有你學(xué)習(xí)時期的大約20%，你可能就會發(fā)出一聲嘆息:原來工作也不過如此嘛。

這是很正常的，因為大部分公司是招你進去去干活的，寫業(yè)務(wù)的，不是讓你一個新人去研發(fā)公司架構(gòu)的。都是現(xiàn)成的東西，你要做的就是在別人的教導(dǎo)下，手把手的指揮下去添磚加瓦。到時候你恐怕要驚呼:就這？

所以，放松心態(tài)吧，好好享受大學(xué)時光
—————————————————

學(xué)習(xí)更多

關(guān)注我 | 點贊博文 | 每天帶你漲知識

總結(jié)

以上是生活随笔為你收集整理的大一学生WEB前端静态网页——旅游网页设计与实现(厦门旅游)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇：美颜SDK怎么用？美颜SDK可以应用到哪
下一篇： html语言制作旅游网站,基于WEB-H