Excellent column recommendationGet contact at the end of the article
About the author: A technical blogger who loves to turn logical thinking into code
Author’s homepage: [Homepage–? Get more high-quality source code]
Web front-end major homework: 【Practice cases of high-quality project projects (1000 sets) 】
Programmer’s interesting confession method: 【HTML Tanabata Valentine’s Day Confession Web Page Production (110 sets) 】
Super cool Echarts large-screen visualization source code: [ Echarts large-screen display big data platform visualization (150 sets) 】
HTML + CSS + JS example code: [?HTML + CSS + JS example code (cool code) is being updated…]
Free and practical WEB front-end learning guide: [web front-end zero basic to advanced learning video tutorial 120G dry goods sharing]
About the author: Successively served as R&D engineer, technical team leader, and teaching director; won the top ten blog stars of CSDN twice in 2016 and 2020. Ten years of cold ice, it is difficult to cool the blood; many years have passed, and after changes, things have changed. However, the exploration and pursuit of technology never stops. Insist on originality, love to share, keep the original intention, carry on the past and open up the future!
Article directory
- 1. ?Website title
- 2. Website description
- 3. Introduction to the website
- 4. Website Demo
- 5. Website code
-
- HTML structure code
- CSS style code
- 6. How to make learning no longer blind
- 7. More dry goods
1. ?Website title
Design and production of tea culture website, Chinese traditional cultural themes, Beijing opera cultureink painting and calligraphy, Chinese folk New Year pictures culture and art website, etc.
2. Website description
? This home page code uses the use of DIV boxes, such as the use of box nesting, floating, margin, border, background and other attributes. The outer large box is set to center, the inner left, middle and right layout, and the lower horizontal floating arrangement. The front-end knowledge points and layout methods of university learning are used. The amount of CSS code is also very sufficient and detailed. Use hover to complete transition effects, mouse over effects, etc., use tables and form supplementary modules, for the convenience of novices to learn, individual If js is not used in the source code page, you can add it yourself if necessary.
A high-quality web design should include (specifically, it can be determined according to individual requirements)
- The page is divided into four parts: the header, the menu navigation bar (preferably pull down), the middle content section, and the footer.
- All pages are hyperlinked to each other, leading to three-level pages, consisting of 5-10 pages.
- The unified layout of the page style is normal, not messy, using Div + Css technology.
- The menu is beautiful and eye-catching, and the secondary menu can pop up and jump normally.
- There must be JS special effects, such as timing switching and manual switching of picture carousels.
- There are multimedia elements in the page, such as gif, video, music, and the use of form technology.
- The page is clean, beautiful, generous, and not the same. .
- Not only must it be able to present the content requested by users, but it must also meet the requirements of good layout, beautiful interface, elegant color matching, and various forms of expression.
3. Website introduction
Website layout: It is planned to adopt the current mainstream floating webpage layout structure that is compatible with major mainstream browsers and has stable display effects.
Web site program: It is planned to use the latest web programming language HTML5 + CSS3 + JS programming language to complete the functional design of the website. And ensure that the website code is compatible with all mainstream browsers currently on the market, so that the website can be seen immediately after opening.
Website materials: plan to collect good-looking picture materials from various platforms, carefully select pictures suitable for the style of the webpage, and then use PS to make pictures suitable for the size of the webpage.
Website files: The types of website system files include: html web page structure files, css web page style files, js web page special effect files, images web page picture files;
Webpage editing: The code of the webpage works is simple, and any HTML editing software can be used (such as: Dreamweaver, HBuilder, Vscode, Sublime, Webstorm, Text, Notepad + + , etc. Any html editing software for operation, modification and editing).
in:
(1) The html file contains: index.html is the home page, and other html is the second-level page;
(2) The css file contains: all css page styles, text scrolling, image zooming, etc.;
(3) The js file includes: js to achieve dynamic carousel effects, form submission, click events, etc. (js code is used in individual web pages).
4. Website demo
5. Website code
HTML structure code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<title>Experiment 3</title>
</head>
<body>
<div class="bigbox">
<div class="imglogo">
<img src="picture/logo.jpg" alt="">
</div>
<div class="banner">
<div class="heard">
<a href="">Homepage</a>
<a href="">News Center</a>
<a href="">Great pictures</a>
<a href="">Contact Us</a>
</div>
<div class="xinwenlist">
<div class="xinwen_list">
<h1>News announcement</h1>
<ul>
<li>Jidi Majia interview: "I will not stop calling out affectionately"</li>
<li>The 37th Youth Poetry Conference Poetry Collection Listed丨Selected Poems of Poets</li>
<li>"In Chongqing: Na Ye Poetry Recital" was held on Nanbin Road</li>
</ul>
</div>
<div class="xinwen_list">
<h1>News</h1>
<ul>
<li>Headline Poet | Duoduo: Paddle in the same dream</li>
<li>"Mo Lifeng's Song Poetry Class": Seventy Wonderful Poems, a University Course</li>
<li>China Poetry Network Weekly Collection No. 9: A Bottle of Past Drunk Haze</li>
</ul>
</div>
<div class="xinwen_list">
<h1>News</h1>
<ul>
<li>300 yuan remuneration invites you to comment on "Going to Daming Temple" (closed on November 30)</li>
<li>Daily Good Poetry Selection (Modern Poetry) No. 306 Online publicity until November 28</li>
<li>Daily Good Poetry Selection (Old Style Poems) No. 306 Online publicity until November 28</li>
</ul>
</div>
</div>
</div>
<div class="msgs">
<div class="msgs_left">
<div class="title">
<a href="">Home></a>
<a href="">News Center></a>
</div>
<div class="msgnei">
<h1>Papaya</h1>
<div class="neirong">
<div>
<p class="shou">"The Book of Songs·Da Ya·Yi" has the sentence "Throw me a peach and repay it with a plum". Later generations "throw a peach and repay a plum" has become an idiom, which is a metaphor for mutual gift and reciprocity. In comparison, although there is an idiom in "Wei Feng · Papaya" that originated from "throw it with papaya (peach, plum) and repay it with Qiongju (yao, Jiu)" (such as "to throw wood for Qiong") There is a record in Song Youmao's "Quan Tang Shihua" that "throw the wood to reward the Qiong, and the righteous general will be safe", but the frequency of use of "throw the wood to reward the Qiong" cannot be compared with "throw the peach to repay the plum". But in terms of the degree of recitation, "Papaya" is still higher. It is one of the most widely recited "Book of Songs" today.</p>
<img src="picture/1.webp" alt="">
<p>For such a well-known pre-Qin ancient poem with uncomplicated sentences, there are as many as seven theories to analyze its main theme throughout the ages (according to the statistics of Zhang Shubo's "Guofeng Jishuo"). According to the "Mao Poetry Preface" written in the Han Dynasty: ""Papaya" is also the beauty of Duke Huan of Qi. The defeat of Di people in the state of Wei came from Cao Cao, Duke Huan of Qi rescued it and sealed it, and the chariots, horses and utensils left behind. Wei. People think about it, and want to repay it generously, so they write poetry.” This statement was supported by Yan Can ("Shi Ji") and others in the Song Dynasty, and Wei Yuan ("Poetry Gu Wei") and others in the Qing Dynasty. According to Chen Qiaocong's textual research on the poems of the three schools roughly at the same time as Mao's theory, Lu's poems were "written as a gift for my ministers' thoughts and rewards." From Zhu Xi in the Song Dynasty, the theory of "mutual gifts and answers between men and women" became popular. The "Book of Poems" says: "If a speaker gave me a small thing, I should repay it with a treasure, but it is not enough to repay it, but I want it to be long. Think good but don't forget your ears.</p>
</div>
<div>
<p>Doubt is also a word that men and women give and answer, such as "Jing Nu" and the like. This reflects the spirit of innovation and suspicion of the Song Dynasty "Poetry" school of abolishing the preface. However, this statement was refuted by Yao Jiheng, one of the important representatives of the "Poetry" school of independent thinking in the Qing Dynasty. It is also impossible to give gifts to friends, why must they be men and women! "Modern scholars generally follow Zhu Xi's theory, and more clearly pointed out that this poem is a love poem. Therefore, there are many different opinions on the theme of the poem, and "papaya" as a literary image has been endowed with various symbolic meanings. The three images of "loyalty to the monarch", "a lover's love is as strong as gold and jade", "friends' gifts are less affectionate" have gradually become the mainstream connotation of the "papaya" image.</p>
<p>The poem "Papaya" is very distinctive in terms of the structure of the chapters and sentences. First of all, there is no four-character sentence, the most typical sentence pattern in The Book of Songs. It's not that it's impossible to use four-character sentences (for example, if you use a four-character sentence, it becomes "to vote for my papaya (peach, plum), and to repay Qiongju (yao, nine); the gangster thinks it will be rewarded, and it will always be good", it is the same), but The author intentionally or unintentionally uses this sentence pattern to create a kind of ups and downs, which is easy to achieve the effect of both voice and emotion when singing. Second, sentences have a very high degree of overlap and repetition. Don't say that the last two sentences of each chapter are exactly the same, even the first two sentences are only one word different, and although the words "Qiongju", "Qiong Yao" and "Qiongjiu" have slightly different meanings, they have the same meaning, while "papaya" and "wood peach" have the same meaning. According to Li Shizhen's "Compendium of Materia Medica", "Wood plum" is also a plant of the same genus. The difference between them is roughly like the difference between tangerine, tangerine, and orange. In this way, the three chapters are basically repeated, and such a high degree of repetition is not much in the whole "Book of Songs". It is determined by the duality of music and literature in The Book of Songs.</p>
<p>"You give me fruit, and I will give you jade in return"</p>
</div>
<div>
<p>
, different from "reciprocating peaches and plums", the value of the rewards is much greater than that of the gifts, which reflects a noble human emotion (including love, but also friendship). This kind of emotion focuses on mutual understanding and spiritual agreement, so the value of the gift and its value are actually only symbolic here. It shows the cherishment of other people's affection for oneself, so it is said that " The bandits reported it too". "Throw me papaya (peach, plum) and repay it with Qiongju (yao, Jiu)", its deep meaning should be: Although you throw me papaya (peach, plum), but your love is more expensive than Qiongju (Yao, Jiu); I will repay you with Qiongju (Yao, Jiu), and it is hard to express my gratitude to you in my heart. Qing Niu Yunzhen's "Poetry" commented on this saying: "For those who benefit more than papaya, they use papaya as a way to set off a lower level; Qiongyao is enough to repay it, but they say that bandit retribution is a layer of stripping." His words are not unreasonable, but other interpreters of this poem seem to have the same problem when they take things that have been basically abstracted, such as papaya and Qiongyao, too seriously. In fact, the author is so open-minded and open-minded that there is no heart to measure the thickness and importance. What he wants to express is: cherishing and understanding the affection of others is the most noble affection. From this point of view, in Zhang Heng's "Poetry of Four Sorrows" later in the Han Dynasty, "The beauty gave me a golden knife, how can I repay it to Ying Qiongyao", even though it said "throwing gold and repaying jade". Its meaning is actually the same as "Tou Mu Bao Qiong".
</p>
</div>
</div>
</div>
</div>
<div class="msgs_right">
<h1>Appreciation of pictures and texts</h1>
<ul>
<li>
<img src="picture/3.webp" alt="">
</li>
<li>
<img src="picture/4.webp" alt="">
</li>
<li>
<img src="picture/5.webp" alt="">
</li>
</ul>
</div>
</div>
<div class="yeshu">
<div class="number">
<a href="#">Previous page</a>
<a href="#" class="kaung">1</a>
<a href="#" class="kaung">2</a>
<a href="#" class="kaung">3</a>
<a href="#">Next</a>
</div>
</div>
<div class="banquanxinxi">
all rights reserved
</div>
</div>
</body>
</html>
CSS style code
* {<!-- -->
margin: 0px;
padding: 0px;
list-style: none;
}
body {<!-- -->
background-image: url(../image/17401.gif);
background-repeat: repeat;
}
.bigbox {<!-- -->
width: 1000px;
margin: 0 auto;
height: 200px;
}
.imglogo {<!-- -->
width: 200px;
margin: 0 auto;
margin-bottom: 20px;
}
.imglogo img {<!-- -->
width: 160px;
}
.banner {<!-- -->
width: 100%;
height: 450px;
background-image: url(../image/bg.jpg);
background-size: 100%;
}
.heard {<!-- -->
width: 800px;
height: 50px;
margin: 0 auto;
margin-bottom: 10px;
}
.heard a {<!-- -->
height: 48px;
line-height: 48px;
text-decoration: none;
display: inline-block;
width: 160px;
text-align: center;
margin-top: 1px;
color: black;
}
.heard a:not(:first-child) {<!-- -->
margin-left: 48px;
}
.heard a:hover {<!-- -->
background-color: rgba(117, 117, 117, 0.642);
}
.xinwenlist {<!-- -->
margin-top: 410px;
width: 1000px;
display: flex;
}
.xinwen_list {<!-- -->
width: 320px;
display: inline-block;
overflow: hidden;
}
.xinwen_list:not(:first-child) {<!-- -->
margin-left: 20px;
}
.xinwen_list h1 {<!-- -->
width: 100%;
background-color: black;
color: #fff;
font-size: 14px;
padding-left: 20px;
}
.xinwen_list ul {<!-- -->
width: 100%;
padding-top: 10px;
background-color: #fff;
padding-bottom: 10px;
}
.xinwen_list ul li::before {<!-- -->
margin-right: 10px;
margin-left: 20px;
content: '';
display: inline-block;
width: 0px;
height: 0px;
border-top: 4px solid transparent;
border-left: 4px solid red;
border-bottom: 4px solid transparent;
border-bottom: 4px solid transparent;
}
.xinwen_list ul li {<!-- -->
width: 250px;
height: 20px;
font-size: 12px;
line-height: 20px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.xinwen_list ul li:hover {<!-- -->
color: brown;
}
.msgs {<!-- -->
width: 1000px;
display: flex;
margin-top: 120px;
}
.msgs_left {<!-- -->
width: 700px;
margin-right: 10px;
background-color: #BEC6BF;
}
.title {<!-- -->
height: 28px;
line-height: 28px;
background-color: rosybrown;
}
.title a {<!-- -->
color: black;
text-decoration: none;
font-size: 12px;
}
.msgnei {<!-- -->
width: 96%;
padding-top: 1%;
margin-left: 1%;
padding-left: 1%;
padding-right: 1%;
margin-top: 10px;
}
.msgnei h1 {<!-- -->
width: 100%;
height: 28px;
font-size: 18px;
line-height: 28px;
background-color: chocolate;
text-align: center;
}
.neirong {<!-- -->
width: 100%;
display: flex;
}
.neirong p {<!-- -->
font-size: 14px;
}
.neirong div {<!-- -->
margin-top: 20px;
width: 33.4%;
}
.neirong div:nth-child(2) {<!-- -->
padding-left: 1%;
padding-right: 1%;
margin-left: 1%;
margin-right: 1%;
border-right: 1px dashed rgb(81, 81, 81);
border-left: 1px dashed rgb(81, 81, 81);
}
.neirong img {<!-- -->
width: 70%;
margin-left: 15%;
margin-top: 10px;
margin-bottom: 10px;
}
.shou:first-letter {<!-- -->
font-size: 28px;
font-weight: bold;
font-family: boldface;
}
.msgs_right {<!-- -->
width: 30%;
background-color: rgb(226, 226, 226);
overflow: hidden;
}
.msgs_right h1 {<!-- -->
width: 100%;
height: 28px;
font-size: 18px;
line-height: 28px;
background: linear-gradient(to bottom, #8C6D74, 52%, #B2A6BE);
padding-left: 20px;
margin-bottom: 20px;
}
.msgs_right ul {<!-- -->
width: 100%;
}
.msgs_right ul li {<!-- -->
width: 200px;
height: 90px;
overflow: hidden;
background-color: violet;
text-align: center;
margin-left: 45px;
margin-bottom: 70px;
}
.msgs_right ul li:first-child {<!-- -->
animation: donghua 0.5s infinite;
animation-delay: 1s linear;
animation-iteration-count: 1;
}
.msgs_right ul li:nth-child(2) {<!-- -->
animation: donghua 0.5s infinite;
animation-delay: 2s linear;
animation-delay: 2s;
animation-iteration-count: 1;
}
.msgs_right ul li:nth-child(3) {<!-- -->
animation: donghua 0.5s infinite;
animation-delay: 2s linear;
animation-delay: 3s;
animation-iteration-count: 1;
}
.msgs_right ul li img {<!-- -->
width: 100%;
}
@keyframes donghua {<!-- -->
from {<!-- -->
width: 200px;
height: 90px;
margin-left: 45px;
margin-bottom: 70px;
}
to {<!-- -->
width: 220px;
height: 99px;
margin-left: 40px;
margin-bottom: 66px;
}
}
.yeshu {<!-- -->
width: 1000px;
margin: 0 auto;
background-color: #fff
}
.number {<!-- -->
width: 693px;
height: 50px;
background-color: #fff;
text-align: center;
line-height: 50px;
}
.number a {<!-- -->
text-decoration: none;
}
.kaung {<!-- -->
display: inline-block;
height: 20px;
width: 30px;
border: 1px solid #ccc;
background-color: rgb(209, 209, 209);
position: relative;
line-height: 20px;
}
.banquanxinxi {<!-- -->
width: 1000px;
text-align: center;
font-size: 14px;
background-color: #fff;
line-height: 40px;
}
6. How to make learning no longer blind
First, learn with goals, whether reading books, newspapers or various offline activities.
First of all, you must clarify what your learning goals are, what problems you want to solve, and what goals you want to achieve.
Second, learning should establish a personal knowledge system
Knowledge is endless, and books are vast. When we wander in it to our heart’s content, we must not be drowned by the sea, because we have no self. In the process of learning, we will find that every knowledge point has its boundaries and background, we must be good at summarizing knowledge
Third, use what you have learned
Sometimes, we feel that we have learned a lot of dry goods in a day, so we must connect these knowledge points with actual work and life. Knowledge and practice are closely related to each other. It is a good thing to love learning, but only those who can learn are valuable.
7. More dry goods
1. If my blog is helpful to you, if you like my blog content, Please "Like" "Comment" "Favorite" One click and three links!
2. 【?Follow me | Get more source code | High-quality articles】 Take you to learn various front-end plug-ins, 3D cool effects, Picture display, text effects, and templates for the whole site, HTML templates for college graduates, final homework templates, etc. “There are a lot of front-end developers here, let’s discuss front-end Node knowledge and learn from each other”!
3.
Questions related to the above content technology? Welcome to exchange and learn together?
