HTML5期末大作业：三亚设计 6页 旅游网页设计与实现——旅游风景区网站HTML+CSS
生活随笔
收集整理的這篇文章主要介紹了
HTML5期末大作业：三亚设计 6页 旅游网页设计与实现——旅游风景区网站HTML+CSS
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
? 源碼獲取 文末聯(lián)系 ?
Web前端開發(fā)技術(shù)
描述 網(wǎng)頁設(shè)計題材，DIV+CSS 布局制作,HTML+CSS網(wǎng)頁設(shè)計期末課程大作業(yè) | 游景點介紹 | 旅游風(fēng)景區(qū) | 家鄉(xiāng)介紹 | 等網(wǎng)站的設(shè)計與制作 | HTML期末大學(xué)生網(wǎng)頁設(shè)計作業(yè)
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)首頁：進(jìn)入網(wǎng)頁中看到的第一個頁面(LOGO、公司名稱、導(dǎo)航、banner、新聞、相關(guān)信息、底部信息、banner一般是5個
(2)二級頁面：從首頁點擊進(jìn)入之后的頁面叫做二級頁面
(3)三級頁面：從二級頁面點擊進(jìn)入的頁面
網(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> <head> <title>旅游景點|境內(nèi)旅游-旅游景點旅行社網(wǎng)站</title> <meta name="renderer" content="webkit"> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="applicable-device" content="pc,mobile"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui"> <meta name="description" content="" /> <meta name="keywords" content="旅游景點|境內(nèi)旅游" /> <link rel='stylesheet' href='./static/css/style.css'> </head> <body> <!--[if lte IE 8]><div class="text-center padding-top-50 padding-bottom-50 bg-blue-grey-100"><p class="browserupgrade font-size-18">你正在使用一個<strong>過時</strong>的瀏覽器。請<a href="http://browsehappy.com/" target="_blank">升級您的瀏覽器</a>，以提高您的體驗。</p></div> <![endif]--> <div class="load-box"></div> <header><div class="head-box"><div class="width-box"><div class="logo-box"><a href="javascript:;" title="旅游景點旅行社網(wǎng)站"><img src="./static/image/1506052119.png" alt="旅游景點旅行社網(wǎng)站"><h2>旅游</h2><h4>400 000 0000</h4></a></div> <div class="login-box"><a href="login.html">登錄</a><a href="register.html">注冊</a> </div></div></div> </header> <nav><div class="nav-box"><div class="width-box"><div class="nav-cut"><ul class="nav-ul"><li class="nav-li "><a href="index.html" title="旅游景點旅行社網(wǎng)站">首頁</a></li><li class="nav-li active navs margin-left-"><a href="you.html" title="跟團(tuán)游" >跟團(tuán)游</a></li><li class="nav-li navs margin-left-"><a href="you.html" title="自助游" >自助游</a></li><li class="nav-li navs margin-left-"><a href="you.html" title="自駕游" >自駕游</a></li><li class="nav-li navs margin-left-"><a href="you.html" title="酒店" >酒店</a></li><li class="nav-li margin-left-"><a href="you.html" title="景點" >景點</a></li><li class="nav-li margin-left-"><a href="gonglue.html" title="攻略" >攻略</a></li><li class="nav-li margin-left-"><a href="gonglue.html" title="交通" >交通</a></li></ul></div><div class="search-cut"><div class="search-button"></div><div class="search-box"><form method="get" action="gonglue.html"><input type="hidden" name="lang" value="cn"><input type="hidden" name="class1" value="10001"><input type="text" placeholder="請輸入搜索關(guān)鍵詞！" name="searchword" value=""><button type="submit"></button></form></div></div></div></div> </nav><section><div class="width-box"><div class="banner-box transform-box"><div class="met-banner banner-ny-h" data-height='' style=''><div class="slick-slide"><img class="cover-image" data-size="1170_100" src="./static/image/1506069563.jpg" srcset='' sizes="(max-width: 767px) 767px" alt=""></div> <div class="slick-slide"><img class="cover-image" data-size="1170_100" data-lazy="./static/image/1506073462.jpg" srcset='' sizes="(max-width: 767px) 767px" alt=""></div> </div></div></div> </section><section class="main"><div class="width-box"><div class="price-box"><div class="price-nav transform-box"><ol class="price-ul"><li class="price-li active"><a title="跟團(tuán)游">熱門推薦</a></li><li class="price-li"><a title="一日游">一日游</a></li><li class="price-li"><a title="二日游">二日游</a></li><li class="price-li"><a title="三日游">三日游</a></li><li class="price-li"><a title="四日游">四日游</a></li><li class="price-li"><a title="五日游">五日游</a></li><li class="price-li"><a title="六日游">六日游</a></li><li class="price-li"><a title="七日游">七日游</a></li></ol></div><div class="price-cut"><ul class="active"><li><a href="gonglueinfo.html" title="?？诘饺齺喨靸赏砥放朴?span id="ozvdkddzhkzd" class="token punctuation">" target='_self'><img class="lazyloadx" data-original='./static/image/1506322241.jpg' alt="?？诘饺齺喨靸赏砥放朴?span id="ozvdkddzhkzd" class="token punctuation">"><span>?？诘饺齺喨靸赏砥放朴?span id="ozvdkddzhkzd" class="token tag"></span><font>660.00元</font></a></li><li><a href="gonglueinfo.html" title="三亞-西沙三日游精華線" target='_self'><img class="lazyloadx" data-original='./static/image/1506321574.jpg' alt="三亞-西沙三日游精華線"><span>三亞-西沙三日游精華線</span><font>1280.00元</font></a></li><li><a href="gonglueinfo.html" title="豪華游輪 西沙七日游" target='_self'><img class="lazyloadx" data-original='./static/image/1506321623.jpg' alt="豪華游輪 西沙七日游"><span>豪華游輪 西沙七日游</span><font>4999.00元</font></a></li><li><a href="gonglueinfo.html" title="海南三亞-西沙六日游" target='_self'><img class="lazyloadx" data-original='./static/image/1506321389.jpg' alt="海南三亞-西沙六日游"><span>海南三亞-西沙六日游</span><font>3880.00元</font></a></li><li><a href="gonglueinfo.html" title="三亞一地5天4晚“島人行島”豪華游" target='_self'><img class="lazyloadx" data-original='./static/image/1506321153.jpg' alt="三亞一地5天4晚“島人行島”豪華游"><span>三亞一地5天4晚“島人行島”豪華游</span><font>3680.00元</font></a></li><li><a href="gonglueinfo.html" title="天堂森林公園-亞龍灣沙灘1日游" target='_self'><img class="lazyloadx" data-original='./static/image/1506307339.jpg' alt="天堂森林公園-亞龍灣沙灘1日游"><span>天堂森林公園-亞龍灣沙灘1日游</span><font>145.00元</font></a></li><li><a href="gonglueinfo.html" title="【南海之夢號郵輪】西沙群島4天3晚游" target='_self'><img class="lazyloadx" data-original='./static/image/1506319633.jpg' alt="【南海之夢號郵輪】西沙群島4天3晚游"><span>【南海之夢號郵輪】西沙群島4天3晚游</span><font>1680.00元</font></a></li><li><a href="gonglueinfo.html" title="（2天精品A線）絕美蜈支洲2日游" target='_self'><img class="lazyloadx" data-original='./static/image/1506310281.jpg' alt="（2天精品A線）絕美蜈支洲2日游"><span>（2天精品A線）絕美蜈支洲2日游</span><font>225.00元</font></a></li></ul><ul><li><a href="gonglueinfo.html" title="天堂森林公園-亞龍灣沙灘1日游" target='_self'><img class="lazyloadx" data-original='./static/image/1506307339.jpg' alt="天堂森林公園-亞龍灣沙灘1日游"><span>天堂森林公園-亞龍灣沙灘1日游</span><font>145.00元</font></a></li></ul><ul><li><a href="gonglueinfo.html" title="（2天精品A線）絕美蜈支洲2日游" target='_self'><img class="lazyloadx" data-original='./static/image/1506310281.jpg' alt="（2天精品A線）絕美蜈支洲2日游"><span>（2天精品A線）絕美蜈支洲2日游</span><font>225.00元</font></a></li></ul><ul><li><a href="gonglueinfo.html" title="海口到三亞三天兩晚品牌游" target='_self'><img class="lazyloadx" data-original='./static/image/1506322241.jpg' alt="?？诘饺齺喨靸赏砥放朴?span id="ozvdkddzhkzd" class="token punctuation">"><span>海口到三亞三天兩晚品牌游</span><font>660.00元</font></a></li><li><a href="gonglueinfo.html" title="三亞-西沙三日游精華線" target='_self'><img class="lazyloadx" data-original='./static/image/1506321574.jpg' alt="三亞-西沙三日游精華線"><span>三亞-西沙三日游精華線</span><font>1280.00元</font></a></li></ul><ul><li><a href="gonglueinfo.html" title="【南海之夢號郵輪】西沙群島4天3晚游" target='_self'><img class="lazyloadx" data-original='./static/image/1506319633.jpg' alt="【南海之夢號郵輪】西沙群島4天3晚游"><span>【南海之夢號郵輪】西沙群島4天3晚游</span><font>1680.00元</font></a></li></ul><ul><li><a href="gonglueinfo.html" title="三亞一地5天4晚“島人行島”豪華游" target='_self'><img class="lazyloadx" data-original='./static/image/1506321153.jpg' alt="三亞一地5天4晚“島人行島”豪華游"><span>三亞一地5天4晚“島人行島”豪華游</span><font>3680.00元</font></a></li></ul><ul><li><a href="gonglueinfo.html" title="海南三亞-西沙六日游" target='_self'><img class="lazyloadx" data-original='./static/image/1506321389.jpg' alt="海南三亞-西沙六日游"><span>海南三亞-西沙六日游</span><font>3880.00元</font></a></li></ul><ul><li><a href="gonglueinfo.html" title="豪華游輪 西沙七日游" target='_self'><img class="lazyloadx" data-original='./static/image/1506321623.jpg' alt="豪華游輪 西沙七日游"><span>豪華游輪 西沙七日游</span><font>4999.00元</font></a></li></ul></div></div></div><div class="width-box"><div class="advert-box"><a href="http://www.baidu.com" title="旅游景點旅行社網(wǎng)站" target='_self'><img class="lazyloads" data-size="1170_120" data-original="./static/image/1506075016.jpg" alt="旅游景點旅行社網(wǎng)站"></a></div></div><div class="width-box"><div class="main-left"><div class="notice-box"><h3>海南.三亞<em>旅游熱線</em> ——<em>400-000-0000</em></h3><p>成立9年以來，組織和接待了來自世界各國、各地區(qū)的游客100萬人次，積累了豐富的旅游接待經(jīng)驗，著<em>“賓客至上，信譽第一”</em>的服務(wù)宗旨，嚴(yán)格規(guī)范的管理制度，高質(zhì)量的服務(wù)，贏得中外游客的廣泛贊譽。</p></div><div class="card-list"><div class="card-li"><div class="card-description"><a class="card-title" href="gonglueinfo.html" title="2017海南三亞旅游攻略實用版" target='_self'><h3>2017海南三亞旅游攻略實用版</h3></a><img class="card-image lazyloadx" data-original='./static/image/1506334085.jpg'><p> 人的一生中至少要有兩次沖動，一次為奮不顧身的愛情，一次為說走就走的旅行。旅行，一直是我的最愛，所以，我愿意“冒險”一次，約上閨蜜一起開始一段旅行。 這個春季，我選擇三亞。（什么季節(jié)去海南最好呢，有人擔(dān)心夏天會不會太熱，其實夏天在海邊涼風(fēng)習(xí)習(xí)，水溫正適合體質(zhì)較弱的人群）。 ..</p></div><div class="card-operation"><div class="card-author"><img class="lazyloadx" data-original="./static/image/user.jpg"><font>admin</font></div><div class="card-time">發(fā)布于 2017-09-26</div><div class="card-geek"><font class="eye">376</font><font class="share"> <span><a class="weibo" target="_blank" href="http://service.weibo.com/share/share.php?title=2017海南三亞旅游攻略實用版&url=http%3A%2F%2Fbreeze%2Fmuban%2FM1156012%2F359%2Fstrategy%2Fshownews.php%3Flang%3Dcn%26id%3D54&pic=http%3A%2F%2Fbreeze%2Fupload%2F201709%2F1506334085.jpg"></a><a class="weixin" data-href="http://breeze/muban/M1156012/359/strategy/shownews.php?lang=cn&id=54"></a><a class="qzone" target="_blank" href="https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?summary=2017海南三亞旅游攻略實用版&url=http%3A%2F%2Fbreeze%2Fmuban%2FM1156012%2F359%2Fstrategy%2Fshownews.php%3Flang%3Dcn%26id%3D54&pics=http%3A%2F%2Fbreeze%2Fupload%2F201709%2F1506334085.jpg"></a></span></font></div></div></div><div class="card-li"><div class="card-description"><a class="card-title" href="gonglueinfo.html" title="與海浪共舞，享垂釣樂趣！一起去三亞海釣！" target='_self'><h3>與海浪共舞，享垂釣樂趣！一起去三亞海釣！</h3></a><img class="card-image lazyloadx" data-original='./static/image/1506335872.jpg</div><div class="foot-right"><div class="foot-lang"></div><div class="powered_by_metinfo">Powered by <a href="javascipt:;" target="_blank" title="企業(yè)網(wǎng)站管理系統(tǒng)">breeze</a> </div></div></div></div> </footer><div class="weixin-box"><b><em>X</em>分享到微信朋友圈</b><i></i><p>打開微信，使用“掃一掃”，點擊右上角“分享到朋友圈”。</p> </div><button type="button" class="btn btn-icon btn-primary btn-squared met-scroll-top hide"><i class="icon wb-chevron-up" aria-hidden="true"></i></button><script src="./static/js/shop_lang_cn.js"></script><script src="./static/js/style.js"></script><!-- <script src="./static/js/shop_v3.js?20171025163800"></script> --></body> </html>學(xué)的反而越迷茫
有這種感覺很正常，因為你還沒有真正去公司里面待過，也不清楚自己到底要學(xué)多少東西才能勝任公司里面給你分配的活。我從你的表述來看，你的基礎(chǔ)應(yīng)該還是很扎實的。跟著網(wǎng)上那種全套的視頻教程學(xué)肯定沒有問題。
當(dāng)你以后真正進(jìn)入公司，發(fā)現(xiàn)工作的難度和量大約只有你學(xué)習(xí)時期的大約20%，你可能就會發(fā)出一聲嘆息:原來工作也不過如此嘛。
這是很正常的，因為大部分公司是招你進(jìn)去去干活的，寫業(yè)務(wù)的，不是讓你一個新人去研發(fā)公司架構(gòu)的。都是現(xiàn)成的東西，你要做的就是在別人的教導(dǎo)下，手把手的指揮下去添磚加瓦。到時候你恐怕要驚呼:就這？
所以，放松心態(tài)吧，好好享受大學(xué)時光
—————————————————
學(xué)習(xí)更多
關(guān)注我 | 點贊博文 | 每天帶你漲知識
總結(jié)
以上是生活随笔為你收集整理的HTML5期末大作业：三亚设计 6页 旅游网页设计与实现——旅游风景区网站HTML+CSS的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： NavicatPremium12.1.1
- 下一篇： Chrome浏览器批量离线下载迅雷快传资