(2)Merry Christmas(桌機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="noteRight"></div>
</div>
</div>
<!-- article-->
<article>
<!-- section1  ============================= -->
<section>
<div id="sec1">
<h2>《平安夜》</h2>
<p>
平安夜,聖善夜,<br>
萬暗中,光華射。<br>
照著聖母也照著聖嬰,<br>
多少慈祥也多少天真,<br>
靜享天賜安眠,<br>
<br>
平安夜,聖善夜!<br>
牧羊人,在曠野,<br>
忽然看見了天上光華,<br>
聽見天軍唱哈利路亞,<br>
救主今夜降生,救主今夜降生!<br>
<br>
平安夜,聖善夜!<br>
神子愛,光皎潔,<br>
救贖宏恩的黎明來到,<br>
聖容發出來榮光普照,<br>
耶穌我主降生,耶穌我主降生!<br>
</p>
</div>
<div id="sec2">
<h2>聖誕老人(Santa Claus)</h2>
<p>雖然聖誕節是源於救主耶穌基督的歷史性降生,但是現代社會裡常常被另一個虛構的人物,聖誕老人,搶盡丰采。</p>
<p>聖誕老人帶給小孩子們禮物的概念衍生自西元第四世紀時一位生活在小亞細亞的好心主教,常常在暗地裡送禮物給需要的人,聖尼古拉(Saint Nicholas)。</p>
<p>在北美洲,荷蘭和英國的殖民地把這一傳統融入聖誕節日的慶祝裡。在英籍美國人的傳統中,聖誕老人總是快活的在聖誕前夜乘著馴鹿拉的雪橇到來,從煙囪爬進屋內,在孩子床邊的長襪中留下給他們的禮物。</p>
<p>他在一年中的其他時間都是忙於製作禮物和監督孩子們的行為。現代聖誕老人的紅衣白鬍鬚的形象是源自法國版的聖誕老人,Père Noel。在1930年代因為可口可樂公司的廣告推銷而傳遍了世界。</p>
<p>傳統上認為聖誕老人來自北極,如芬蘭的拉布蘭省,然而在第40屆世界聖誕老人大會上,丹麥的屬地格陵蘭島被重新議定為聖誕老人的居所所在,原因是該地實際擁有眾多的馴鹿。</p>
</div>
<div id="sec3">
<h2>Silent Night</h2>
<p>Silent Night<br>
Silent night Holy night<br>
All is calm all is bright<br>
'Round yon virgin Mother and Child<br>
Holy infant so tender and mild<br>
Sleep in heavenly peace<br>    
<br>
Silent night, holy night,<br>
Shepherds quake at the sight.<br>
Glories stream fro m heaven afar,<br>
Heav'nly hosts sing Alleluia;<br>
Christ the Savior is born.<br>
<br>
Silent night, holy night,<br>
Son of God, love's pure light.<br>
Radiant beams fro m Thy holy face,<br>
With the dawn of redeeming grace,<br>
Jesus, Lord, at Thy birth.</p>
</div>
</section>
<!-- section2  ============================= -->
<section>
<figure>
<a href="javascript:;"> <img src="image/img01.jpg" alt="">
<figcaption>卡通耶誕造型可愛坐墊椅墊2入組</figcaption>
<ul>
<li>可愛造型耶誕坐墊兩款可選</li>
<li>彈力棉超回彈吸水坐墊</li>
<li>優質法蘭絨面料細膩柔軟</li>
</ul>
<div class="more_s">more</div>
</a>
</figure>
<figure>
<a href="javascript:;"> <img src="image/img02.jpg" alt="">
<figcaption>窩自在--快樂聖誕版守護你稻草人景觀夜燈</figcaption>
<ul>
<li>可定時間</li>
<li>可當行動電源</li>
<li>交換禮物優選</li>
</ul>
<div class="more_s">more</div>
</a>
</figure>
<figure>
<a href="javascript:;"> <div class="imgblock"><img src="image/img03.jpg" alt=""></div>
<figcaption>銀色聖誕 天絲單人舖棉兩用被</figcaption>
<ul>
<li>100%純棉表布</li>
<li>30%天絲舖棉手感再升級</li>
<li>夏天可單獨使用當作涼被或放入夏被使用</li>
</ul>
<div class="more_s">more</div>
</a>
</figure>
<figure>
<a href="javascript:;"> <div class="imgblock"><img src="image/img04.jpg" alt=""></div>
<figcaption>新款聖誕保溫杯 500ml1入</figcaption>
<ul>
<li>一鍵開啟彈跳杯蓋</li>
<li>貼心防燙杯口</li>
<li>防滑杯底設計</li>
</ul>
<div class="more_s">more</div>
</a>
</figure>
<figure>
<a href="javascript:;"> <div class="imgchange"><img src="image/img05.jpg" alt=""></div>
<figcaption>【Light+Bio】耶誕麋鹿苔球</figcaption>
<ul>
<li>溫心耶誕幸福禮物植栽</li>
<li>叮叮噹~叮叮噹~居家辦公超夯綠意小物</li>
<li>溫心耶誕、幸福好禮,分享佳節喜悅吧!</li>
</ul>
<div class="more_s">more</div>
</a>
</figure>
<figure>
<a href="javascript:;"> <div class="imgchange"><img src="image/img06.jpg" alt=""></div>
<figcaption>耶誕造型秋冬法蘭絨椅墊地墊組合</figcaption>
<ul>
<li>聖誕節氛圍的可愛地墊和坐墊</li>
<li>兩種款式令人都想擁有</li>
<li>彈力棉超回彈吸水地墊</li>
</ul>
<div class="more_s">more</div>
</a>
</figure>
<figure>
<a href="javascript:;"> <div class="imgchange"><img src="image/img07.jpg" alt=""></div>
<figcaption>DIY壁貼-黃金聖誕節</figcaption>
<ul>
<li>圖案豐富富有創意</li>
<li>讓空間散發出動感與活力的氣息</li>
<li>DIY無痕壁貼</li>
</ul>
<div class="more_s">more</div>
</a>
</figure>
<figure>
<a href="javascript:;"> <div class="imgchange"><img src="image/img08.jpg" alt=""></div>
<figcaption>耶誕經典之精緻禮盒組</figcaption>
<ul>
<li>灌入紮實甜點功夫,帶著深刻的情感</li>
<li>回歸最初天然的美好滋味</li>
<li>來挑逗著您的味蕾</li>
</ul>
<div class="more_s">more</div>
</a>
</figure>
</section>
</article>
<footer>Copyright © 2017 Zoego.tech<br> 
Practice for education only.Please notify the webmaster for any picture violations.</footer>

【#banner】區

/*#banner===============================================*/
#banner {
box-shadow: 0 1px 2px #000;
background: url(image/banner.jpg) no-repeat center center;
overflow: hidden;
height: 400px; 
background-size: cover;      /*解決照片不合問題*/
}
#noteRight {
background:url(image/noteRight.png) no-repeat;
filter: drop-shadow(-1px -1px 3px #000);
width: 180px; height: 400px;
/* float: right;  */
position: absolute;
right: 0px;
transition: all .5s; cursor: pointer;
}
#noteRight:hover{
width: 528px;
}