🌗 preface
The Mid Autumn Festival is one of China's traditional festivals. It is a festival with a very long history. At the same time, there are also local customs, such as sacrificing the moon, appreciating the moon, watching lanterns, eating moon cakes and so on. In addition, there are folk moon worship, moonlight horses, rabbit God, dragon lantern dance, etc.
Of course, for the Mid Autumn Festival, there is one of the most relevant poems, that is, shuitiagetou.
"Water melody singing head" is Su Shi's work of looking at the moon and cherishing people in the Mid Autumn Festival. This person uses the image to outline a realm atmosphere with a bright moon in the sky, the potential of relatives and loneliness.
So, with the advent of 2021, I will write a web page about the bright moon of the Mid Autumn Festival on Monday with this poem as the background. Let's enjoy the bright moon in this bay~
I 🌙 Subject selection
1. Poetry appreciation
First of all, let's appreciate the poem "shuidiaotou". See the following figure for details:
As you can see, there are eight sentences in the poem. Then we will use these eight poems and their analysis to design the design draft.
2. See the prototype first
Based on the above poems, we carry out the prototype design from the aspects of navigation bar nav, banner, poetry background and poetry appreciation. See the following figure for details:
3. Interface design
Well, according to the above prototype, let's design the final high fidelity interface. See the following figure for details:
II 🌛 Coding phase
1. Project directory structure
First, let's look at the directory structure of the project. See the following figure for details:
2. html design
(1) nav structure design
For the navigation bar, let's first look at its html structure. The specific codes are as follows:
<div class = "nav">
<!-- left logo -->
<div class="left">
<a href="">logo</a>
</div>
<!-- Right navigation bar -->
<div class="right">
<ul>
<li>
<div>
<p>appreciate</p>
<p>Appreciate</p>
</div>
<div>
<i class = "iconfont icon-haofangtuo400iconfontshaixuanzhedie"></i>
</div>
</li>
<li>
<div>
<p>communication</p>
<p>Communication</p>
</div>
<div>
<i class = "iconfont icon-haofangtuo400iconfontshaixuanzhedie"></i>
</div>
</li>
<li>
<div>
<p>find</p>
<p>Discover</p>
</div>
<div>
<i class = "iconfont icon-haofangtuo400iconfontshaixuanzhedie"></i>
</div>
</li>
<li>
<div>
<p>selected</p>
<p>Choice</p>
</div>
<div>
<i class = "iconfont icon-haofangtuo400iconfontshaixuanzhedie"></i>
</div>
</li>
<li>
<div>
<p>about</p>
<p>About</p>
</div>
<div>
<i class = "iconfont icon-haofangtuo400iconfontshaixuanzhedie"></i>
</div>
</li>
</ul>
</div>
</div>
(2) banner structure design
According to the above design drawing, you can also see a background drawing. The background picture is actually embedded with three pictures on Monday and presented in the form of rotation. See the following figure for details:
Rotation chart
According to the above rotation diagram, we will design its structure. The specific codes are as follows:
<!-- banner column -->
<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) Poetry background design
After designing the background, let's design the first module: Poetry background. The specific codes are as follows:
<div class = "background">
<div class = "background_title">
<p>01 </p>
<p>Poetic background</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>Because of his different political views from the reformists, Su Shi asked to be released and worked around as an official. He once asked to be transferred to an official near his brother Su Zhe in order to get together more brothers, but he failed to do so.</p>
<p>
<span>In the ninth year of Xining, Su Shi was the governor of Mizhou. At this time, he and Su Zhe had not been reunited for seven years.</span>
<span>On the night of the Mid Autumn Festival this year, the bright moon was in the sky and silver was everywhere. Su Shi's heart surged in the face of a bright moon, so he wrote this famous poem through the ages while he was drunk.</span>
</p>
</div>
</div>
</div>
(4) Appreciation design
Next is the second module: poetry appreciation. The specific codes are as follows:
<div class = "definition">
<div class = "definition_title">
<p>02 </p>
<p>Poetry appreciation</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">
Word annotation
</div>
<div class = "green_sentence">
<p>Wine: pick up the glass. Hold, hold, hold.</p>
</div>
</div>
<div class = "verseMiddle">
<div class = "green_square">
Vernacular translation
</div>
<div class = "green_sentence">
<p>When did the bright moon begin to exist? I asked Heaven with my glass.</p>
</div>
</div>
<div class = "verseBottom">
<div class = "green_square">
Poetry appreciation
</div>
<div class = "green_sentence">
<p>The obsession of asking and the escape of thinking do have a similar concentration of essence, Qi and spirit.</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">
Word annotation
</div>
<div class = "green_sentence">
<p>Heavenly palace( què): It refers to the mid Moon Palace. Que, the stone platform behind the ancient city wall.</p>
</div>
</div>
<div class = "verseMiddle verseMiddleReverse">
<div class = "green_square">
Vernacular translation
</div>
<div class = "green_sentence">
<p>I don't know the palace in heaven. What year is tonight.</p>
</div>
</div>
<div class = "verseBottom verseBottomReverse">
<div class = "green_square">
Poetry appreciation
</div>
<div class = "green_sentence">
<p>The poet imagined that it must be a good day, so the moon is so round and bright.</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">
Word annotation
</div>
<div class = "green_sentence">
<p>Ride the wind: ride the wind; rely on the wind. Return: go back to the sky.</p>
<p>Invincible( shēng): Can't stand, can't bear. Victory: bear, bear.</p>
</div>
</div>
<div class = "verseMiddle">
<div class = "green_square">
Vernacular translation
</div>
<div class = "green_sentence">
<p>I want to return to the sky by the Royal breeze. I'm afraid I can't stand the cold of nine days in the building made of beautiful jade.</p>
</div>
</div>
<div class = "verseBottom">
<div class = "green_square">
Poetry appreciation
</div>
<div class = "green_sentence">
<p>These sentences clearly describe the cold of the Moon Palace, imply the brightness of the moonlight, and implicitly write out the contradictory psychology of yearning for the sky and nostalgia for the world.</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">
Word annotation
</div>
<div class = "green_sentence">
<p>Clear the shadow: it means that the poet dances in the moonlight, and the shadow dances with him. Do, play and enjoy.</p>
<p>What is like: what is, where is comparable. When is it.</p>
</div>
</div>
<div class = "verseMiddle verseMiddleReverse">
<div class = "green_square">
Vernacular translation
</div>
<div class = "green_sentence">
<p>Dancing and enjoying the shadow of the moon, where can it be compared with in the world?</p>
</div>
</div>
<div class = "verseBottom verseBottomReverse">
<div class = "green_square">
Poetry appreciation
</div>
<div class = "green_sentence">
<p>He finally returned to reality from illusion. In the contradiction between birth and entry into WTO, the thought of entry into WTO finally prevailed.</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">
Word annotation
</div>
<div class = "green_sentence">
<p>Zhu Ge, a magnificent vermilion Pavilion. Qihu, ornate doors and windows.</p>
</div>
</div>
<div class = "verseMiddle">
<div class = "green_square">
Vernacular translation
</div>
<div class = "green_sentence">
<p>The moon turned the scarlet Pavilion and hung it low on the carved window, shining on her sleepless self.</p>
</div>
</div>
<div class = "verseBottom">
<div class = "green_square">
Poetry appreciation
</div>
<div class = "green_sentence">
<p>This not only refers to the deep feeling of missing your brother, but also refers to all those who have left because they can't get together with their relatives and can't sleep during the Mid Autumn Festival.</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">
Word annotation
</div>
<div class = "green_sentence">
<p>Why: why.</p>
</div>
</div>
<div class = "verseMiddle verseMiddleReverse">
<div class = "green_square">
Vernacular translation
</div>
<div class = "green_sentence">
<p>The bright moon shouldn't have any resentment against people. Why is it round when people leave?</p>
</div>
</div>
<div class = "verseBottom verseBottomReverse">
<div class = "green_square">
Poetry appreciation
</div>
<div class = "green_sentence">
<p>In contrast, the sadness of leaving people is even heavier. This is complaining that the moon deliberately embarrasses people.</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">
Word annotation
</div>
<div class = "green_sentence">
<p>This matter: refers to people's "joy" and "harmony" and the "sunny" and "round" of the month.</p>
</div>
</div>
<div class = "verseMiddle">
<div class = "green_square">
Vernacular translation
</div>
<div class = "green_sentence">
<p>People have vicissitudes of joys and sorrows, and the moon has a change of Yin, Qing, yuan and Duan. This kind of thing has been difficult to be comprehensive since ancient times.</p>
</div>
</div>
<div class = "verseBottom">
<div class = "green_square">
Poetry appreciation
</div>
<div class = "green_sentence">
<p>It emphasizes the concept of personnel and hopes for the future.</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">
Word annotation
</div>
<div class = "green_sentence">
<p>But: only. Together, enjoy together. Chan Juan originally means the beautiful appearance of women's posture. Here it describes the moon.</p>
</div>
</div>
<div class = "verseMiddle verseMiddleReverse">
<div class = "green_square">
Vernacular translation
</div>
<div class = "green_sentence">
<p>I just hope everyone's relatives in the world can be safe and healthy. Even if they are thousands of miles apart, they can share this beautiful moonlight.</p>
</div>
</div>
<div class = "verseBottom verseBottomReverse">
<div class = "green_square">
Poetry appreciation
</div>
<div class = "green_sentence">
<p>These two sentences are not general masturbation and mutual encouragement, but show the author's attitude towards some major issues such as time, space and life, which fully shows the richness and breadth of the poet's spiritual realm.</p>
</div>
</div>
</div>
<div class = "verse_left">
<img src="../img/eighth_sentence.jpg" alt="">
</div>
</div>
</div>
</div>
3. css design
Well, after the above content is built, we will beautify its style and make it present the effect in the high fidelity picture.
(1) nav style beautification
First of all, we can beautify the nav navigation bar as follows:
/*navigation bar*/
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 style beautification
Now let's optimize the style of banner. The specific code is as follows:
/*banner column*/
.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;
}
At the same time, we can learn from the above that we need to do a rotation of this piece of content, and we use swiper for processing. Therefore, next, let's describe its action. The specific code is as follows:
var swiper = new Swiper('.swiper-container', {
pagination: {
el: '.swiper-pagination',
clickable: true,
renderBullet: function (index, className) {
return '<span class="' + className + '">' + (index + 1) + '</span>';
},
},
});
(3) Background and appreciation style beautification
OK, so far, we have completed about 50% of the whole web page. Now, let's beautify the following two parts.
The first is the beautification of the background style of poetry. The specific code is as follows:
/*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;
}
III 🌔 Result display
Here, we have basically completed the drawing of the whole web page. Now, let's use a moving picture to see the implementation effect:
Mid Autumn Moon result demonstration
IV 🌓 Conclusion
Well, here, the presentation of the content of "water tune singer" is over! At the same time, I wish you a happy mid autumn festival in advance~ 🥂🥂
☪️ One More Thing
(: material acquisition)
- Wechat searches the Monday research room and pays attention to it. Reply to the keyword mid autumn moon to obtain information~
(: Fan Wai Pian)
- Pay attention to the official account of Monday's research room. First, we will focus on quality articles.
- If this article is useful to you, remember to leave a footprint jio before you go~
- The above is the whole content of this article! See you next time! 👋👋👋