国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 在線咨詢 在線咨詢
15158846557 在線咨詢
所在位置: 首頁 > 營銷資訊 > 網(wǎng)站運(yùn)營 > HTML+CSS+JS家鄉(xiāng)主題網(wǎng)頁設(shè)計(jì) 學(xué)生網(wǎng)頁設(shè)計(jì)作品 dreamweaver作業(yè)靜態(tài)HTML網(wǎng)頁設(shè)計(jì)模

HTML+CSS+JS家鄉(xiāng)主題網(wǎng)頁設(shè)計(jì) 學(xué)生網(wǎng)頁設(shè)計(jì)作品 dreamweaver作業(yè)靜態(tài)HTML網(wǎng)頁設(shè)計(jì)模

時(shí)間:2023-10-14 08:12:01 | 來源:網(wǎng)站運(yùn)營

時(shí)間:2023-10-14 08:12:01 來源:網(wǎng)站運(yùn)營

HTML+CSS+JS家鄉(xiāng)主題網(wǎng)頁設(shè)計(jì) 學(xué)生網(wǎng)頁設(shè)計(jì)作品 dreamweaver作業(yè)靜態(tài)HTML網(wǎng)頁設(shè)計(jì)模板 旅游景點(diǎn)網(wǎng)頁作業(yè)制作:

> 家鄉(xiāng)旅游景點(diǎn)網(wǎng)頁作業(yè)制作 網(wǎng)頁代碼運(yùn)用了DIV盒子的使用方法,如盒子的嵌套、浮動(dòng)、margin、border、background等屬性的使用,外部大盒子設(shè)定居中,內(nèi)部左中右布局,下方橫向浮動(dòng)排列,大學(xué)學(xué)習(xí)的前端知識(shí)點(diǎn)和布局方式都有運(yùn)用,CSS的代碼量也很足、很細(xì)致,使用hover來完成過渡效果、鼠標(biāo)滑過效果等,使用表格、表單補(bǔ)充模塊,為方便新手學(xué)習(xí)頁面中沒有使用js有需要的可以自行添加。

?精彩專欄推薦

? 【作者主頁—— 獲取更多優(yōu)質(zhì)源碼】 ? 【web前端期末大作業(yè)—— 畢設(shè)項(xiàng)目精品實(shí)戰(zhàn)案例(1000套)】


@TOC

一、網(wǎng)頁介紹

1 網(wǎng)頁簡介:此作品為學(xué)生個(gè)人主頁網(wǎng)頁設(shè)計(jì)題材,HTML+CSS 布局制作,web前端期末大作業(yè),大學(xué)生網(wǎng)頁設(shè)計(jì)作業(yè)源碼,這是一個(gè)不錯(cuò)的網(wǎng)頁制作,畫面精明,代碼為簡單學(xué)生水平, 非常適合初學(xué)者學(xué)習(xí)使用。

2.網(wǎng)頁編輯:網(wǎng)頁作品代碼簡單,可使用任意HTML編輯軟件(如:Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html編輯軟件進(jìn)行運(yùn)行及修改編輯等操作)。

3.知識(shí)應(yīng)用:技術(shù)方面主要應(yīng)用了網(wǎng)頁知識(shí)中的: Div+CSS、鼠標(biāo)滑過特效、Table、導(dǎo)航欄效果、Banner、表單、二級(jí)三級(jí)頁面等,視頻、 音頻元素 、Flash,同時(shí)設(shè)計(jì)了Logo(源文件)所需的知識(shí)點(diǎn)。


一、網(wǎng)頁效果




在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述




二、代碼展示


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

代碼如下(示例):以下僅展示部分代碼供參考~

<!DOCTYPE HTML><html><head><title>首頁-名城衢州</title><meta name="viewport" content="width=device-width, initial-scale=1"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all"><link href="css/style.css" rel="stylesheet" type="text/css" media="all" /><script src="js/jquery.min.js"></script><script type="text/javascript" src="js/move-top.js"></script> <script type="text/javascript"> jQuery(document).ready(function($) { $(".scroll").click(function(event){ event.preventDefault(); $('html,body').animate({scrollTop:$(this.hash).offset().top},1200); }); }); $(document).ready(function() { $().UItoTop({ easingType: 'easeOutQuart' }); });</script></head><body><div class="header"><div class="container"> <div class="logo"> <div class="container"> <a href="index.html"><img src="images/logo.png" class="img-responsive" alt=""></a> </div> </div> <div class="top-nav"> <span class="menu"><img src="images/menu.png" alt=""></span> <ul class="nav1"> <li class="hvr-sweep-to-bottom active"><a href="index.html">首頁</a></li> <li class="hvr-sweep-to-bottom"><a href="travel.html">旅游</a></li> <li class="hvr-sweep-to-bottom"><a href="photos.html">美景</a></li> <li class="hvr-sweep-to-bottom"><a href="interact.html">互動(dòng)</a></li> <div class="clearfix"> </div> </ul> <!-- script-for-menu --> <script> $( "span.menu" ).click(function() { $( "ul.nav1" ).slideToggle( 300, function() { // Animation complete. }); }); </script> <!-- /script-for-menu --> </div> <div class="b-search"> <form> <input type="text" value="Search" onFocus="this.value = '';" onBlur="if (this.value == '') {this.value = 'Search';}"> <input type="submit" value=""> </form> </div> <div class="clearfix"></div></div></div><div class="instructors"> <div class="container"> <div class="col-md-4 instru-left"> <h3>最新資訊</h3> <div class="inst-top"> <div class="ins-lef"> <a href="view.html"><img src="images/6.jpg" class="img-responsive" alt="" /></a> </div> <div class="ins-righ"> <h4>非遺文化“盛宴”</h4> <p>包括了婺劇、道情保護(hù)成果展演及龍游皮紙制紙師評(píng)選等。</p> </div> <div class="clearfix"></div> </div> <div class="inst-top1"> <div class="ins-lef"> <a href="view.html"><img src="images/7.jpg" class="img-responsive" alt="" /></a> </div> <div class="ins-righ"> <h4>打造十里風(fēng)荷景觀</h4> <p>開化縣村頭鎮(zhèn)古竹村的荷塘內(nèi),荷葉隨風(fēng)搖曳,白鷺翩翩起舞。</p> </div> <div class="clearfix"></div> </div> <div class="inst-top2"> <div class="ins-lef"> <a href="view.html"><img src="images/8.jpg" class="img-responsive" alt="" /></a> </div> <div class="ins-righ"> <h4>開化景區(qū)人氣火爆</h4> <p>開化各大景區(qū)景點(diǎn)游客如織,感受錢江源國家公園的獨(dú)特魅力。</p> </div> <div class="clearfix"></div> </div> </div> <div class="col-md-8 instru-right"> <div class="training"> <div class="tra-left"> <a href="view.html"><img src="images/9.jpg" class="img-responsive" alt="" /></a> </div> <div class="tra-right"> <h3>熱點(diǎn)聚焦</h3> <h5>全力打造全域旅游“江山樣本”</h5> <p>在中國幸福鄉(xiāng)村建設(shè)的基礎(chǔ)上,2016年又創(chuàng)新提出打造“中國幸福鄉(xiāng)村”2.0版本。當(dāng)年,江山成功創(chuàng)建全省首批美麗鄉(xiāng)村示范縣。2017年,成功承辦全省美麗鄉(xiāng)村和農(nóng)村精神文明建設(shè)現(xiàn)場會(huì)。此后,美麗鄉(xiāng)村景區(qū)化標(biāo)準(zhǔn)在全省推廣,并升格為A級(jí)景區(qū)村莊省級(jí)標(biāo)準(zhǔn)。近兩年,江山成功打造省A級(jí)景區(qū)村莊128個(gè),其中3A級(jí)景區(qū)村莊22個(gè),數(shù)量居全省第一。</p> </div> <div class="clearfix"></div> </div> <div class="sructs"> <h6>衢州美圖欣賞</h6> <li><a href="view.html"><img src="images/10.jpg" class="img-responsive" alt="" /></a></li> <li><a href="view.html"><img src="images/11.jpg" class="img-responsive" alt="" /></a></li> <li><a href="view.html"><img src="images/12.jpg" class="img-responsive" alt="" /></a></li> </div> </div> <div class="clearfix"></div> </div></div><!-- 推介 --><div class="container"><div class="feature-top"> <div class="col-md-3 service-left"> <img src="images/4.png" class="img-responsive" alt=""> <h4>旅游推介</h4> <li><a href="#">九華 :枇杷豐收吸引眾采摘客</a></li> <li><a href="#">關(guān)隘古鎮(zhèn)-風(fēng)情楊林邀您踏春游</a></li> <li><a href="#">憑車票-建德八大景區(qū)免費(fèi)任游</a></li> <li><a href="#">女神節(jié)-帶你玩轉(zhuǎn)浙里人氣景區(qū)</a></li> </div> <div class="col-md-3 service-left"> <img src="images/3.png" class="img-responsive" alt=""> <h4>線路推薦</h4> <li><a href="#">休閑好去處常山四季游覽線路</a></li> <li><a href="#">[最新]“享生態(tài)清新”精品線</a></li> <li><a href="#">[柯城區(qū)] 農(nóng)家樂 一日游線路</a></li> <li><a href="#">[最新]“悟古城春秋”精品線</a></li> </div> <div class="col-md-3 service-left"> <img src="images/2.png" class="img-responsive" alt=""> <h4>鄉(xiāng)村游·自駕游</h4> <li><a href="#">清水魚生態(tài)示范園 金鳳凰農(nóng)莊</a></li> <li><a href="#">和睦彩陶文化特色村 合清山莊</a></li> <li><a href="#">塘湖休閑漁業(yè)山莊 興隆生態(tài)園</a></li> <li><a href="#">杰文花果休閑農(nóng)莊 汀塘圩漁場</a></li> </div> <div class="col-md-3 service-left"> <img src="images/1.png" class="img-responsive" alt=""> <h4>旅行社</h4> <li><a href="#">江山市悠游假日旅游有限公司</a></li> <li><a href="#">衢州市小葉子旅行社有限公司</a></li> <li><a href="#">開化花牽谷旅游開發(fā)有限公司</a></li> <li><a href="#">衢州市宇鴻旅游有限責(zé)任公司</a></li> </div> <div class="clearfix"> </div> </div></div><!-- 推介 --><div class="footer"> <div class="foot-bottom"> <p>Copyright &copy; 名城衢州 . All rights reserved . </p> </div></div><a href="#" id="toTop" style="display: block;"><span id="toTopHover" style="opacity: 0;"></span> <span id="toTopHover" style="opacity: 0;"> </span></a></body></html>

2.CSS樣式代碼

h4, h5, h6,h1, h2, h3 {margin-top: 0;}ul, ol {margin: 0;}p {margin: 0;}html,body{ font-family:OpenSans-Regular;}body a{ transition:0.5s all; -webkit-transition:0.5s all; -moz-transition:0.5s all; -o-transition:0.5s all; -ms-transition:0.5s all;}.header { margin:0 0 3em;}.logo { float: left; width: 30%; margin: 3.9em 0 0;}span.menu { display: none;}.top-nav{ float: left; width: 45%;}.top-nav ul{ padding:0; margin:0;}.top-nav ul li{ display: inline-block; width: 18%; float: left;}.top-nav ul li.active{ background:#a7cbb4;}.top-nav ul li a { color: #000; font-size: 1.3em; margin-right: .4em; float: left; padding: 3em 0em 1.5em 0em; text-align: center; width: 100%; font-family: 'Alegreya', serif;}.top-nav ul li a:hover{ text-decoration:none; color: #fff;}.top-nav ul li.active a { color: #fff;}.copyrights{ text-indent:-9999px; height:0; line-height:0; font-size:0; overflow:hidden;}/* Sweep To Bottom */.hvr-sweep-to-bottom { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); -o-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; -o-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; -ms-osx-font-smoothing: grayscale; -o-osx-font-smoothing: grayscale; position: relative; -webkit-transition-property: color; -o-transition-property: color; -moz-transition-property: color; -ms-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -ms-transition-duration: 0.3s; transition-duration: 0.3s;}.about-bottom li { width: 48%;}.instru-left { padding: 1em 3.5em;}}/*-- responsive-mediaquries --*/@media(max-width:320px){.contact h2 { font-size: 1.7em; margin: 0 0 0.5em;}.contact h3 { font-size: 1.4em; margin: 0.8em 0;}.contact-left { padding: 0; margin: 1em 0;}.contact-right { padding: 0;}.form_details input[type="text"], .form_details textarea { padding: 8px; width: 100%; font-size: 1em; margin: 0px 0px 10px;}.contact-left iframe { height: 151px;}.con-left { padding: 1em 0 0;}.form_details input[type="submit"] { width: 40%; margin-top: 0.5em; font-size: 0.9em;}.form_details textarea { height: 150px;}.footer h3 { font-size: 1.4em;}.footer p { font-size: 0.875em;}.soci { padding: 0;}.footer-left { padding: 0;}.lessons h2 { font-size: 1.7em;}.lessons h3 { font-size: 1.4em;}.lessons p { font-size: 0.875em;}.lessons-right { padding: 0;}.lessons-left { padding: 0;}.ab-lft { padding: 0;}.ab-lft { padding: 0;}.lessons-middle { padding: 2em 0 0;}.lessons-bottom li a { font-size: 0.875em; line-height: 1.8em;}.lessons-bottom ul { padding: 0; margin: 0.8em 0;}.about h2 { font-size:1.7em;}.about h3 { font-size: 1.4em;}.about h2 { font-size: 1.7em;}.about h3 { font-size: 1.4em;}.about p { font-size: 0.875em;}.about-left { padding: 0;}.about-right { margin: 1em 0 0; padding: 0;}.about-middle li a { font-size: 0.875em;}.ab-rgt { margin: 1em 0; padding: 0;}.ab-rgt { margin: 1em 0; padding: 0;}.container { width: 275px;}.view { width: 72px; height: 76px;}.view .mask, .view .content { padding: 1em 0; width: 72px; height: 76px; padding:0.5em 0 0; }.view1 { width: 144px; height: 76px;}.view1 .mask, .view1 .content { width: 136px; height: 76px; padding:0;}.instructors p { font-size: 0.875em; margin: 0.5em 0 0;}.have h3 { font-size: 1.4em; margin: 0 0 1em;}.instructors h6 { font-size: 1.4em; margin: 0 0 0.5em;}.have h4 { font-size: 1.2em; margin:0;}.have p { font-size: 0.875em;}.have-left { padding: 0;}.have li a { font-size: 0.875em;}.have ul { padding: 1em 0 0;}.feature-top p { font-size: 0.875em;}.feature-top h4{margin:1em 0 0;}.feature-top { padding: 1em 0;}.logo img { width: 53%;}.b-search { width: 49%; margin: 0.1em 0; display: none;}.top-nav { margin: 0px 0; float: right; width: 7%;}.top-nav ul { top:11%;}.header { margin: 0 0 0em; padding: 1.5em 0;}.top-nav ul li a { padding: 0.5em 0;}.view h2 { font-size: 10px; padding: 0px 0 0;}.view p { font-size: 8px; padding:3px 0px 0px;}.view1 h2 { font-size: 10px; padding: 0 0 0;}.view1 p { font-size: 8px; padding:3px 0px 0px;}.contact p { font-size: 0.875em;}.instru-left { padding: 1em 0.5em;}}

三、個(gè)人總結(jié)

一套合格的網(wǎng)頁應(yīng)該包含(具體可根據(jù)個(gè)人要求而定) 1. 頁面分為頁頭、菜單導(dǎo)航欄(最好可下拉)、中間內(nèi)容板塊、頁腳四大部分; 2. 所有頁面相互超鏈接,可到三級(jí)頁面,有5-10個(gè)頁面組成; 3. 頁面樣式風(fēng)格統(tǒng)一布局顯示正常,不錯(cuò)亂,使用Div+Css技術(shù); 4. 菜單美觀、醒目,二級(jí)菜單可正常彈出與跳轉(zhuǎn); 5. 要有JS特效,如定時(shí)切換和手動(dòng)切換圖片新聞; 6. 頁面中有多媒體元素,如gif、視頻、音樂,表單技術(shù)的使用; 7. 頁面清爽、美觀、大方,不雷同。
8. 網(wǎng)站前端程序不僅要能夠把用戶要求的內(nèi)容呈現(xiàn)出來,還要滿足布局良好、界面美觀、配色優(yōu)雅、表現(xiàn)形式多樣等要求。


四、更多干貨

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í)」!

3.以上內(nèi)容技術(shù)相關(guān)問題 歡迎一起交流學(xué)習(xí) 【主頁—— 獲取更多優(yōu)質(zhì)源碼】



關(guān)鍵詞:設(shè)計(jì),作業(yè),靜態(tài),作品,學(xué)生,主題,家鄉(xiāng)

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果,本站不支持IE9及以下版本的瀏覽器,建議您使用谷歌Chrome瀏覽器。 點(diǎn)擊下載Chrome瀏覽器
關(guān)閉