Hometown scenic spots homework production web page code uses the use of DIV box, such as the use of the box's nesting, floating, margin, border, background s and other attributes, the external large box set in the center, the internal left-middle-right layout, the horizontal floating arrangement below, the front-end knowledge points and layout methods of university learning are used, CSS code is also sufficient and detailed, using hover to complete the transition effect, For the convenience of beginners who don't use js in the learning pages, you can add it yourself by using tables, form supplementary modules, etc.
1. Introduction to Web Pages π
1. Introduction to Web Page: This work is designed for students'personal homepage with themes, HTML+CSS layout, big homework at the end of the web, source code for undergraduate homepage design. It is a good web page production with a clear picture and simple code for students. It is very suitable for beginners to learn and use.
2. Web page editing: Web page work code is simple and can be edited using any HTML editing software (such as Dreamweaver, HBuilder, Vscode, Sublime, Webstorm, Text, Notepad+, etc.).
3. Knowledge application: The technology mainly applies the knowledge of web pages: Div+CSS, mouse-over effects, Table, navigation bar effects, Banner, forms, secondary and tertiary pages, video, audio elements, Flash, and designed the knowledge points needed for Logo (source file).
1. Web Page Effect π
2. Code Display π
1.HTML structure code π§±
The code is as follows (example): Here is only a partial code for reference~
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Three of the above meta Label*Must*On top, anything else*Must*Follow it! -->
<title>My Home Page</title>
<!-- Bootstrap -->
<link href="./css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="CSS/style.css">
<link rel="stylesheet" href="css/animate.min.css">
<!-- HTML5 shim and Respond.js Is to allow IE8 Support HTML5 Element and media queries ( media queries)function -->
<!-- Warning: Pass file:// Respond when the protocol (that is, drag the html page directly into the browser) accesses the page. JS doesn't work -->
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="wrap">
<!-- header Part -->
<div class="header">
<div class="content">
<div class="header-left">
<h3>My hometown</h3>
</div>
<div class="header-mid">
<ul id="nav" class="animated fadeInLeft">
<li class="active"><a href="./index.html"><span>home page</span></a></li>
<li><a href="./food.html" title="html"><span>Delicious food</span></a></li>
<li><a href="./scenery.html" title="html"><span>Scenic spot</span></a></li>
<li><a href="./custom.html" title="html"><span>folk custom</span></a></li>
</ul>
</div>
<div class="header-right">
<a href="https://baike.baidu.com/item/Chengdu/128473? Fr=aladdin "><button>Welcome</button></a>
</div>
</div>
</div>
<!-- introduction Part -->
<div class="introduction">
<div class="content">
<div class="introduction-left">
<h3>Chengdu, Sichuan</h3>
<h4>A city you don't want to walk after it comes</h4>
</div>
<div class="introduction-mid">
<h3>Orion of the Name</h3>
<p>"The origin of Chengdu, according to the records of Taiping Laoyu Ji, is the historical process of building the capital by borrowing from the Western Zhou Dynasty. The King of the Zhou moved to Qi, lived and gathered in one year, became a city in two years, and got the name of Shu Capital in three years.
The pronunciation of Chengdu is the capital of Shu. Chengdu means the final capital of Shu, or the last capital.</p>
<img src="img/zi.jpg" alt="Chengdu">
<p>The earliest word "Chengdu"</p>
</div>
<div class="introduction-right">
<h3>alias</h3>
<h5>Rongcheng, Jincheng, Furong, Jinguancheng, Tianfu Kingdom</h5>
</div>
</div>
</div>
<!-- plant Part -->
<div class="plant">
<div class="content">
<div class="container">
<div class="page-header">
<h1>Flowers and Trees</h1>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-3 animated slideInLeft">
<div class="thumbnail">
<img src="img/hua.jpg" alt="">
<div class="caption">
<h2>City Flower-origin</h2>
<p>Meng Biao, the emperor of Shu after the Five Dynasties, planted Hibiscus flowers in the head of Chengdu City. Chengdu has since been known as "Hibiscus City".
On May 26, 1983, the Standing Committee of the Ninth People's Congress of Chengdu decided to officially name Hibiscus Hibiscus as the city flower of Chengdu.</p>
</div>
</div>
</div>
<div class="col-md-3 animated slideInLeft">
<div class="thumbnail">
<img src="img/hua2.jpg" alt="">
<div class="caption">
<h2>City Flower-Allusion</h2>
<p>Meng Yan, the emperor of Shu after the Five Dynasties, has the concubine's name "Mrs. Stamen". She is charming and charming, but also loves flowers. One year she went to the flower market. Among the flowers, she saw a cluster of hibiscus flowers rolling up like clouds in the sky. She liked it very much.
Meng Biao also issued an edict to treat his concubine as a kind of Hibiscus at the end of Chengdu. In October of the twelfth year of Guangzhen, Meng Bing's greening city project was completed successfully. He took Mrs. Stamen to the city building and watched the red flowers for decades.
Chengdu has been known as "Furong City" since then because of the Chengdu Mu Hibiscus flower which shines in the morning clouds.</p>
</div>
</div>
</div>
<div class="col-md-3 animated slideInLeft">
<div class="thumbnail">
<img src="img/shu2.jpg" alt="">
<div class="caption">
<h2>City Tree-introduce</h2>
<p>The oldest Ginkgo biloba in the main urban area of Chengdu is located in Baihuatan Park, with a tree age of 1700 years. Greater than the Tang Dynasty, it was burned in the late Ming Dynasty, lightning struck in the Qing Dynasty, and its fate was bad, but now it is still flourishing.
This Ancient Ginkgo tree, No. 0371, was excavated and transplanted in 1983 near Guanyin Temple in Xuankou Town, Wenchuan County, Aba. On May 26, 1983, the Standing Committee of the Ninth People's Congress of Chengdu decided to
Furong flower is officially named Chengdu city flower and ginkgo tree is Chengdu city tree.</p>
</div>
</div>
</div>
<div class="col-md-3 animated slideInLeft">
<div class="thumbnail">
<img src="img/shu.png" alt="">
<div class="caption">
<h2>City Tree-introduce</h2>
<p>The oldest Ginkgo biloba in Chengdu is located in Tianshi Cave in Qingcheng Mountain, with a tree age of 2500 years. According to Zhang Xin and Master of Tianshidong, it is said that this ancient ginkgo was planted by Zhang Tianshi's obsolete road 2000 years ago.
The old ginkgo is over 20 meters tall. It takes 8 adults to wrap around the trunk by hand. This "Shenshu" was named the first of "Ten Ancient Trees and Famous Trees in Chengdu" as early as the 2006 Chengdu Census of Ancient Trees and Famous Trees,
2011 In 2006, it was also rated as "the first-grade ancient trees in Chengdu". The 9th day of September in the lunar calendar is designated as "Municipal Flower Tree Day" in Chengdu. Experts from the Sichuan Forestry Society believe that if ginkgo is upgraded to a national tree, it will be another business card in Chengdu.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- place Part -->
<div class="place">
<div class="content">
<div class="place-left">
<h2>geographical environment>></h2>
<p>Chengdu is located in the west of the Sichuan Basin, on the eastern edge of the Tibetan Plateau, adjacent to Deyang in the northeast, Ziyang in the southeast, Meishan in the south, and Yaan in the southwest and Aba in the northwest.
Geographic location between 102 E.M.Β°54β²~104Β°53β²,North latitude 30Β°05β²~31Β°26β²Between. In 2016, the city's land area is 14335 square kilometers, and the urban area is 4241.81 Square kilometers with built-up area of 931.58 Square kilometre.</p>
</div>
<div class="place-right">
<h3>administrative division>></h3>
<img src="img/qu.jpg" alt="">
<p>Chengdu municipality has 20 county-level administrative divisional units (12 municipal districts, 5 county-level cities, 3 county), 261 township-level administrative divisional units (161 streets, 100 towns). With an area of 14,335 square kilometers and a population of 16,330,000 people.</p>
</div>
</div>
</div><br>
<!-- poetry Part -->
<div class="poetry">
<div class="content">
<div class="container">
<div class="page-header">
<h1>Meet Chengdu</h1>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="caption">
<h3>Tang Zhangji's Chengdu Opera</h3>
<p>Jinjiang is green with smoke and water, and litchi is ripe in Xinyushan.</p>
<p>There are many restaurants near Wanli Bridge. To whom do visitors like to stay?</p>
</div>
</div>
<div class="col-md-4">
<div class="caption">
<h3>Du Fu's Happy Rain on Spring Night</h3>
<p>Good rain knows the time, and spring happens.</p>
<p>Dive into the night with the wind and the moisturizer is silent.</p>
<p>The wild trails are black with clouds and the rivers and ships are bright with fire.</p>
<p>When it is dawn, the damp soil will be covered with red petals, and there will be countless colorful flowers in the streets and alleys.</p>
</div>
</div>
<div class="col-md-4">
<div class="caption">
<h3>Cen Shen Wan Li Qiao</h3>
<p>Chengdu and Weiyang are thousands of miles away.</p>
<p>Cangjiang is flowing eastward and sailing is like a bird's wing.</p>
<p>Chuke crossed the bridge and saw tears in the east.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery (Bootstrap All JavaScript Plug-ins are dependent jQueryοΌSo it has to be on the front) -->
<script src="./js/jquery.min.js"></script>
<!-- Load Bootstrap All JavaScript Plug-in unit. You can also load only a single plug-in as needed. -->
<script src="./js/bootstrap.min.js"></script>
</body>
</html>
2.CSS Style Code π
*{
margin: 0;
padding: 0;
}
.header{
background-color: black;
color: white;
height: 80px;
}
.content{
width: 90%;
margin: 0 auto;
overflow: hidden;
}
.header-left{
width: 30%;
float: left;
}
.header-left h3{
color: gray;
}
.header-mid{
width: 40%;
float: left;
font-size: large;
}
.header-mid ul{
list-style: none;
overflow: hidden;
}
.header-mid ul li{
float: left;
width: 25%;
text-align: center;
}
.header-mid ul li.active a{
color: red;
}
.header-mid a{
color: white;
text-decoration: none;
line-height: 80px;
}
.header-right{
width: 30%;
float: left;
}
.header-right button{
width: 100px;
height: 40px;
margin-top: 20px;
border-radius: 10px;
background-color: transparent;
color: white;
cursor: pointer;
float: right;
}
.header-right button:hover{
background-color: #c85353;
color: black;
}
.introduction{
background-color: grey;
color: white;
}
.introduction-left{
width: 30%;
float: left;
}
.introduction-left h3{
margin: 100px 0 30px;
font-weight: 300;
font-size: 30px;
}
.introduction-mid{
width: 30%;
float: left;
}
.introduction-right{
width: 40%;
float: right;
}
.introduction-right h3{
margin: 100px 0 30px;
font-weight: 300;
font-size: 30px;
margin-left: 250px;
}
.introduction-right h5{
font-weight: 300;
font-size: 20px;
margin-left: 220px;
}
.place-left{
width: 40%;
float: left;
}
.place-left h2{
font-size: 30px;
font-weight: 400;
margin-right: 20px;
}
.place-left p{
font-size: 20px;
margin-right: 10px;
}
.place-right{
width: 50%;
float: right;
}
.place-right p{
font-size: 20px;
}
.place-right img{
width: 50%;
}
.poetry{
background-color: #333435;
color: white;
padding: 40px 0 0;
}
.poetry p{
font-size: 20px;
}
.food-one {
background-color: white;
padding: 40px 0;
}
.food-one-left{
float: left;
width: 40%;
margin-top: 50px;
}
.food-one-left p {
text-align: center;
font-size: 20px;
margin: 5px;
}
.food-one-left img {
width: 80%;
}
.food-one-right {
float: right;
width: 60%;
}
.food-one-right h1 {
font-size: 40px;
font-weight: 200;
margin-bottom: 20px;
}
.food-one-right hr {
border: 1px solid red;
width: 80px;
margin-bottom: 20px;
}
.food-one-right p {
line-height: 28px;
font-size: 14px;
text-indent: 28px;
margin-bottom: 20px;
}
.food-two {
background-color: white;
padding: 40px 0;
}
.food-two-left{
float: left;
width: 40%;
margin-top: 50px;
}
.food-two-left p {
text-align: center;
font-size: 20px;
margin: 5px;
}
.food-two-left img {
width: 80%;
}
.food-two-right {
float: right;
width: 60%;
}
.food-two-right h1 {
font-size: 40px;
font-weight: 200;
margin-bottom: 20px;
}
.food-two-right hr {
border: 1px solid red;
width: 80px;
margin-bottom: 20px;
}
.food-two-right p {
line-height: 28px;
font-size: 14px;
text-indent: 28px;
margin-bottom: 20px;
}
.food-three {
background-color: white;
padding: 40px 0;
}
.food-three-left{
float: left;
width: 40%;
margin-top: 50px;
}
.food-three-left p {
text-align: center;
font-size: 20px;
margin: 5px;
}
.food-three-left img {
width: 80%;
}
.food-three-right {
float: right;
width: 60%;
}
.food-three-right h1 {
font-size: 40px;
font-weight: 200;
margin-bottom: 20px;
}
.food-three-right hr {
border: 1px solid red;
width: 80px;
margin-bottom: 20px;
}
.food-three-right p {
line-height: 28px;
font-size: 14px;
text-indent: 28px;
margin-bottom: 20px;
}
3. Personal Summary π
A set of qualified pages should contain (depending on individual requirements)
- The page is divided into four parts: the header, the menu navigation bar (preferably drop-down), the middle content section, and the footer.
- All pages are hyperlinked to each other, up to three-level pages, consisting of 5-10 pages;
- Page style uniform layout display normal, not messy, using Div+Css technology;
- The menu is beautiful and striking, and the secondary menu can pop up and jump normally.
- To have JS special effects, such as timer switching and manual switching of picture news;
- There are multimedia elements on the page, such as gif, video, music, the use of form technology;
- The pages are refreshing, beautiful and generous.
- The front-end program of the website should not only be able to present the content required by users, but also satisfy the requirements of good layout, beautiful interface, elegant color matching and diverse forms of expression.
4. More Dry Goods π
1. If my blog is helpful to you and if you like my blog content, please " π Zan"" βοΈ Comments"" π Collection "One button, three links!"
2. β€οΈ [ ππ»ππ»ππ» Keep an eye on me | Get more sources | Quality articles] Take you to learn about various front-end plug-ins, 3D cool effects, picture display, text effects, and site-wide templates, college graduate HTML templates, large homework templates, and so on! "There are many front-end developers here who are exploring front-end Node knowledge and learning from each other."
3. The above content technology related issues π Welcome to exchange learning ππ»ππ»ππ»π₯!
π [Access]
gitee Cloud Source Warehouse - Welcome to Star: https://gitee.com/zhanyuqiu2022/my-app