?????學(xué)生HTML靜態(tài)網(wǎng)頁基礎(chǔ)水平制作?????，頁面排版干凈簡潔。使用HTML+CSS頁面布局設(shè)計(jì),web大學(xué)生網(wǎng)頁設(shè)計(jì)作業(yè)源碼，這是一個(gè)不錯(cuò)的旅游網(wǎng)頁制作，畫面精明，排版整潔，內(nèi)容豐富，主題鮮明，非常適合初學(xué)者學(xué)習(xí)使用, 這個(gè)實(shí)例比較全面，有助于同學(xué)的學(xué)習(xí),本文將介紹如何通過從頭開始設(shè)計(jì)個(gè)人網(wǎng)站并將其轉(zhuǎn)換為代碼的過程來實(shí)踐設(shè)計(jì)。
?? 精彩專欄推薦????????????
?? 【作者主頁——??獲取更多優(yōu)質(zhì)源碼】
?? 【web前端期末大作業(yè)——????畢設(shè)項(xiàng)目精品實(shí)戰(zhàn)案例(1000套)】
一、網(wǎng)站題目?????
?? 旅游景點(diǎn)介紹、旅游風(fēng)景區(qū)、家鄉(xiāng)介紹、等網(wǎng)站的設(shè)計(jì)與制作。
二、網(wǎng)站描述??
旅游景點(diǎn)介紹、旅游風(fēng)景區(qū)是一個(gè)介紹簡介、行政區(qū)劃、地理環(huán)境、自然環(huán)境、教育事業(yè)、體育事業(yè)、旅游景點(diǎn)、城市榮譽(yù)等等。網(wǎng)站集中主要展示了的地方風(fēng)土人情，并通過訪客留言，增加游客的互動(dòng)體驗(yàn)。同時(shí)，地方旅游網(wǎng)站里的每一個(gè)網(wǎng)頁都采用了統(tǒng)一的設(shè)計(jì)風(fēng)格，以加強(qiáng)城市整體面貌統(tǒng)一的宣傳效果。最重要的是做出旅游網(wǎng)站獨(dú)特的風(fēng)格，更能吸引瀏覽者的眼球。
三、網(wǎng)站介紹??
網(wǎng)站布局方面：計(jì)劃采用目前主流的、能兼容各大主流瀏覽器、顯示效果穩(wěn)定的浮動(dòng)網(wǎng)頁布局結(jié)構(gòu)。
網(wǎng)站程序方面：計(jì)劃采用最新的網(wǎng)頁編程語言HTML5+CSS3+JS程序語言完成網(wǎng)站的功能設(shè)計(jì)。并確保網(wǎng)站代碼兼容目前市面上所有的主流瀏覽器，已達(dá)到打開后就能即時(shí)看到網(wǎng)站的效果。
網(wǎng)站素材方面：計(jì)劃收集各大平臺(tái)好看的圖片素材，并精挑細(xì)選適合網(wǎng)頁風(fēng)格的圖片，然后使用PS做出適合網(wǎng)頁尺寸的圖片。
網(wǎng)站文件方面：網(wǎng)站系統(tǒng)文件種類包含：html網(wǎng)頁結(jié)構(gòu)文件、css網(wǎng)頁樣式文件、js網(wǎng)頁特效文件、images網(wǎng)頁圖片文件；
網(wǎng)頁編輯方面：網(wǎng)頁作品代碼簡單，可使用任意HTML編輯軟件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html編輯軟件進(jìn)行運(yùn)行及修改編輯等操作）。
其中：
（1）html文件包含：其中index.html是首頁、其他html為二級(jí)頁面；
（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代碼）。
四、網(wǎng)站效果??
網(wǎng)站設(shè)計(jì)制作的重點(diǎn)是對(duì)網(wǎng)頁整體設(shè)計(jì)的布局和對(duì)網(wǎng)頁整體內(nèi)容的選題。
網(wǎng)站設(shè)計(jì)方面：計(jì)劃實(shí)現(xiàn)簡潔大氣的網(wǎng)頁設(shè)計(jì)效果。
網(wǎng)站功能方面：計(jì)劃實(shí)現(xiàn)各個(gè)頁面之間的鏈接跳轉(zhuǎn)功能、鼠標(biāo)懸停在文字上的變色功能、簡單的首頁動(dòng)態(tài)圖片切換功能、簡單的表單提交功能。
五、網(wǎng)站代碼制作部分 ??
（1）網(wǎng)站首頁布局確定好各個(gè)板塊的內(nèi)容，并使用了DIV+CSS布局。另外首頁使用到的知識(shí)主要有圖片插入、圖片動(dòng)態(tài)切換、導(dǎo)航條、利用CSS固定字體、文字大小、文字顏色、背景顏色。
（2）頁面使用了DIV+CSS布局，使用到的知識(shí)主要有圖片插入、導(dǎo)航條、利用CSS固定字體、文字大小、文字顏色、背景顏色。
（3）表單部分頁面使用了DIV+CSS布局，使用到的知識(shí)主要有運(yùn)用了form表單、input文本框和input提交按鈕，完成表單信息收集。利用CSS設(shè)置input提交按鈕文字大小和顏色。
HTML結(jié)構(gòu)代碼??
<!DOCTYPE HTML>
<html>
<head>
<title>旅游景點(diǎn)|境內(nèi)旅游-旅游景點(diǎn)旅行社網(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="旅游景點(diǎn)|境內(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">你正在使用一個(gè)<strong>過時(shí)</strong>的瀏覽器。請(qǐng)<a target="_blank">升級(jí)您的瀏覽器</a>，以提高您的體驗(yàn)。</p>
</div>
<![endif]-->
<div class="load-box"></div>
<header>
<div class="head-box">
<div class="width-box">
<div class="logo-box">
<a href="" title="旅游景點(diǎn)旅行社網(wǎng)站">
<img src="./static/image/1506052119.png" alt="旅游景點(diǎn)旅行社網(wǎng)站">
<h2>旅游</h2>
<h4>400 000 0000</h4>
</a>
</div>
<div class="login-box">
<a href="login.html">登錄</a>
<a href="register.html">注冊(cè)</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="旅游景點(diǎn)旅行社網(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="景點(diǎn)" >景點(diǎn)</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="請(qǐng)輸入搜索關(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="youinfo.html" title="?？诘饺齺喨靸赏砥放朴?span id="n5n3t3z" class="token punctuation">" target='_self'>
<img class="lazyloadx" data-original='./static/image/1506322241.jpg' alt="?？诘饺齺喨靸赏砥放朴?span id="n5n3t3z" class="token punctuation">">
<span>海口到三亞三天兩晚品牌游</span>
<font>660.00元</font>
</a>
</li>
<li>
<a href="youinfo.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="youinfo.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="youinfo.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="youinfo.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="youinfo.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="youinfo.html" title="【南海之夢號(hào)郵輪】西沙群島4天3晚游" target='_self'>
<img class="lazyloadx" data-original='./static/image/1506319633.jpg' alt="【南海之夢號(hào)郵輪】西沙群島4天3晚游">
<span>【南海之夢號(hào)郵輪】西沙群島4天3晚游</span>
<font>1680.00元</font>
</a>
</li>
<li>
<a href="youinfo.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="youinfo.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="youinfo.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="youinfo.html" title="?？诘饺齺喨靸赏砥放朴?span id="n5n3t3z" class="token punctuation">" target='_self'>
<img class="lazyloadx" data-original='./static/image/1506322241.jpg' alt="海口到三亞三天兩晚品牌游">
<span>?？诘饺齺喨靸赏砥放朴?span id="n5n3t3z" class="token tag"></span>
<font>660.00元</font>
</a>
</li>
<li>
<a href="youinfo.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="youinfo.html" title="【南海之夢號(hào)郵輪】西沙群島4天3晚游" target='_self'>
<img class="lazyloadx" data-original='./static/image/1506319633.jpg' alt="【南海之夢號(hào)郵輪】西沙群島4天3晚游">
<span>【南海之夢號(hào)郵輪】西沙群島4天3晚游</span>
<font>1680.00元</font>
</a>
</li>
</ul>
<ul>
<li>
<a href="youinfo.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="youinfo.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="youinfo.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="旅游景點(diǎn)旅行社網(wǎng)站" target='_self'>
<img class="lazyloads" data-size="1170_120" data-original="./static/image/1506075016.jpg" alt="旅游景點(diǎn)旅行社網(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)驗(yàn)，著<em>“賓客至上，信譽(yù)第一”</em>的服務(wù)宗旨，嚴(yán)格規(guī)范的管理制度，高質(zhì)量的服務(wù)，贏得中外游客的廣泛贊譽(yù)。</p></div>
<div class="card-list">
<div class="card-li">
<div class="card-description">
<a class="card-title" href="gonglueinfo.html" title="2017海南三亞旅游攻略實(shí)用版" target='_self'><h3>2017海南三亞旅游攻略實(shí)用版</h3></a>
<img class="card-image lazyloadx" data-original='./static/image/1506334085.jpg'>
<p> 人的一生中至少要有兩次沖動(dòng)，一次為奮不顧身的愛情，一次為說走就走的旅行。旅行，一直是我的最愛，所以，我愿意“冒險(xiǎn)”一次，約上閨蜜一起開始一段旅行。 這個(gè)春季，我選擇三亞。（什么季節(jié)去海南最好呢，有人擔(dān)心夏天會(huì)不會(huì)太熱，其實(shí)夏天在海邊涼風(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海南三亞旅游攻略實(shí)用版&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海南三亞旅游攻略實(shí)用版&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'>
<p>作為中國最南部的一座濱海城市，三亞擁有得天獨(dú)厚的旅游資源：陽光、沙灘、海風(fēng)、椰林、新鮮空氣……而這一切仿佛都在訴說著：到三亞不去海釣是一種遺憾。海釣在歐美發(fā)達(dá)國家已經(jīng)有了上百年的歷史，是一種既刺激有充滿著無限樂趣的休閑玩樂方式，海釣愛好者們?nèi)羰堑搅巳齺啠梢匀ツ男┑胤竭M(jìn)行海釣活動(dòng)呢?以下這..</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-25</div>
<div class="card-geek">
<font class="eye">46</font>
<font class="share">
<span>
<a class="weibo" target="_blank" href="http://service.weibo.com/share/share.php?title=與海浪共舞，享垂釣樂趣！一起去三亞海釣！&url=http%3A%2F%2Fbreeze%2Fmuban%2FM1156012%2F359%2Fstrategy%2Fshownews.php%3Flang%3Dcn%26id%3D57&pic=http%3A%2F%2Fbreeze%2Fupload%2F201709%2F1506335872.jpg"></a>
<a class="weixin" data-href="http://breeze/muban/M1156012/359/strategy/shownews.php?lang=cn&id=57"></a>
<a class="qzone" target="_blank" href="https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?summary=與海浪共舞，享垂釣樂趣！一起去三亞海釣！&url=http%3A%2F%2Fbreeze%2Fmuban%2FM1156012%2F359%2Fstrategy%2Fshownews.php%3Flang%3Dcn%26id%3D57&pics=http%3A%2F%2Fbreeze%2Fupload%2F201709%2F1506335872.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/1506335186.jpg'>
<p>一、出發(fā)前的準(zhǔn)備 到了三亞肯定是要下海的，泳衣、游泳眼鏡、耳塞都要準(zhǔn)備好。替換衣物、太陽傘、太陽帽、太陽眼鏡、沙灘拖鞋也要帶上。三亞的陽光狠，所以就得使用護(hù)膚品。防曬霜是必須配備的，曬后鎮(zhèn)定修護(hù)露、保濕噴霧、白面膜等都可以帶上。洗發(fā)液、護(hù)發(fā)素也是必備的。海水很傷頭發(fā)的，酒店提供..</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-25</div>
<div class="card-geek">
<font class="eye">26</font>
<font class="share">
<span>
<a class="weibo" target="_blank" href="http://service.weibo.com/share/share.php?title=海南旅游自由行攻略&url=http%3A%2F%2Fbreeze%2Fmuban%2FM1156012%2F359%2Fstrategy%2Fshownews.php%3Flang%3Dcn%26id%3D56&pic=http%3A%2F%2Fbreeze%2Fupload%2F201709%2F1506335186.jpg"></a>
<a class="weixin" data-href="http://breeze/muban/M1156012/359/strategy/shownews.php?lang=cn&id=56"></a>
<a class="qzone" target="_blank" href="https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?summary=海南旅游自由行攻略&url=http%3A%2F%2Fbreeze%2Fmuban%2FM1156012%2F359%2Fstrategy%2Fshownews.php%3Flang%3Dcn%26id%3D56&pics=http%3A%2F%2Fbreeze%2Fupload%2F201709%2F1506335186.jpg"></a>
</span>
</font>
</div>
</div>
</div>
<div class="card-li">
<div class="card-description">
<a class="card-title" href="gonglueinfo.html" title="海南三亞旅游攻略實(shí)用版－五天四晚游" target='_self'><h3>海南三亞旅游攻略實(shí)用版－五天四晚游</h3></a>
<img class="card-image lazyloadx" data-original='./static/image/1506335126.jpg'>
<p>7.27 廈門——三亞 20:55~23:05 首都航空 JD5736 白天可以上班不請(qǐng)假交通花費(fèi)：520*2=1040RMB住宿花費(fèi)：330RMB，住鳳凰機(jī)場酒店，候機(jī)樓斜對(duì)面30 m。7.28 南山寺and大小洞天交通花費(fèi)：8路到國光豪生酒店4 RMB；過馬路轉(zhuǎn)25/57路到南山寺10..</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-25</div>
<div class="card-geek">
<font class="eye">26</font>
<font class="share">
<span>
<a class="weibo" target="_blank" href="http://service.weibo.com/share/share.php?title=海南三亞旅游攻略實(shí)用版－五天四晚游&url=http%3A%2F%2Fbreeze%2Fmuban%2FM1156012%2F359%2Fstrategy%2Fshownews.php%3Flang%3Dcn%26id%3D55&pic=http%3A%2F%2Fbreeze%2Fupload%2F201709%2F1506335126.jpg"></a>
<a class="weixin" data-href="http://breeze/muban/M1156012/359/strategy/shownews.php?lang=cn&id=55"></a>
<a class="qzone" target="_blank" href="https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?summary=海南三亞旅游攻略實(shí)用版－五天四晚游&url=http%3A%2F%2Fbreeze%2Fmuban%2FM1156012%2F359%2Fstrategy%2Fshownews.php%3Flang%3Dcn%26id%3D55&pics=http%3A%2F%2Fbreeze%2Fupload%2F201709%2F1506335126.jpg"></a>
</span>
</font>
</div>
</div>
</div>
</div>
</div>
<div class="main-right">
<div class="editor-button">
<a href="" title="報(bào)名咨詢" target='_self'>
<img class="lazyloads" data-size="19_17" data-original="./static/image/geek_5.png">
報(bào)名咨詢
</a>
</div>
<div class="card-tags">
<h4>熱搜標(biāo)簽</h4>
<ul>
<li><a href="#" title="亞龍灣熱帶天堂森林公園" target='_self'>亞龍灣熱帶天堂森林公園</a></li>
<li><a href="#" title="西沙群島" target='_self'>西沙群島</a></li>
<li><a href="#" title="蜈支洲島" target='_self'>蜈支洲島</a></li>
<li><a href="#" title="三天兩夜" target='_self'>三天兩夜</a></li>
<li><a href="#" title="西沙群島" target='_self'>西沙群島</a></li>
<li><a href="#" title="西島" target='_self'>西島</a></li>
</ul>
</div>
<div class="card-active">
<h4>推薦路線</h4>
<ul>
<li>
<a href="#" title="海南-三亞三天三夜自助游" target='_self'>
<img class="lazyloads" data-original='./static/image/1506311787.jpg'>
<span>海南-三亞三天三夜自助游</span>
</a>
</li>
<li>
<a href="#" title="三亞一地5天4晚“島人行島”豪華游" target='_self'>
<img class="lazyloads" data-original='./static/image/1506321153.jpg'>
<span>三亞一地5天4晚“島人行島”豪華游</span>
</a>
</li>
<li>
<a href="#" title="三亞到西沙群島4天3晚自助游" target='_self'>
<img class="lazyloads" data-original='./static/image/1506320253.jpg'>
<span>三亞到西沙群島4天3晚自助游</span>
</a>
</li>
</ul>
</div>
<div class="card-hots">
<h4>熱門排行</h4>
<ul>
<li><a href="#" title="2017海南三亞旅游攻略實(shí)用版" target='_self'>2017海南三亞旅游攻略實(shí)用版</a></li>
<li><a href="#" title="與海浪共舞，享垂釣樂趣！一起去三亞海釣！" target='_self'>與海浪共舞，享垂釣樂趣！一起去三亞海釣！</a></li>
<li><a href="#" title="海南旅游自由行攻略" target='_self'>海南旅游自由行攻略</a></li>
<li><a href="#" title="海南三亞旅游攻略實(shí)用版－五天四晚游" target='_self'>海南三亞旅游攻略實(shí)用版－五天四晚游</a></li>
</ul>
</div>
</div>
</div>
</section>
<footer>
<div class="foot-box">
<div class="width-box">
<div class="foot-left">
<div class="met-links">
<ol class="breadcrumb">
<li>友情鏈接 :</li>
<li>
<a href="http://www.baidu.com/" title="" target="_blank">
去哪兒網(wǎng)
</a>
</li>
<li>
<a href="http://www.baidu.com/" title="" target="_blank">
旅游網(wǎng)
</a>
</li>
<li>
<a href="http://www.baidu.com/" title="" target="_blank">
海南旅游網(wǎng)
</a>
</li>
<li>
<a href="http://www.baidu.com/" title="" target="_blank">
三亞旅游
</a>
</li>
</ol>
</div>
<p>企業(yè)網(wǎng)站管理系統(tǒng)</p>
</div>
<div class="foot-right">
<div class="foot-lang">
</div>
<div class="powered_by_metinfo">Powered by <a href="http://www.breeze.cn/#copyright" 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>打開微信，使用“掃一掃”，點(diǎn)擊右上角“分享到朋友圈”。</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>
CSS樣式代碼??
body {
padding-top: 0px;
}
.site-menubar {
position: fixed;
top: 66px;
z-index: 1400;
height: 100%;
height: -webkit-calc(100% - 66px);
height: calc(100% - 66px);
font-family: "Roboto", sans-serif;
color: rgba(163, 175, 183, .9);
background: #263238;
-webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, .08);
box-shadow: 0 2px 4px rgba(0, 0, 0, .08);
}
.site-menubar-body {
height: 100%;
height: -webkit-calc(100% - 76px);
height: calc(100% - 76px);
}
.site-menubar ul {
padding: 0;
margin: 0;
list-style: none;
}
.site-menubar a {
outline: none;
}
.site-menubar a:hover,
.site-menubar a:focus {
text-decoration: none;
}
.site-menubar.site-menubar-light {
background: #fff;
-webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, .08);
box-shadow: 0 2px 4px rgba(0, 0, 0, .08);
}
.site-menubar.site-menubar-light .scrollable-inverse.scrollable .scrollable-bar-handle {
background: rgba(163, 175, 183, .6);
}
.site-menubar-section {
padding: 0 30px;
margin-top: 50px;
margin-bottom: 50px;
}
.site-menubar-section > h4,
.site-menubar-section > h5 {
color: #76838f;
}
.site-menubar-section .progress:last-child {
margin-bottom: 0;
}
.site-menubar-footer {
position: fixed;
bottom: 0;
z-index: 1400;
display: block;
}
六、遇到問題及如何解決??
實(shí)訓(xùn)中遇到得困難不少，比如如何收集適合網(wǎng)頁的圖片素材、如何讓網(wǎng)頁的配色看著更自然更舒適、如何用PS裁剪大小合適的圖片、以及制作表單時(shí)候如何設(shè)計(jì)等等，最后，通過上網(wǎng)查詢和請(qǐng)教別人得到了很好的解決。
七、實(shí)訓(xùn)總結(jié)??
通過這次網(wǎng)頁設(shè)計(jì)制作實(shí)訓(xùn)，能夠靈活的運(yùn)用到所學(xué)的知識(shí)和技巧制作簡單的網(wǎng)頁，掌握了個(gè)人網(wǎng)站建設(shè)的技巧和基本網(wǎng)站建設(shè)的過程。對(duì)于用Dreamweaver、vscode、hbuider等制作網(wǎng)頁更為得心應(yīng)手。實(shí)訓(xùn)過程中我盡量充分利用老師教過的知識(shí)，對(duì)所學(xué)知識(shí)進(jìn)行了鞏固。為了制作出更好的效果我也翻閱參考了其他資料，學(xué)習(xí)到了更多的網(wǎng)頁處理技巧。制作網(wǎng)頁的過程中遇到很多的問題，通過查找資料或詢問同學(xué)都有得到解決。這次綜合實(shí)訓(xùn)我的收獲很大，學(xué)有所用，在實(shí)踐的過程中學(xué)習(xí)鞏固對(duì)知識(shí)能有更深的記憶。網(wǎng)頁制作是一門很實(shí)用的學(xué)科，值得我以后進(jìn)行更深入的學(xué)習(xí)。這次實(shí)訓(xùn)中我也體會(huì)到了自己掌握的技巧太少了，以至于很多想法都沒能實(shí)現(xiàn)，在以后的學(xué)習(xí)過程中我要對(duì)網(wǎng)頁制作有更深的了解，做出更為成熟的網(wǎng)頁。
八、更多干貨??
1.如果我的博客對(duì)你有幫助、如果你喜歡我的博客內(nèi)容，請(qǐng) “??點(diǎn)贊” “??評(píng)論” “??收藏” 一鍵三連哦！
2.??【????????????關(guān)注我| 獲取更多源碼 | 優(yōu)質(zhì)文章】 帶您學(xué)習(xí)各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學(xué)生畢業(yè)HTML模板 、期末大作業(yè)模板 、等! 「在這里有好多 前端 開發(fā)者，一起探討 前端 Node 知識(shí)，互相學(xué)習(xí)」！文章來源：http://www.zghlxwxcb.cn/news/detail-768515.html
3.以上內(nèi)容技術(shù)相關(guān)問題??歡迎一起交流學(xué)習(xí)??????????????文章來源地址http://www.zghlxwxcb.cn/news/detail-768515.html
到了這里，關(guān)于web前端網(wǎng)頁設(shè)計(jì)期末課程大作業(yè)：旅游網(wǎng)頁主題網(wǎng)站設(shè)計(jì)——三亞旅游網(wǎng)頁設(shè)計(jì)(6個(gè)頁面) HTML+CSS+JavaScript的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
