云南民族文化旅游网页设计制作 简单静态HTML网页作品 我的家乡网页作业成品 学生旅游网站模板
生活随笔
收集整理的這篇文章主要介紹了
云南民族文化旅游网页设计制作 简单静态HTML网页作品 我的家乡网页作业成品 学生旅游网站模板
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
家鄉旅游景點網頁作業制作 網頁代碼運用了DIV盒子的使用方法，如盒子的嵌套、浮動、margin、border、background等屬性的使用，外部大盒子設定居中，內部左中右布局，下方橫向浮動排列，大學學習的前端知識點和布局方式都有運用，CSS的代碼量也很足、很細致，使用hover來完成過渡效果、鼠標滑過效果等，使用表格、表單補充模塊，為方便新手學習頁面中沒有使用js有需要的可以自行添加。
?精彩專欄推薦👇🏻👇🏻👇🏻
? 【作者主頁——🔥獲取更多優質源碼】
? 【web前端期末大作業——🔥🔥畢設項目精品實戰案例(1000套)】
文章目錄🌰
- 一、網頁介紹📖
- 一、網頁效果🌌
- 二、代碼展示😈
- 1.HTML結構代碼 🧱
- 2.CSS樣式代碼 🏠
- 三、個人總結😊
- 四、更多干貨🚀
一、網頁介紹📖
1 網頁簡介：此作品為學生個人主頁網頁設計題材，HTML+CSS 布局制作,web前端期末大作業,大學生網頁設計作業源碼，這是一個不錯的網頁制作，畫面精明，代碼為簡單學生水平, 非常適合初學者學習使用。
2.網頁編輯：網頁作品代碼簡單，可使用任意HTML編輯軟件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html編輯軟件進行運行及修改編輯等操作）。
3.知識應用：技術方面主要應用了網頁知識中的: Div+CSS、鼠標滑過特效、Table、導航欄效果、Banner、表單、二級三級頁面等，視頻、 音頻元素 、Flash，同時設計了Logo（源文件）所需的知識點。
一、網頁效果🌌
二、代碼展示😈
1.HTML結構代碼 🧱
代碼如下（示例）：以下僅展示部分代碼供參考~
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>云南民族文化網</title> <link rel="stylesheet" type="text/css" href="css/index.css"> </head><body><!-- Copyright � 2005. Spidersoft Ltd --> <style> A.applink:hover {border: 2px dotted #DCE6F4;padding:2px;background-color:#ffff00;color:green;text-decoration:none} A.applink {border: 2px dotted #DCE6F4;padding:2px;color:#2F5BFF;background:transparent;text-decoration:none} A.info {color:#2F5BFF;background:transparent;text-decoration:none} A.info:hover {color:green;background:transparent;text-decoration:underline} </style> <!-- /Copyright � 2005. Spidersoft Ltd --> <div class="page"> <div class="banner"><img src="images/banner.jpg" /></div><div class="daohang"><p><a href="index.html">首頁</a></p> <p><a href="jieshao.html">云南介紹</a></p> <p><a href="wenhua.html">云南民族文化</a></p> <p><a href="fengqing.html">民族風情</a></p> <p><a href="xiaogushi.html">民族小故事</a></p> <p><a href="tupian.html">民族圖片</a></p> <p><a href="liuyan.html">客戶留言</a></p><p><a href="lianxi.html">地理位置</a></p></div><div class="content"><div class="zuo"> <img src="images/zuo1.jpg" /> <div class="fangshi"><h1>云南的民族</h1><p> 云南是我國少數民族最多的省份，根據1990年全國第四次人口普查分布的數據，全國56個民族中，云南就有52個，其中人口在5000人以上的民族有26個，除漢族外，少數民族有25個，各民族分布呈大雜居、小聚居的特點。其中云南的世居民族有15個：白族、哈尼族、傣族、僳僳族、拉祜族、佤族、納西族、景頗族、布朗族、普米族、阿昌族、怒族、基諾族、德昂族、獨龍族。全省總人口約4192萬人(1999年)，其中少數民族人口1300多萬人，占全省總人口的1/3。在25個少數民族中人口最多的是彝族，有400多萬;人口最少的是獨龍族，僅5500人。<br /></p> </div></div><div class="you"> <div class="jieshao"> <h1>云南介紹</h1> <p><img src="images/jieshao.jpg" width="218" height="147" style="float:left; margin-right:19px;" /> 云南是一個資源異常豐富的省份，素有“動物王國”、“植物王國”、“有色金屬王國”、“民族文化聚寶盆”等諸多美譽。如果我們從經濟社會發展的現代化趨勢來看，文化資源則是云南最重要、最可寶貴的資源。可以說，云南是一個文化資源富礦，而且這些豐富而獨特的資源正適應和吻合了現代市場經濟和知識經濟的特征、要求、方向及趨勢,蘊藏著極高的經濟價值，是我省塑造巨大的文化力和全新的形象力的無窮寶藏和財富。</p> <p>在文化經濟日益一體化的今天，我們必須用經濟的眼光來審視和梳理我們的文化資源，要站在產業發展的角度來認識歷史和自然賦予我們的獨特優勢。云南文化資源的富足和厚重，我認為至少體現在以下3個方面：<br /> </p> </div><div class="jieshao"> <h1>云南民族文化</h1> <p> 云南，雪域高原與熱帶雨林共存，高山深谷和闊壩平湖相間，集結了全國二分之一以上的動植物種類，見證著26個民族生存發展的歷史。分屬于古代氐羌族系、百越族系、百濮族系和苗瑤族系后裔的25個少數民族與地處西南邊陲的漢族人民世代交好，呈現大雜居、小聚居的分布格局，使得這片紅土地上驕傲持久地綻放著絢麗多姿的民族文化之花，而云南所特有的15個民族更為這里“民族文化王國”地位的確立奠定了不容置疑的基礎。 這是一塊被漫長的地質運動反復雕琢過的大地。南北990公里跨徑的域內，海拔急速從西北隅梅里雪山卡瓦博格峰巔的6740米降至南部河口縣境的76米，地勢也隨之自西北向東南呈階梯狀逐層降低。方圓39．4萬平方公里的土地上，發育于滇西北的橫斷、烏蒙等巨大山系引領著逶迤境內的大小山巒，雄踞去省域94%的國土面積；蜿蜒奔流于山原的伊洛瓦底江、怒江、瀾滄江、金沙江、元江、南盤江六大水系，或以劈山奪路之勢咆哮疾行，塑成深邃險峻的高山峽谷，或作麗人徐趨之狀緩緩流淌，點化旖旎動人的河濱風光。<br /> </p> </div><div class="jieshaoB"><h1>云南民族文化展示</h1><p><marquee><img src="images/chanpin1.jpg" /><img src="images/chanpin2.jpg" /><img src="images/chanpin3.jpg" /><img src="images/chanpin4.jpg" /><img src="images/chanpin5.jpg" /><img src="images/chanpin6.jpg" /><img src="images/chanpin7.jpg" /><img src="images/chanpin8.jpg" /></marquee></p></div></div><div class="clearit"></div><div class="foot"><p>版權所有 禁止盜版 <br />云南歡迎您</p></div></div></div> </body> </html>2.CSS樣式代碼 🏠
@charset "utf-8"; /* CSS Document */ body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{margin:0;padding:0;border:0;} *{margin:0;padding:0;border:0;} body { font-family: "宋體";font-size: 12px;color:#000000;line-height: 20px;text-align:left;background-color:#EE7600 ;} td,th {font-family: "宋體";font-size: 12px;color: #000000;} a {color: #000000;} A:link {TEXT-DECORATION: none;} A:visited {TEXT-DECORATION: none;} A:hover {TEXT-DECORATION: underline;} ul,li{list-style-type:none;}.clearit{clear:both;} .page{width:1003px; margin:0 auto;}.daohang{width:1003px; height:42px; margin:0 auto; overflow:hidden; background:url(../images/daohang.jpg) repeat-x;} .daohang p{width:120px; line-height:42px; display:block; float:left; text-align:center; font-size:14px; font-weight:bold; } .daohang p a{color:#345479;}.content{width:1003px; margin:0 auto; background:#c2cdda; padding:20px 0 0;}.zuo{width:220px; float:left; margin-left:10px; display:inline; } .fangshi{width:220px; border:1px solid #ffffff; margin-top:10px;background:#345479; } .fangshi h1{font-size:14px; padding:0 10px; font-weight:bold; line-height:26px; line-height:26px; border-bottom:1px solid #ffffff; color:#ffffff;} .fangshi p{text-align:left; padding:0 10px; line-height:24px;color:#ffffff;}.you{width:750px; float:left; margin-left:10px; display:inline;} .jieshao{width:748px;border:1px solid #ffffff; background:#345479; margin-bottom:10px; } .jieshao h1{font-size:14px; padding:0 10px; font-weight:bold; line-height:28px; line-height:28px; background:#345479;border-bottom:1px solid #ffffff; color:#ffffff;} .jieshao p{text-align:left; padding:10px; line-height:24px;color:#ffffff;}.jieshaoB{width:748px;border:1px solid #ffffff; background:#345479; margin-bottom:10px; } .jieshaoB h1{font-size:14px; padding:0 10px; font-weight:bold; line-height:28px; line-height:28px; background:#345479;border-bottom:1px solid #ffffff; color:#ffffff;} .jieshaoB p{padding:10px 0;} .jieshaoB img{width:200px; margin-right:10px; padding:1px; border:1px solid #FFFF00; background:#FFFFFF;} .foot{width:1003px; margin:0 auto; padding-top:50px; background:url(../images/foot.jpg) repeat-x top; padding-bottom:50px;} .foot p{text-align:center; line-height:30px; color:#345479;}.you h2{font-size:14px; font-weight:bold; text-align:center; line-height:30px; border-bottom:1px solid #FFFF00; color:#000000;} .neirong{padding:20px; line-height:24px; color:#000000;}.zhanshi{padding-bottom:20px; overflow:hidden;} .zhanshi img{width:160px; display:block; float:left; margin-left:10px; display:inline;}.messageB{width:600px; padding:10px 0; overflow:hidden; text-align:left; line-height:24px;} .messageB ul li{line-height:24px; margin-top:16px; list-style:none; padding:0;border:0;} .messageB ul li span{vertical-align:middle; padding-right:12px;} .messageB ul li .message_in{width:300px; height:22px; border:1px solid #999999;vertical-align:middle;line-height:22px; padding:0;} .messageB ul li .message_te{width:500px; height:90px; border:1px solid #999999;vertical-align:middle;line-height:18px; padding:0;} .messageB ul li .message_btn{width:64px; height:20px; padding:0; line-height:20px; background:url(../images/btn.gif) no-repeat; color:#FFFFFF; font-weight:bold; cursor:hand;}三、個人總結😊
一套合格的網頁應該包含(具體可根據個人要求而定)
四、更多干貨🚀
1.如果我的博客對你有幫助、如果你喜歡我的博客內容，請 “👍點贊” “??評論” “💙收藏” 一鍵三連哦！
2.??【👇🏻👇🏻👇🏻關注我| 獲取更多源碼 | 優質文章】 帶您學習各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學生畢業HTML模板 、期末大作業模板 、等! 「在這里有好多 前端 開發者，一起探討 前端 Node 知識，互相學習」！
3.以上內容技術相關問題😈歡迎一起交流學習👇🏻👇🏻👇🏻🔥
總結
以上是生活随笔為你收集整理的云南民族文化旅游网页设计制作 简单静态HTML网页作品 我的家乡网页作业成品 学生旅游网站模板的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 关于PROE绘图个人记录
- 下一篇： React 之 jest 前端自动化测试