About my hometown html webpage design full version Hometown-themed webpage design and implementation

Three core technologies of Web front end

  1. HTML: structure
    HTML web design homework for college students at the end of the period, you can replace text and pictures to meet different needs

  2. CSS: styles
    In terms of operation, html5 and css3 are used,
    Basic knowledge such as div + css structure, form, hyperlink, float, absolute positioning, relative positioning, font style, reference video, etc. are adopted

  3. JavaScript: do interactive behavior with the user

Article directory

  • Front-end learning route
  • Basic structure of web page
  • web demo
  • Website source code
    • HTML structure code
  • The more you learn, the more confused you become
  • learn more

Front-end learning route

(1) html file: where index.html is the home page, and other html is the second-level page;
(2) css file: all css page styles, text scrolling, image zooming, etc.;
(3) js file: js realizes dynamic carousel effects, form submission, click events, etc. (js code is used in web pages)
Description Web design theme, DIV + CSS layout production, HTML + CSS web design final course assignment, simple code, student level, suitable for beginners to learn and use.

Basic structure of web page

(1) Homepage: The first page you see when you enter the webpage (LOGO, company name, navigation, banner, news, related information, bottom information, and banner are generally 5.
(2) Secondary page: the page after clicking from the home page is called the secondary page
(3) Third-level page: the page clicked from the second-level page

Web page html: A web page is the basic element of a website and a platform for carrying various website applications. In layman’s terms, a website is made up of web pages
Homepage website: The homepage is the entrance page of a website, so it is often edited to make it easy to understand. Most of the files on the website as the homepage are named index plus extension
Navigation menu: refers to the area at the top or side of the page, also known as the navigation bar, which acts as a link to various pages in the site or software.
Web page footer: is the area at the bottom of each page in a web page. Often used to display additional information. Such as author, record number, etc.

Web page demo






Website source code

HTML structure code

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Kunming Net</title>
<link rel="stylesheet" type="text/css" href="css/common.css"/>
<script type="text/javascript" src="js/rotate.js"></script>
</head>

<body>

<div class="container">

<div class="header">
<ul>
<li class="logo">
<a href="index.html"><img src="images/logo.png"/><span>Kunming</span></a>
\t\t\t</li>
<li class="lang"><b>A city of mountains and rivers, a city of spring</b></li>
\t\t</ul>
</div>
\t
<div class="nav">
<ul>
<li><a href="index.html">Kunming Homepage</a></li>
<li><a href="info.html">City Profile</a></li>
<li><a href="area.html">Administrative divisions</a></li>
<li><a href="place.html">Geography</a></li>
<li><a href="nature.html">Natural Resources</a></li>
<li><a href="history.html">History and Culture</a></li>
<li><a href="good.html">Local specialties</a></li>
<li><a href="tour.html">Scenic attractions</a></li>
<li><a href="register.html">User Registration</a></li>
<li><a href="login.html">User Login</a></li>
\t\t</ul>
</div>
\t\t
    <div class="wrapper">
\t
<div class="main">
\t
<div id="focus" class="focus">
<ul id="focus_image" class="focus_image">
<li class="now"><a href="info.html"><img src="images/focus1.jpg"/></a></li>
<li><a href="area.html"><img src="images/focus2.jpg"/></a></li>
\t\t\t\t</ul>
<ul id="focus_button" class="focus_button">
<li class="on"></li>
<li></li>
\t\t\t\t</ul>
</div>
\t\t\t
<div class="item">
<b>City Profile</b>
<a href="info.html"><img src="images/info.jpg"/></a>
<p><a href="info.html">Kunming, also known as Spring City, is the capital of Yunnan Province and the central city of the central Yunnan urban agglomeration. It is one of the important central cities in western China approved by the State Council. As of 2019, the city has jurisdiction over 7 districts, 3 counties, 1 county-level city and 3 autonomous counties. </a></p>
</div>
\t\t\t
<div class="item">
<b>Administrative divisions</b>
<a href="area.html"><img src="images/area1.jpg"/></a>
<p><a href="area.html">On November 24, 2016, Jinning County was withdrawn from the county and established as a district. Kunming has jurisdiction over 14 county-level administrative divisions (7 municipal districts, 1 county-level city, and 6 counties), and 139 township-level administrative divisions (80 streets, 43 towns, and 16 townships). Kunming Municipal People's Government is located at No. 1 Jinxiu Street, Chenggong District. </a></p>
</div>
\t\t\t
<div class="line">
<p>
<b>Geography</b>
<span><a href="place.html">Kunming is located in the middle of the Yunnan-Guizhou Plateau in southwest China. It is adjacent to Dianchi Lake in the south, surrounded by mountains on three sides, and Dianchi Lake Plain. Kunming is China's frontier and gateway to Southeast Asia, South Asia, and even the Middle East, Southern Europe, and Africa. It has the unique geographical advantages of connecting Guizhou, Guizhou and the coastal areas in the east, entering the Central Plains through Sichuan and Chongqing in the north, going south to Vietnam, Laos, Thailand and Cambodia, and connecting Myanmar to India and Pakistan in the west. . The total area is 21012.54 square kilometers. Kunming has a subtropical-plateau mountain monsoon climate at low latitudes in the north. Due to the influence of the warm and humid airflow in the southwest of the Indian Ocean, it has long sunshine, short frost period, an annual average temperature of 15°C, an average annual sunshine of about 2200 hours, and a frost-free period of more than 240 days. The climate is mild, there is no severe heat in summer, no severe cold in winter, and the four seasons are like spring. The climate is pleasant and the annual precipitation is 1035mm. Kunming city center is about 1891m above sea level. Mazong Ridge of Gongwang Mountain is the highest point in Kunming, and the confluence of Jinsha River and Pudu River is the lowest point in Kunming. </a></span>
\t\t\t\t</p>
<a href="place.html"><img src="images/place.jpg"/></a>
</div>
\t\t\t
<div class="line">
<a href="nature.html"><img src="images/nature.jpg"/></a>
<p>
<b>Natural resources</b>
<span><a href="nature.html">Water resources in Kunming are mainly composed of surface water and groundwater. Although the total amount of water resources is quite large, the per capita share is relatively low. The city's average annual runoff for many years is 7.31 billion cubic meters, the per capita annual water volume is 1,440 cubic meters, and the annual water volume per mu of cultivated land is 2,070 cubic meters, which is lower than the national and provincial levels. It belongs to resource-poor water areas. Moreover, the spatial and temporal distribution is uneven, and the water pollution is also serious. Kunming belongs to the plateau red soil area. The soil mainly includes red soil, purple soil and paddy soil. It is suitable for planting rice, wheat, broad beans, corn, potatoes and other food crops, rapeseed, flue-cured tobacco, vegetables, flowers and other economic crops, as well as peaches, pears and apples. , citrus, grape, chestnut and other economic trees. Kunming is rich in natural resources. Mineral resources mainly include phosphorus, salt, iron, titanium, coal, quartz sand, bauxite, silica, etc., among which phosphorus, salt, and iron ore are the most abundant. </a></span>
\t\t\t\t</p>
</div>
\t\t\t
<div class="list">
<b>History and Culture</b>
<a href="history.html"><img src="images/history.jpg"/></a>
<p><a href="history.html">"Kunming" appeared as a place name in the Tang Dynasty. "In the second year of Wude, Kunming County was established in the town, and the land connecting Kunming to the south was named after it." According to this, Kunming County was not the present Kunming, but Dingze Town in Sichuan. </a></p>
</div>
\t\t\t
<div class="list">
<b>Local specialties</b>
<a href="good.html"><img src="images/good.jpg"/></a>
<p><a href="good.html">Camellia yunnanensis is also called Camellia yunnanensis, camellia nannanensis, and camellia chinensis. The tree is tall and large, with thick shade and broad leaves, and large flowers. The leaves in the process of growth have their typical characteristics of camellia yunnanensis , is one of the traditional Chinese flowers and trees. </a></p>
</div>
\t\t\t
<div class="list">
<b>Scenic spots</b>
<a href="tour.html"><img src="images/tour1.jpg"/></a>
<p><a href="tour.html">Dianchi Lake is also known as Kunming Lake, Kunming Lake, Diannan Lake, and Dianhai Lake. In the southwest of Kunming, there are rivers such as the Panlong River flowing into it, and the lake water is released in the southwest seaport. It is the largest freshwater lake in Yunnan Province and is known as the Pearl of the Plateau. </a></p>
</div>
\t\t\t
<div class="list">
<b>Social business</b>
<a href="info.html"><img src="images/honor.jpg"/></a>
<p><a href="info.html">One of the main exhibition cities of China Kunming Import and Export Commodities Fair, China International Travel Fair, and China Kunming International Tourism Festival. In 2018, the best commercial city in mainland China ranked 23rd. </a></p>
</div>
\t\t\t
</div>
\t\t
    </div>
\t
<div class="footer">Copyright @ 2022 kunming.com All Rights Reserved</div>
\t
</div>

</body>
</html>



The more you learn, the more confused you become

It’s normal to feel this way, because you haven’t really been in the company, and you don’t know how much you need to learn to be competent for the work assigned to you in the company. I can see from your statement that your foundation should still be very solid. There is definitely no problem following the full set of video tutorials on the Internet.

When you actually enter the company in the future and find that the difficulty and amount of work are only about 20% of your study period, you may sigh: So the work is nothing more than that.

This is normal, because most companies recruit you to work and write business, not to let you be a newcomer to develop the company structure. They are all ready-made things. What you have to do is to add bricks and tiles under the guidance of others. At that time, I am afraid you will exclaim: This is it?

So just relax and enjoy college
—————–

Learn more

Follow me | Like blog posts | Take you to increase your knowledge every day
Related issues can learn from each other, you can pay attention to ↓ public Z number