當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
html期末作业代码网页设计 我的家乡网站设计——我的家乡-四川成都(4页) HTML+CSS+JavaScript
生活随笔
收集整理的這篇文章主要介紹了
html期末作业代码网页设计 我的家乡网站设计——我的家乡-四川成都(4页) HTML+CSS+JavaScript
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
HTML5期末大作業：我的家鄉網站設計——我的家鄉-四川成都(4頁) HTML+CSS+JavaScript
文章目錄
- HTML5期末大作業：我的家鄉網站設計——我的家鄉-四川成都(4頁) HTML+CSS+JavaScript
- 一、作品展示
- 二、文件目錄
- 三、代碼實現
- 四、獲取更多源碼
一、作品展示
二、文件目錄
三、代碼實現
<!DOCTYPE html> <html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3個meta標簽*必須*放在最前面，任何其他內容都*必須*跟隨其后！ --><title>李鷥-我的家鄉首頁</title><!-- Bootstrap --><link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet"><link rel="stylesheet" href="CSS/style.css"><link rel="stylesheet" href="css/animate.min.css"><!-- HTML5 shim 和 Respond.js 是為了讓 IE8 支持 HTML5 元素和媒體查詢（media queries）功能 --><!-- 警告：通過 file:// 協議（就是直接將 html 頁面拖拽到瀏覽器中）訪問頁面時 Respond.js 不起作用 --><!--[if lt IE 9]><script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script><script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script><![endif]--></head><body><div class="wrap"><!-- header部分 --><div class="header"><div class="content"><div class="header-left"><h3>我的家鄉</h3></div><div class="header-mid"><ul id="nav" class="animated fadeInLeft"><li class="active"><a href="file:///E:/桌面a/我的家鄉/index.html"><span>首頁</span></a></li><li><a href="file:///E:/桌面a/我的家鄉/food.html" title="html"><span>美食</span></a></li><li><a href="file:///E:/桌面a/我的家鄉/scenery.html" title="html"><span>景點</span></a></li><li><a href="file:///E:/桌面a/我的家鄉/custom.html" title="html"><span>民俗</span></a></li></ul></div><div class="header-right"><a href="https://baike.baidu.com/item/成都/128473?fr=aladdin"><button>Welcome</button></a></div></div></div><!-- introduction部分 --><div class="introduction"><div class="content"><div class="introduction-left"><h3>四川成都</h3><h4>一座來了就不想走的城市</h4></div><div class="introduction-mid"><h3>名稱由來</h3><p>“成都”來歷，據《太平寰宇記》記載，是借用西周建都的歷史經過，取周王遷岐，一年而所居成聚，二年成邑，三年成都而得名蜀都。蜀語成都二字的讀音就是蜀都。成者畢也、終也，成都的含義就是蜀國終了的都邑，或者說最后的都邑。</p><img src="img/zi.jpg" alt="成都"><p>最早“成都”二字</p></div><div class="introduction-right"><h3>別名</h3><h5>蓉城、錦城、芙蓉城、錦官城、天府之國</h5></div></div></div><!-- plant部分 --><div class="plant"><div class="content"><div class="container"><div class="page-header"><h1>市花與市樹</h1></div></div><div class="container"><div class="row"><div class="col-md-3 animated slideInLeft"><div class="thumbnail"><img src="img/hua.jpg" alt=""><div class="caption"><h2>市花-由來</h2><p>五代后蜀皇帝孟昶在成都城頭種滿了芙蓉花，成都自此也就有了“芙蓉城”的美稱。而在1983年5月26日，成都市第九屆人民代表大會常務委員會決定，正式命名芙蓉花為成都市市花。</p></div></div></div><div class="col-md-3 animated slideInLeft"><div class="thumbnail"><img src="img/hua2.jpg" alt=""><div class="caption"><h2>市花-典故</h2><p>五代后蜀皇帝孟昶，有妃子名“花蕊夫人”，她不但嫵媚嬌艷，還特愛花。有一年她去逛花市，在百花中她看到一叢叢一樹樹的芙蓉花如天上彩云滾滾而來，尤其喜歡。孟昶為討愛妃歡心，還頒發詔令：在成都城頭盡種芙蓉。廣政十二年十月，孟昶的綠化城市工程大功告成，攜花蕊夫人一同登上城樓，相依相隈觀賞紅艷數十里，燦若朝霞的成都木芙蓉花，成都自此也就有了“芙蓉城”的美稱。</p></div></div></div><div class="col-md-3 animated slideInLeft"><div class="thumbnail"><img src="img/shu2.jpg" alt=""><div class="caption"><h2>市樹-介紹</h2><p>成都主城區最古老的銀杏位于百花潭公園內，樹齡為1700年。長于唐代，明末遭了火焚，清朝又被雷擊，命運多舛，如今卻還是枝繁葉茂。這棵編號為0371號的古銀杏樹，是1983年從阿壩州汶川縣漩口鎮的觀音寺附近挖掘移植入園的。1983年5月26日，成都市第九屆人民代表大會常務委員會決定，正式命名芙蓉花為成都市市花、銀杏樹為成都市市樹。</p></div></div></div><div class="col-md-3 animated slideInLeft"><div class="thumbnail"><img src="img/shu.png" alt=""><div class="caption"><h2>市樹-介紹</h2><p>成都最古老的銀杏位于青城山天師洞，樹齡達到2500年。天師洞的張信和師父介紹，據傳這棵古銀杏是2000年前張天師傳道路過時親手種下的。這棵古銀杏有20多米高，要8個大人手拉手才能圈住樹干。這棵“神樹”，早在2006年成都市古樹名木普查時，就被評為“成都市十大古樹名木”之首,2011年又被評定為“成都市一級古樹”。確定每年農歷九月初九為成都市的“市花市樹日”。四川省林學會專家認為，如果銀杏“升級”為國樹，將是成都的又一張名片。</p></div></div></div></div></div></div></div><!-- place部分 --><div class="place"><div class="content"><div class="place-left"><h2>地理環境>></h2><p>成都市地處四川盆地西部，青藏高原東緣，東北與德陽市、東南與資陽市毗鄰，南面與眉山市相連，西南與雅安市、西北與阿壩藏族羌族自治州接壤；地理位置介于東經102°54′~104°53′、北緯30°05′~31°26′之間。2016年，全市土地面積為14335平方千米，市區面積為4241.81平方千米，其中建成區面積931.58平方公里。</p></div><div class="place-right"><h3>行政區劃>></h3><img src="img/qu.jpg" alt=""><p>成都市轄20個縣級行政區劃單位（市轄區12，縣級市5，縣3），261個鄉級行政區劃單位（街道161，鎮100）。面積14335平方千米，人口1633萬人。</p></div></div></div><br><!-- poetry部分 --><div class="poetry"><div class="content"><div class="container"><div class="page-header"><h1>邂逅成都</h1></div></div><div class="container"><div class="row"><div class="col-md-4"><div class="caption"><h3>唐張籍《成都曲》</h3><p>錦江近百煙水綠，新雨山頭荔枝熟。</p><p>萬里橋邊多酒家，游人愛向誰家宿？</p></div></div><div class="col-md-4"><div class="caption"><h3>杜甫《春夜喜雨》</h3><p>好雨知時節，當春乃發生。</p><p>隨風潛入夜，潤物細無聲。</p><p>野徑云俱黑，江船火獨明。</p><p>曉看紅濕處，花重錦官城。</p></div></div><div class="col-md-4"><div class="caption"><h3>岑參《萬里橋》</h3><p>成都與維揚，相去萬里地。</p><p>滄江東流疾，帆去如鳥翅。</p><p>楚客過此橋，東看盡垂淚。</p></div></div></div></div></div></div></div><!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴 jQuery，所以必須放在前邊) --><script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script><!-- 加載 Bootstrap 的所有 JavaScript 插件。你也可以根據需要只加載單個插件。 --><script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script></body> </html四、獲取更多源碼
~ 關注我，點贊博文~ 每天帶你漲知識!
相關問題可以相互學習，可關注↓公Z號 獲取更多源碼
總結
以上是生活随笔為你收集整理的html期末作业代码网页设计 我的家乡网站设计——我的家乡-四川成都(4页) HTML+CSS+JavaScript的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 超标量处理器
- 下一篇： 【JS】顶部悬浮及缓慢回到顶部