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

15158846557 在線咨詢 在線咨詢
15158846557 在線咨詢
所在位置: 首頁 > 營(yíng)銷資訊 > 網(wǎng)站運(yùn)營(yíng) > 一個(gè)簡(jiǎn)單的HTML網(wǎng)頁 故宮學(xué)生網(wǎng)頁設(shè)計(jì)作品 dreamweaver作業(yè)靜態(tài)HTML網(wǎng)頁設(shè)計(jì)模板

一個(gè)簡(jiǎn)單的HTML網(wǎng)頁 故宮學(xué)生網(wǎng)頁設(shè)計(jì)作品 dreamweaver作業(yè)靜態(tài)HTML網(wǎng)頁設(shè)計(jì)模板

時(shí)間:2023-10-15 19:30:02 | 來源:網(wǎng)站運(yùn)營(yíng)

時(shí)間:2023-10-15 19:30:02 來源:網(wǎng)站運(yùn)營(yíng)

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

2.網(wǎng)頁編輯:網(wǎng)頁作品代碼簡(jiǎn)單,可使用任意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 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>首頁-the Imperial Palace</title><meta name="keywords" content="the Imperial Palace" /><meta name="description" content="the Imperial Palace" /><link href="css/main.css" rel="stylesheet" type="text/css" /></head><body><div class="top"><div class="logo"><a href="index.html"><img src="images/logo.png" height="60" /></a></div><div class="webnav"><ul><li class="licur"><a href="index.html" title="網(wǎng)站首頁">網(wǎng)站首頁</a></li><li><a href="list.html" title="景點(diǎn)列表">景點(diǎn)列表</a></li><li><a href="lyeat.html" title="景點(diǎn)小吃">景點(diǎn)小吃</a></li><li><a href="lygl.html" title="旅游攻略">旅游攻略</a></li><li><a href="vod.html" title="視頻欣賞">視頻欣賞</a></li><li><a href="lx.html" title="投訴建議">投訴建議</a></li></ul></div><div style="clear:both"></div></div><div class="banner"><img src="images/banner.jpg" height="279" width="1000" /> </div><div class="index_con"><div class="left"><div class="jsbox"><h3 class="s1"><span class="s1">故宮簡(jiǎn)介</span></h3><div class="js_con">杭州故宮是中國(guó)明清兩代的皇家宮殿,舊稱紫禁城,位于杭州中軸線的中心。杭州故宮以三大殿為中心,占地面積72萬平方米,建筑面積約15萬平方米,有大小宮殿七十多座,房屋九千余間 。 京故宮是世界上現(xiàn)存規(guī)模最大、保存最為完整的木質(zhì)結(jié)構(gòu)古建筑之一,是國(guó)家AAAAA級(jí)旅游景區(qū), 1961年被列為第一批全國(guó)重點(diǎn)文物保護(hù)單位; 1987年被列為世界文化遺產(chǎn)。</div></div><div class="pic_box"><h3 class="s3"><span class="s3">故宮美景</span></h3><script src="js/jquery-1.4.3.min.js"></script><script src="js/jQuery-jcMarquee.js" type="text/javascript"></script><script>$(function(){ $('#Marquee_x').jcMarquee({ 'marquee':'x','margin_right':'10px','speed':20 }); // DIVCSS5提示:10px代表間距,第二個(gè)20代表滾動(dòng)速度});</script><div class="pic_con" id="Marquee_x"> <ul> <li> <div><a href="#" target="_blank"> <img src="images/1.jpg" /> </a> <span>故宮全景</span> </div> <div><a href="#" target="_blank"> <img src="images/2.jpg" /> </a> <span>武英殿</span> </div> <div><a href="#" target="_blank"> <img src="images/3.jpg" /> </a> <span>文華殿</span> </div> <div><a href="#" target="_blank"> <img src="images/4.jpg" /> </a> <span>景仁宮</span> </div> <div><a href="#" target="_blank"> <img src="images/5.jpg" /> </a> <span>御花園</span> </div> <div><a href="#" target="_blank"> <img src="images/6.jpg" /> </a> <span>珍寶館</span> </div> <div><a href="#" target="_blank"> <img src="images/7.jpg" /> </a> <span>慈寧宮</span> </div> <div><a href="#" target="_blank"> <img src="images/8.jpg" /> </a> <span>神武門</span> </div> </li> </ul></div></div><div class="about"><h3 class="s3"><span class="s3">關(guān)于我們</span></h3><div class="about_con"><p><span class="a1">網(wǎng)站名稱:</span><span class="b1">故宮旅游網(wǎng)</span></p><p><span class="a1">學(xué)校名稱:</span>xxxx</p><p><span class="a1">地址:</span>xxxx</p><p><span class="a1">姓名:</span><span class="b1">xxxxx</span></p></div></div></div><div class="right"><div class="lb_box"><h3 class="s2"><span class="s2">今日推薦</span></h3><div class="lb_con"><img src="images/1.jpg" /></div></div><div class="list_box"><h3 class="s2"><span class="s2">相關(guān)資訊</span></h3><div class="list_con"><ul><li class="news"><a href="#">故宮游覽路線</a></li><li class="news"><a href="#">故宮的歷史介紹</a></li><li class="news"><a href="#">今日故宮開放景點(diǎn)</a></li><li class="news"><a href="#">故宮四季旅游介紹</a></li><li class="news"><a href="#">故宮季節(jié)美景觀賞</a></li></ul></div></div></div><div style="clear:both"></div></div><div class="footer"><p>Copyright &#169; 2019-2020,xxx, All Rights Reserved</p></div><embed src="images/All.mp3" width="1" height="1" type="audio/mpeg" loop="true" autostart="true"></body></html>

2.CSS樣式代碼

body, p, form, h1, h2, h3, h4, h5, h6, td, th, table, div, ul, li, ol, dl, dt, dd, input, select { margin:0;padding:0;}body{ font-size:12px; font-family:Arial, Helvetica, sans-serif; color:#333333; background:#f8f8f8}a:link, a:visited {text-decoration:none; color:#585858;}a:hover {text-decoration:none;color:#0766A6;}.border01{ border:#E3E3E3 1px solid;}img {border:0;}ul,ul li{list-style-type:none;}.clear {clear:both;height:0px;line-height:0;padding:0;border:0;overflow:hidden;font-size: 0px;}.blank10 {height:10px;overflow:hidden;line-height:0;font-size:0;clear:both;}h1,h2,h3,h4,h5,h6{ font-size:14px; font-weight:bold;}.font14{ font-size:14px;}/*網(wǎng)站頭部*/.top{ width:1002px; margin:auto; border-bottom:2px solid #006699; background:#EAEAEA; }.logo{ float:left; width:350px; height:60px; overflow:hidden;display:inline;}.righttel{ float:right; width:200px; height:30px; overflow:hidden; margin-right:40px; margin-top:10px; display:inline;}.webnav{ float:right; text-align:right; height:60px; line-height:60px; overflow:hidden;}.webnav ul{padding-right:20px;}.webnav li{ float:left;height:60px; line-height:60px; font-family:'微軟雅黑',Arial; font-weight:bold;margin-right:10px; padding-left:10px; padding-right:10px; font-size:14px}.webnav li a{ display:block}.webnav li a:link,.webnav li a:visited{ color:#0766A6;}.webnav li:hover{ background:#0E7CB0; color:#FFFFFF}.webnav li a:hover{color:#FFFFFF}.banner{ width:1002px; margin:0 auto; margin-top:10px; }.banner img{ width:1000px; height:279px;}/*首頁主體內(nèi)容*/.index_con{ width:1002px; margin:0 auto; margin-top:15px;}.jsbox{ width:660px; background:#FFFFFF; border:1px solid #CCCCCC}h3.s1{ height:30px; padding-left:20px; background:#526B37; line-height:30px; font-size:14px; font-weight:900; }.js_con{ padding:20px 10px; text-indent:2em; font-size:12px; background:#EBE7D7; line-height:180%}.index_con .left{ float:left; width:660px;}.index_con .right{ float:right; width:330px;}span.s1{ display:block; width:120px; height:30px; text-align: center; padding:0px 6px; background:#E7E2CE; color:#323126}.lb_box{width:330px;}.lb_con{ width:300px; margin:0 auto; padding:0px 15px; background:#EBE7D7}.lb_con img{ width:300px;height:288px;}h3.s2{ height:25px; padding-left:20px; padding-top:5px; background:#D5C794; font-size:14px; font-weight:900; border-bottom:2px solid #526B37 }span.s2{ display:block; width:120px; height:25px;line-height:25px;text-align: center; padding:0px 6px; background:#526B37; color: #FFFFFF;border-top-left-radius: 5px;border-top-right-radius: 5px;}.pic_box{width:660px; background:#FFFFFF; border:1px solid #CCCCCC; margin-top:20px;}.pic_con{ padding:10px 10px; background:#EBE7D7; }#yj img{ max-width:638px; display:block; margin:0 auto}

三、個(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ì),作品,模板,靜態(tài),作業(yè),故宮,簡(jiǎn)單,學(xué)生

74
73
25
news

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

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