範例:Wild Life(桌機main)

【範例結果】


P1:Main區前置作業
P2:Section1美化
P3:Section2美化
P4:Section2—圖說美化應用
P5:Section1美化-Flex
P6:Section2美化-Flex


一、Main區前置作業

 

<div id="main">
<!-- banner-->
<div id="banner">
<div id="note">
<h2>動物奇觀之旅</h2>
<p>在自然保護區內,尋找大型貓科動物和欣賞著名大草原的壯麗景色。
<br>觀看動物遷徙和由空中鳥瞰,成群結隊,萬馬奔騰,氣勢如虹的場景,原以為只有在Discovery 頻道可出以觀看,想不到身入其境 , 反而如入叢林裡的小白兔,內心小鹿亂撞 ,動物狂奔的興奮心情難以言喻~~
<br>大自然的神奇與造物者的奇蹟,此時只能用心感受 ,用相照代替眼睛掃射並按下快門留下永恆的回憶 。</p>
<div class="more"><a href="#">more</a></div>
</div>
</div>
<!-- article-->
<article>
<!-- section1  ============================= -->
<section>
<div id="sec1">
<h1>景點概況</h1>
<p>肯尼亞的旅游資源非常豐富,眾多的國家公園是遊獵之旅的目的地;中部肯尼亞山是非洲第二高峰,也是位於赤道附近的雪山,是徒步登山愛好者的目的地;東部瀕臨印度洋,藍天碧海,溫柔的海浪,溫暖的海風......東南沿海地區是想要度假,熱愛潛水的人的目的地。</p>
<h1>旅遊特色</h1>
<p>1. 搭乘肯亞航空:飛向肯亞,航班最多、最便利。<br>
2. 搭四輪驅動車:全程專業司機兼導遊,提供最完善的個人化Safari遊獵服務。<br>
3. 東非大地塹:觀賞太空人阿姆斯壯在月球上唯一可看到的非洲景觀「東非大地塹」。<br>
4. 跨越赤道:在赤道上腳跨南北半球,感受難得的奇妙體驗。<br>
5. 大啖烤肉餐廳:在Discovery頻道特別推薦的非洲動物烤肉餐廳Carnivore 享用晚餐,
品嚐非洲原始風味的豪邁。</p>
</div>
<div id="sec2">
<h1>必遊景點TOP3</h1>
<h2>馬賽馬拉國家野生動物保護區</h2>
<p>馬賽馬拉國家公園就是每年上演動物大遷徙的地方,被認為是世界上最著名的野生動物保護區,這座動物的天堂由1672平方公里開闊的平原、林地和河岸森林組成。馬賽馬拉國家公園建於1961年,是世界最大的野生哺乳動物家園,擁有95種哺乳動物和450種鳥類。一望無垠的草地上散佈著成群的斑馬、長頸鹿、羚羊和轉角牛羚;洋槐樹林中充滿了鳥類和猴群;大象和非洲水牛在寬廣的姆西阿拉沼澤地裡打著滾;馬拉河中游曳著眾多的河馬和鱷魚。</p>
<p>這裡被稱為是獅子的王國,這些威嚴、強有力的獵食動物主宰這片草原。印度豹也非常多見,這裡還有鬣狗及小型的獵食動物如狐狼等。中午的草原熱浪滾滾,所有的獵食動物都被曬的昏昏欲睡,所以拜訪獵食動物最好選擇清晨或日落之後。</p>
<h2>納庫魯湖國家公園</h2>
<p>納庫魯湖國家公園位於肯尼亞裂谷省首府納庫魯市南部,佔地188平方公里,海拔1753-2073米,是為保護禽鳥專門建立的公園,也是肯尼亞的野生動物園之一。1960年,納庫魯湖連同附近草地、沼澤、樹林和山地被劃為鳥類保護區,1968年正式闢為國家公園,是非洲地區為保護鳥類最早建立的國家公園之一。</p>
<h2>安博塞利國家公園</h2>
<p>安博塞利是大象的天堂,這裡有巨大的象群,因為這裡樹木較少,易於遊客觀察到它們。非洲像是一種嗅覺和聽覺都很靈敏的動物,平均年齡能達到70歲左右。也許是因為需要22個月的漫長孕育週期,生產小象來之不易,象群都非常注意保護小象,包括在遊客面前,盡量讓小象們躲在父母的身子後面。</p>
<p>資料來源:<a href="http://www.mafengwo.cn/baike/10029_1169.html#wiki_part_1">螞蜂窩</a></p>
</div>
<div id="sec3">
<h1>旅遊行程</h1>
<ul>
<li>第1天:台北 / 轉機點 / 奈洛比</li>
<li>第2天:奈洛比 ─ 肯亞山國家公園~*動物狩獵小屋*</li>
<li>第3天:肯亞山國家公園--山布魯國家保護區</li>
<li>第4天:山布魯國家保護區</li>
<li>第5天:山布魯國家公園─甜水動物保護區</li>
<li>第6天:甜水動物保護區 ─ 湯姆森瀑布 ─ 非洲大地塹 ─ 奈瓦夏湖</li>
<li>第7天:奈瓦夏湖 ─ 馬賽馬拉國家公園</li>
<li>第8天:馬賽馬拉國家公園</li>
<li>第9天:馬賽馬拉國家公園 ─ 奈洛比Carnivore餐廳燒烤風味</li>
<li>第10天:轉機點 / 台北</li>
</ul>
</div>
</section>
<!-- section2  ============================= -->
<section>
<figure>
<a href="javascript:;"> <img src="image/photo01.jpg" alt="">
<figcaption>虎 Tiger</figcaption>
<p>成年虎過著獨居生活,只是在一些特殊的情況,比如說豐富的食物下才會短暫地聚集起來。每個虎占領一塊領地後,就會將本地所有大型食肉動物如狼、豹等趕走,所謂「占山為王」。</p>
<div class="more_s">more</div>
</a>
</figure>
<figure>
<a href="javascript:;"> <img src="image/photo02.jpg" alt="">
<figcaption>獅 Lion</figcaption>
<p>一般在一個獅群中只有一隻成年的雄獅,除非在討戰獅群上一任首領雄獅是兩隻以上一起時才會有兩隻以上的成年雄獅。</p>
<div class="more_s">more</div>
</a>
</figure>
<figure>
<a href="javascript:;"> <div class="imgblock"><img src="image/photo03.jpg" alt=""></div>
<figcaption>豹 Leopard</figcaption>
<p>豹是獨行性動物,可以說是敏捷的獵手,身材矯健,動作靈活,奔跑速度快。奔跑時速可達58公里/小時。既會游泳,又會爬樹。性情機敏,嗅覺聽覺視覺都很好,智力超常,隱蔽性強,這些是老虎獅子所及不上的,牠亦是少數可適應不同環境的貓科動物。長長的尾巴在奔跑時可以幫助豹保持平衡。</p>
<div class="more_s">more</div>
</a>
</figure>
<figure>
<a href="javascript:;"> <div class="imgblock"><img src="image/photo04.jpg" alt=""></div>
<figcaption>雄獅 Lion</figcaption>
<p>自古以來被人稱為萬獸之王。獅是一種生存在非洲和亞洲的大型貓科動物,豹屬之中最著名的一種,現存中是繼老虎之後第二大的貓科,其雄性的鬃毛是其特徵之一。</p>
<div class="more_s">more</div>
</a>
</figure>
<figure>
<a href="javascript:;"> <div class="imgchange"><img src="image/photo05.jpg" alt=""></div>
<figcaption>斑馬 Zebra</figcaption>
<p>Zebras are several species of African equids (horse family) united by their distinctive black and white striped coats. Their stripes come in different patterns, unique to each individual.</p>
<div class="more_s">more</div>
</a>
</figure>
<figure>
<a href="javascript:;"> <div class="imgchange"><img src="image/photo06.jpg" alt=""></div>
<figcaption>非洲大象 African Elephant</figcaption>
<p>One species of African elephant, the bush elephant, is the largest living terrestrial animal, while the forest elephant is the third-largest.</p>
<div class="more_s">more</div>
</a>
</figure>
<figure>
<a href="javascript:;"> <div class="imgchange"><img src="image/photo07.jpg" alt=""></div>
<figcaption>長頸鹿 Giraffe</figcaption>
<p>The giraffe (Giraffa) is a genus of African even-toed ungulate mammals, the tallest living terrestrial animals and the largest ruminants. The genus currently consists of one species, Giraffa camelopardalis, the type species.</p>
<div class="more_s">more</div>
</a>
</figure>
<figure>
<a href="javascript:;"> <div class="imgchange"><img src="image/photo08.jpg" alt=""></div>
<figcaption>狐獴 Meerkat</figcaption>
<p>Meerkats become sexually mature at about two years of age and can have one to four pups in a litter, with three pups being the most common litter size. Meerkats are iteroparous and can reproduce any time of the year.</p>
<div class="more_s">more</div>
</a>
</figure>
</section>
</article>
</div>
<footer>Copyright © 2017 Zoego.tech<br> 
Practice for education only.Please notify the webmaster for any picture violations.</footer>

【#banner】區

#banner {
box-shadow: 0 1px 2px #000;
background: url(image/banner05.jpg) no-repeat center center;
overflow: hidden;            /*解決float問題*/
background-size: cover;      /*解決照片不合問題*/
}
#banner #note {
padding: 10px; color: #fff;
background: rgba(0, 0, 0, 0.4);
text-shadow: 1px 1px 2px #000;
box-shadow: -1px 0 2px #000;
width: 300px;     
float: right;     
}