I am participating in the Mid-Autumn Festival Creative Submission contest, please see: Mid-Autumn Festival Creative Submission Contest for details

Preface 🌗

The Mid-Autumn Festival is one of the traditional Festivals in China. It has a long history. At the same time, there are customs around the country, offering sacrifices to the moon, enjoying the moon, watching lanterns, eating moon cakes and so on. In addition, there are folk worship, moonlight horse, rabbit doll, dragon dance and so on.

Of course, for the Mid-Autumn Festival, there is a most relevant poem, is “Water Tune Song Head”.

“Water Tune head” is su Shi’s Mid-Autumn moon bosom person, this person uses the image to depict the receiving and receiving, outline a bright moon in the sky, relatives potential, lofty lofty kuangyuan realm atmosphere.

So, with 2021 approaching, write a web page about the Mid-Autumn Moon on Monday with this poem as the background. Let’s enjoy the moon

First, 🌙 theme selection

1. Poetry appreciation

First of all, let’s appreciate the poem “Water Tune Tune head”. The details are as follows:

As you can see, the poem has eight lines. Then we will take these eight poems, plus the analysis of them, to carry out the design manuscript design.

2. Look at the prototype first

Based on the above poems, we carried out the prototype design from the nav, banner, poetry background and poetry appreciation aspects of the navigation bar. The details are as follows:

3. Interface design

Ok, based on the prototype above, let’s design the final hi-fi interface. The details are as follows:

2. 🌛 coding stage

1. Project directory structure

First let’s look at the directory structure of the project. The details are as follows:

2. The HTML design

(1) Nav structure design

For the navigation bar, let’s take a look at its HTML structure. The specific code is 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>appreciation</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>found</p>
                    <p>Discover</p>
                </div>
                <div>
                    <i class = "iconfont icon-haofangtuo400iconfontshaixuanzhedie"></i>
                </div>
            </li>
            <li>
                <div>
                    <p>select</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>
Copy the code

(2) Banner structure design

According to the design drawing above, you can also see a background image. The background image is actually embedded with 3 images on Monday and presented in the form of rotation. The details are shown in the figure below:

According to the above round cast diagram, we carry on the structural design to it. The specific code is as follows:

<! - banner bar - >
<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>
Copy the code

(3) Poetry background design

After designing the background, we will design the first module: the background of poetry. The specific code is as follows:

<div class = "background">
    <div class = "background_title">
        <p>01&nbsp;&nbsp;</p>
        <p>Poetry background</p>
    </div>
    <div class = "background_content">
        <div class = "background_content_top">
            <img src=".. / img/background (1).jpg" alt="">
            <img src=".. / img/background (2).jpg" alt="">
        </div>
        <div class = "background_content_bottom">
            <p>Su Shi, who had different political views from the reformists, was sent to different places to serve as an official. He had asked to be transferred to a place closer to his brother Su Zhe as an official, in order to get together more brothers, but has not been able to do so.</p>
            <p>
                <span>Xining nine years, Su Shi then the governor of Michigan, at this time and Su Zhe has not been reunited for seven years.</span>
                <span>On the autumn night of this year, the moon was bright in the sky and silver was shining everywhere. Facing the moon, Su Shi felt his heart surging. Thus, while drinking heavily, he wrote this famous poem.</span>
            </p>
        </div>
    </div>
</div>
Copy the code

(4) Appreciation design

Next is the second module: poetry appreciation. The specific code is as follows:

<div class = "definition">
    <div class = "definition_title">
        <p>02&nbsp;&nbsp;</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>Hold the wine: Lift 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 moon begin to exist? I took my glass and asked the sky.</p>
                    </div>
                </div>
                <div class = "verseBottom">
                    <div class = "green_square">Poetry appreciation</div>
                    <div class = "green_sentence">
                        <p>There is indeed a similar spirit, spirit and spirit in its obsession with questions and thoughts.</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>The Palace in the Sky (que) refers to the palace in the moon. Que, the stone terrace 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 what year the palace in the sky 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>2. To ride on the wind; By the wind. Return: return to the sky.</p>
                        <p>Sh ēng: can't stand; can't stand. Win: bear, bear.</p>
                    </div>
                </div>
                <div class = "verseMiddle">
                    <div class = "green_square">Vernacular translation</div>
                    <div class = "green_sentence">
                        <p>I want to take the wind back to the sky, but I'm afraid in the beautiful jade building, can not stand the towering cold nine days.</p>
                    </div>
                </div>
                <div class = "verseBottom">
                    <div class = "green_square">Poetry appreciation</div>
                    <div class = "green_sentence">
                        <p>These a few Ming write moon palace high cold, hint of the moon is bright and clean, the kind of both yearning for heaven and nostalgia for the world of ambivalence very implicitly written out.</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>Figure out the shadow: It means that the poet dances in the moonlight and the shadow moves with him. Play with, play with, admire.</p>
                        <p>He like: what if, where comparable. Say when.</p>
                    </div>
                </div>
                <div class = "verseMiddle verseMiddleReverse">
                    <div class = "green_square">Vernacular translation</div>
                    <div class = "green_sentence">
                        <p>Dancing and watching the moonlight, what is better than being 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 from illusion to reality, in the conflict between the world and the wto, the wto thought 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, the gorgeous pavilion of Zhu Hong. Yee house, ornate carved 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 vermilion pavilion and hung low on the carved window, shining on her sleepy self.</p>
                    </div>
                </div>
                <div class = "verseBottom">
                    <div class = "green_square">Poetry appreciation</div>
                    <div class = "green_sentence">
                        <p>Here both refers to his memory of his brother's deep feeling, and can generally refer to those Mid-Autumn Festival because can not be reunited with relatives and difficult to sleep all leave people.</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>What: Why.</p>
                    </div>
                </div>
                <div class = "verseMiddle verseMiddleReverse">
                    <div class = "green_square">Vernacular translation</div>
                    <div class = "green_sentence">
                        <p>The moon should not have any resentment towards people, why slant when people leave just circle?</p>
                    </div>
                </div>
                <div class = "verseBottom verseBottomReverse">
                    <div class = "green_square">Poetry appreciation</div>
                    <div class = "green_sentence">
                        <p>In contrast, the sadness of separation became even more serious. This is to blame the moon and people deliberately difficult.</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 the "happiness" "harmony" and the "clear" "round" of the moon.</p>
                    </div>
                </div>
                <div class = "verseMiddle">
                    <div class = "green_square">Vernacular translation</div>
                    <div class = "green_sentence">
                        <p>People have vicissitons of grief and joy, and the moon has waxes and wanes, which 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>Emphasize the philosophical view of personnel, while placing the hope 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. Enjoy together. This is a beautiful picture of a woman, the moon.</p>
                    </div>
                </div>
                <div class = "verseMiddle verseMiddleReverse">
                    <div class = "green_square">Vernacular translation</div>
                    <div class = "green_sentence">
                        <p>I only hope that everyone in the world's relatives can be safe and healthy, even thousands of miles apart, but also 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 ordinary masturbation and mutual encouragement, but show the author's attitude towards dealing with such important issues as time, space and life, and fully show the rich and extensive spiritual realm of the poet.</p>
                    </div>
                </div>
            </div>
            <div class = "verse_left">
                <img src=".. /img/eighth_sentence.jpg" alt="">
            </div>
        </div>
    </div>
</div>
Copy the code

3. The CSS design

Ok, now that the above content is constructed, we are going to beautify it. Make it look like a high-fidelity image.

(1) Nav style beautification

First, we can beautify the nav bar. Details are 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;
}
Copy the code

(2) Banner style beautification

Now let’s style our banner. The specific code is as follows:

/ * * / 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;
}
Copy the code

At the same time, we can see from above that what we want to do for this piece of content is a round broadcast, and we use swiper for processing. So, let’s give a description of the 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>'; ,}}});Copy the code

(3) background and appreciation style beautification

Well, at this point, we’re about 50 percent complete. 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.5 px; * /
	/* 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;
}
Copy the code

3. 🌔 Results display

At this point, we have basically finished drawing the entire web page. Now, let’s use a GIF to see the implementation:

4. 🌓 Conclusion

Well, here, on the “water tune head” of the present content has ended! Also wish everyone a happy Mid-Autumn Festival in advance ~🥂🥂

Note: Some of the pictures in this article are from the Internet

☪️ Egg One More Thing

(: Material acquisition

• WeChat searchMonday labAnd pay attention to, reply keywordsThe Mid-Autumn festival moonObtain information ~

) Introduction

• Pay attention to the public number Monday laboratory, the first time to pay attention to quality articles, more selected columns for you to unlock ~
• If this article is useful to you, be sure to leave a footprint
• That’s all for this article! See you next time! 👋 👋 👋