一張網頁帶你了解中秋節的前世今生
- 🌗序言
- 一、🌙題材選取
- 1. 詩詞賞析
- 2. 原型圖搶先看
- 3. 界面設計
- 二、🌛編碼階段
- 1. 專案目錄結構
- 2. html設計
- （1）nav結構設計
- （2）banner結構設計
- （3）詩詞背景設計
- （4）賞析設計
- 3. css設計
- （1）nav樣式美化
- （2）banner樣式美化
- （3）背景及賞析樣式美化
- 三、🌔結果展示
- 四、🌓結束語
- ??彩蛋 One More Thing
- （：素材獲取
- （：番外篇
🌗序言
中秋節是中國的傳統節日之一，是一個非常歷史悠久的節日，同時，各地也有各地的習俗，祭月、賞月、觀花燈、吃月餅等等，除此之外呢，各地還有民間拜月、月光馬兒、兔兒爺、舞龍燈等，
當然，對于中秋來說，有一首最為相關的詩，就是《水調歌頭》，
《水調歌頭》是蘇軾的中秋望月懷人之作，此人運用形象描繪的收發，勾勒出一種皓月當空、親人潛力、孤高曠遠的境界氛圍，
那么，借著2021年的來臨之際，周一以這首詩作為背景，來寫一張關于中秋明月的網頁，一起來欣賞這一灣明月吧~
一、🌙題材選取
1. 詩詞賞析
首先，我們先來賞析《水調歌頭》這首詩，具體如下圖：
大家可以看到，詩一共有 8 句，那接下來我們就以這八句詩，加上對其的決議，來進行設計稿設計，
2. 原型圖搶先看
依據以上詩詞，我們從導航欄 nav 、 banner 、詩詞背景和詩詞賞析幾個方面來進行原型設計，具體如下圖：
3. 界面設計
好了，依據上面的原型圖，我們來設計最終的高保真界面，具體如下圖：
二、🌛編碼階段
1. 專案目錄結構
首先我們先來看專案的目錄結構，具體如下圖：
2. html設計
（1）nav結構設計
對于導航欄來說，我們先來看下其 html 結構，具體代碼如下：
<div class = "nav">
<!-- 左邊logo -->
<div class="left">
<a href="">logo</a>
</div>
<!-- 右邊導航欄 -->
<div class="right">
<ul>
<li>
<div>
<p>鑒賞</p>
<p>Appreciate</p>
</div>
<div>
<i class = "iconfont icon-haofangtuo400iconfontshaixuanzhedie"></i>
</div>
</li>
<li>
<div>
<p>交流</p>
<p>Communication</p>
</div>
<div>
<i class = "iconfont icon-haofangtuo400iconfontshaixuanzhedie"></i>
</div>
</li>
<li>
<div>
<p>發現</p>
<p>Discover</p>
</div>
<div>
<i class = "iconfont icon-haofangtuo400iconfontshaixuanzhedie"></i>
</div>
</li>
<li>
<div>
<p>精選</p>
<p>Choice</p>
</div>
<div>
<i class = "iconfont icon-haofangtuo400iconfontshaixuanzhedie"></i>
</div>
</li>
<li>
<div>
<p>關于</p>
<p>About</p>
</div>
<div>
<i class = "iconfont icon-haofangtuo400iconfontshaixuanzhedie"></i>
</div>
</li>
</ul>
</div>
</div>
（2）banner結構設計
依據上面的設計圖，大家還可以看到有一個背景圖，背景圖其實周一內嵌了3張圖，并且用輪播的形式呈現，具體如下圖所示：
<iframe id="lVbiWPJj-1631329505810" src="https://live.csdn.net/v/embed/176791" allowfullscreen="true" data-mediaembed="csdn"></iframe>
輪播圖
依據以上輪播圖，我們來對其進行結構設計，具體代碼如下：
<!-- banner欄 -->
<div class = "banner">
<div class = "swiper-container" :key = "bannerList.length">
<ul class = "swiper-wrapper">
<li class = "swiper-slide">
<img src="../img/home_banner_5.jpg" alt="">
<div class="banner_db"></div>
</li>
<li class = "swiper-slide">
<img src="../img/home_banner_2.jpg" alt="">
<div class="banner_db"></div>
</li>
<li class = "swiper-slide">
<img src="../img/home_banner_3.jpg" alt="">
<div class="banner_db"></div>
</li>
<li class = "swiper-slide">
<img src="../img/home_banner_4.jpg" alt="">
<div class="banner_db"></div>
</li>
<li class = "swiper-slide">
<img src="../img/home_banner_1.jpg" alt="">
<div class="banner_db"></div>
</li>
</ul>
</div>
</div>
（3）詩詞背景設計
設計完背景之后，我們來設計第一個模塊：詩詞背景，具體代碼如下：
<div class = "background">
<div class = "background_title">
<p>01 </p>
<p>詩詞背景</p>
</div>
<div class = "background_content">
<div class = "background_content_top">
<img src="../img/background①.jpg" alt="">
<img src="../img/background②.jpg" alt="">
</div>
<div class = "background_content_bottom">
<p>蘇軾因為與革新派政見不同，自請外放，輾轉在各地為官，他曾經要求調任到離弟弟蘇轍較近的地方為官，以求兄弟多多相聚，但一直未能如愿，</p>
<p>
<span>熙寧九年，蘇軾時任密州知州，此時與蘇轍已七年未得團聚，</span>
<span>這年中秋夜，皓月當空，銀輝遍地，蘇軾面對一輪明月，心潮起伏，于是趁酒興正酣，揮筆寫下了這首千古名篇，</span>
</p>
</div>
</div>
</div>
（4）賞析設計
接下來是第二個模塊：詩詞賞析，具體代碼如下：
<div class = "definition">
<div class = "definition_title">
<p>02 </p>
<p>詩詞賞析</p>
</div>
<div class = "definition_content">
<!-- first sentence -->
<div class = "definition_content_combination">
<div class = "verse_left">
<img src="../img/first_sentence.jpg" alt="">
</div>
<div class = "verse_right">
<div class = "verseTop">
<div class = "green_square">
詞語注釋
</div>
<div class = "green_sentence">
<p>把酒：端起酒杯，把，執、持，</p>
</div>
</div>
<div class = "verseMiddle">
<div class = "green_square">
白話譯文
</div>
<div class = "green_sentence">
<p>明月從什么時候開始有的呢？我拿著酒杯遙問蒼天，</p>
</div>
</div>
<div class = "verseBottom">
<div class = "green_square">
詩句鑒賞
</div>
<div class = "green_sentence">
<p>其問之癡迷、想之逸塵，確實有一種類似的精、氣、神貫注在里面，</p>
</div>
</div>
</div>
</div>
<!-- second sentence -->
<div class = "definition_content_combination">
<div class = "verse_right verse_right_reverse">
<div class = "verseTop verseTopReverse">
<div class = "green_square">
詞語注釋
</div>
<div class = "green_sentence">
<p>天上宮闕（què）：指月中宮殿，闕，古代城墻后的石臺，</p>
</div>
</div>
<div class = "verseMiddle verseMiddleReverse">
<div class = "green_square">
白話譯文
</div>
<div class = "green_sentence">
<p>不知道天上的宮殿，今晚是哪一年，</p>
</div>
</div>
<div class = "verseBottom verseBottomReverse">
<div class = "green_square">
詩句鑒賞
</div>
<div class = "green_sentence">
<p>把對于明月的贊美與向往之情更推進了一層，詩人想象那一定是一個好日子，所以月才這樣圓、這樣亮，</p>
</div>
</div>
</div>
<div class = "verse_left">
<img src="../img/second_sentence.jpg" alt="">
</div>
</div>
<!-- third sentence -->
<div class = "definition_content_combination">
<div class = "verse_left">
<img src="../img/third_sentence.jpg" alt="">
</div>
<div class = "verse_right">
<div class = "verseTop">
<div class = "green_square">
詞語注釋
</div>
<div class = "green_sentence">
<p>乘風：駕著風；憑借風力，歸去：回到天上去，</p>
<p>不勝（shēng）：經不住，承受不了，勝：承擔、承受，</p>
</div>
</div>
<div class = "verseMiddle">
<div class = "green_square">
白話譯文
</div>
<div class = "green_sentence">
<p>我想要乘御清風回到天上，又恐怕在美玉砌成的樓宇，受不住高聳九天的寒冷，</p>
</div>
</div>
<div class = "verseBottom">
<div class = "green_square">
詩句鑒賞
</div>
<div class = "green_sentence">
<p>這幾句明寫月宮的高寒，暗示月光的皎潔，把那種既向往天上又留戀人間的矛盾心理十分含蓄地寫了出來，</p>
</div>
</div>
</div>
</div>
<!-- forth sentence -->
<div class = "definition_content_combination">
<div class = "verse_right verse_right_reverse">
<div class = "verseTop verseTopReverse">
<div class = "green_square">
詞語注釋
</div>
<div class = "green_sentence">
<p>弄清影：意思是詩人在月光下起舞，影子也隨著舞動，弄，玩弄，欣賞，</p>
<p>何似：何如，哪里比得上，一說何時，</p>
</div>
</div>
<div class = "verseMiddle verseMiddleReverse">
<div class = "green_square">
白話譯文
</div>
<div class = "green_sentence">
<p>翩翩起舞玩賞著月下清影，哪里比得上在人世間？</p>
</div>
</div>
<div class = "verseBottom verseBottomReverse">
<div class = "green_square">
詩句鑒賞
</div>
<div class = "green_sentence">
<p>他終于從幻徑訓到現實，在出世與入世的矛盾糾葛中，入世思想最終占了上風，</p>
</div>
</div>
</div>
<div class = "verse_left">
<img src="../img/fourth_sentence.jpg" alt="">
</div>
</div>
<!-- fifth sentence -->
<div class = "definition_content_combination">
<div class = "verse_left">
<img src="../img/fifth_sentence.jpg" alt="">
</div>
<div class = "verse_right">
<div class = "verseTop">
<div class = "green_square">
詞語注釋
</div>
<div class = "green_sentence">
<p>朱閣，朱紅的華麗樓閣，綺戶， 雕飾華麗的門窗，</p>
</div>
</div>
<div class = "verseMiddle">
<div class = "green_square">
白話譯文
</div>
<div class = "green_sentence">
<p>月兒轉過朱紅色的樓閣，低低地掛在雕花的窗戶上，照著沒有睡意的自己，</p>
</div>
</div>
<div class = "verseBottom">
<div class = "green_square">
詩句鑒賞
</div>
<div class = "green_sentence">
<p>這里既指自己懷念弟弟的深情，又可以泛指那些中秋佳節因不能與親人團圓以至難以入眠的一切離人，</p>
</div>
</div>
</div>
</div>
<!-- sixth sentence -->
<div class = "definition_content_combination">
<div class = "verse_right verse_right_reverse">
<div class = "verseTop verseTopReverse">
<div class = "green_square">
詞語注釋
</div>
<div class = "green_sentence">
<p>何事：為什么，</p>
</div>
</div>
<div class = "verseMiddle verseMiddleReverse">
<div class = "green_square">
白話譯文
</div>
<div class = "green_sentence">
<p>明月不該對人們有什么怨恨吧，為什么偏在人們離別時才圓呢？</p>
</div>
</div>
<div class = "verseBottom verseBottomReverse">
<div class = "green_square">
詩句鑒賞
</div>
<div class = "green_sentence">
<p>相形之下，更加重了離人的愁苦了，這是埋怨明月故意與人為難，</p>
</div>
</div>
</div>
<div class = "verse_left">
<img src="../img/sixth_sentence.jpg" alt="">
</div>
</div>
<!-- seventh sentence -->
<div class = "definition_content_combination">
<div class = "verse_left">
<img src="../img/seventh_sentence.jpg" alt="">
</div>
<div class = "verse_right">
<div class = "verseTop">
<div class = "green_square">
詞語注釋
</div>
<div class = "green_sentence">
<p>此事：指人的“歡”“合” 和月的“晴”“圓”，</p>
</div>
</div>
<div class = "verseMiddle">
<div class = "green_square">
白話譯文
</div>
<div class = "green_sentence">
<p>人有悲歡離合的變遷，月有陰晴圓缺的轉換，這種事自古來難以周全，</p>
</div>
</div>
<div class = "verseBottom">
<div class = "green_square">
詩句鑒賞
</div>
<div class = "green_sentence">
<p>強調對人事的達觀，同時寄托對未來的希望，</p>
</div>
</div>
</div>
</div>
<!-- eighth sentence -->
<div class = "definition_content_combination">
<div class = "verse_right verse_right_reverse">
<div class = "verseTop verseTopReverse">
<div class = "green_square">
詞語注釋
</div>
<div class = "green_sentence">
<p>但：只，共，一起欣賞，嬋娟，本意指婦女姿態美好的樣子，這里形容月亮，</p>
</div>
</div>
<div class = "verseMiddle verseMiddleReverse">
<div class = "green_square">
白話譯文
</div>
<div class = "green_sentence">
<p>只希望這世上所有人的親人能平安健康，即便相隔千里，也能共享這美好的月光，</p>
</div>
</div>
<div class = "verseBottom verseBottomReverse">
<div class = "green_square">
詩句鑒賞
</div>
<div class = "green_sentence">
<p>這兩句并非一般的自慰和共勉，而是表現了作者處理時間、空間以及人生這樣一些重大問題所持的態度，充分顯示出詞人精神境界的豐富博大，</p>
</div>
</div>
</div>
<div class = "verse_left">
<img src="../img/eighth_sentence.jpg" alt="">
</div>
</div>
</div>
</div>
3. css設計
好了，上面的內容搭建完以后，我們要來對其樣式進行美化，讓它呈現出高保真圖片里面的效果，
（1）nav樣式美化
首先，我們能先來對導航欄 nav 進行一個美化，具體如下：
/*導航欄*/
html,body {
background: #f6f5f3;
}
#main {
display: flex;
justify-content: center;
}
.nav {
width:100%;
background: #80a1a2;
height:60px;
position: fixed;
z-index: 4;
top: 0;
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: nowrap;
box-shadow: 0 7px 30px rgba(0,0,0,.15), 0 5px 10px rgba(0,0,0,.12);
}
.nav .left {
color: #fff;
font-size: 14px;
}
.nav .left a {
color: #e6f0f2;
font-size: 18px;
line-height:70px;
}
.nav .left a:hover {
color: #cfe4ec;
}
.nav .right ul{
display: flex;
}
.nav .right ul li {
margin-left: 60px;
color: #e6f0f2;
display: flex;
align-items: center;
cursor: pointer;
font-family: "microsoft yahei";
}
.nav .right ul li:hover{
color: #cfe4ec;
}
.nav .right ul li p:nth-child(1){
font-weight: 550;
}
.nav .right ul li p:nth-child(2){
font-size: 14px;
font-weight: 200;
}
.nav .right ul li div:nth-child(1){
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.nav .right ul li div:nth-child(2) i{
color: #e6f0f2 !important;
font-weight: bold;
}
（2）banner樣式美化
現在，我們來對 banner 進行樣式優化，具體代碼如下：
/*banner欄*/
.banner{
width: 100%;
margin-top: 60px;
display: flex;
justify-content: center;
}
.banner .swiper-container .swiper-wrapper .swiper-slide img{
width: 100%;
max-height: 600px;
}
.banner .swiper-container .swiper-wrapper .banner_db{
position: absolute;
bottom: 0;
width: 100%;
left: 0;
height: 34px;
background: url(../img/Irregular.png) no-repeat center bottom;
background-size: 100% 100%;
z-index: 3;
}
同時呢，在上面我們可以了解到，這一塊內容我們要做的是一個輪播，同時我們使用的是 swiper 來進行處理，因此，接下來我們來對其動作進行一個描述，具體代碼如下：
var swiper = new Swiper('.swiper-container', {
pagination: {
el: '.swiper-pagination',
clickable: true,
renderBullet: function (index, className) {
return '<span class="' + className + '">' + (index + 1) + '</span>';
},
},
});
（3）背景及賞析樣式美化
好了，到這里，我們完成了整個網頁的 50% 左右，那現在，我們來下面的兩部分進行美化，
首先是詩詞背景樣式的美化，具體代碼如下：
/*body*/
.bright_body .background,
.bright_body .definition{
/* background-color: #000000; */
width: 80%;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
/* margin-bottom: 300px; */
}
.bright_body .background .background_title,
.bright_body .definition .definition_title{
width: 190px;
height: 55px;
border-radius: 10px;
background-color:#2a4b5e;
display: flex;
justify-content: center;
align-items: center;
margin: 0 0 70px 0;
padding: 0 6px;
font-size: 22px;
font-weight: 600;
}
.bright_body .background .background_title,
.bright_body .definition .definition_title{
margin-top: 70px;
}
.bright_body .background .background_title p:nth-child(1),
.bright_body .definition .definition_title p:nth-child(1){
/* width: 32%; */
/* height: 70%; */
color: #c8dce5;
/* background-color: #d5f5e1; */
text-align: center;
/* line-height:31.5px; */
/* border-radius: 1px; */
}
.bright_body .background .background_title p:nth-child(2),
.bright_body .definition .definition_title p:nth-child(2){
/* width: 80%; */
color: #c8dce5;
text-align: center;
}
.bright_body .background .background_content,
.bright_body .definition .definition_content{
width: 80%;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.bright_body .background .background_content .background_content_top{
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-around;
}
.bright_body .background .background_content .background_content_top img{
width: 45%;
}
.bright_body .background .background_content .background_content_bottom{
display: flex;
flex-direction: row;
justify-content: space-around;
}
.bright_body .background .background_content .background_content_bottom p{
width: 45%;
margin: 8px 40px;
font-size: 18px;
line-height: 30px;
font-family: "microsoft yahei";
text-indent: 2em;
}
.bright_body .definition .definition_content .definition_content_combination{
margin: 30px 0;
display: flex;
}
.bright_body .definition .definition_content .definition_content_combination .verse_left{
width: 50%;
display: flex;
align-items: center;
}
.bright_body .definition .definition_content .definition_content_combination .verse_left img{
width: 100%;
border-radius: 1px;
}
.bright_body .definition .definition_content .definition_content_combination .verse_right{
width: 50%;
display: flex;
flex-direction: column;
padding: 20px 10px 20px 40px;
}
.bright_body .definition .definition_content .definition_content_combination .verse_right_reverse{
width: 50%;
display: flex;
flex-direction: column;
align-items: flex-end;
padding: 20px 40px 20px 10px;
}
.bright_body .definition .definition_content .definition_content_combination .verse_right .verseTop,
.bright_body .definition .definition_content .definition_content_combination .verse_right .verseMiddle,
.bright_body .definition .definition_content .definition_content_combination .verse_right .verseBottom{
display: flex;
flex-direction: column;
}
.bright_body .definition .definition_content .definition_content_combination .verse_right .verseTop .green_square,
.bright_body .definition .definition_content .definition_content_combination .verse_right .verseMiddle .green_square,
.bright_body .definition .definition_content .definition_content_combination .verse_right .verseBottom .green_square{
width: 100px;
height: 32px;
background-color: #c8dce5;
border-radius: 24px;
display: flex;
justify-content: center;
align-items: center;
color: #2a4b5e;
font-weight: bold;
}
.bright_body .definition .definition_content .definition_content_combination .verse_right .verseTop .green_sentence,
.bright_body .definition .definition_content .definition_content_combination .verse_right .verseMiddle .green_sentence,
.bright_body .definition .definition_content .definition_content_combination .verse_right .verseBottom .green_sentence{
padding: 20px 20px;
}
.bright_body .definition .definition_content .definition_content_combination .verse_right .verseTopReverse,
.bright_body .definition .definition_content .definition_content_combination .verse_right .verseMiddleReverse,
.bright_body .definition .definition_content .definition_content_combination .verse_right .verseBottomReverse{
display:flex;
align-items: flex-end;
}
三、🌔結果展示
到這里，我們就基本完成了整張網頁的繪制，現在，我們用一張動圖，來看下實作效果：
<iframe id="XySVuLRG-1631329534132" src="https://live.csdn.net/v/embed/176793" allowfullscreen="true" data-mediaembed="csdn"></iframe>
中秋明月結果演示
四、🌓結束語
好了，到這里，關于《水調歌頭》的內容呈現就已經結束啦！同時也提前祝大家中秋快樂呀~🥂🥂
??彩蛋 One More Thing
（：素材獲取
- 微信搜索
星期一研究室并關注，回復關鍵詞中秋明月獲取資料~
（：番外篇
- 關注公眾號星期一研究室，第一時間關注優質文章，更多精選專欄待你解鎖~
- 如果這篇文章對你有用，記得留個腳印jio再走哦~
- 以上就是本文的全部內容！我們下期見！👋👋👋
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/299391.html
標籤：其他