About my hometown html web design full version Design and implementation of home-themed web pages

Three core technologies of Web front-end

  1. HTML: Structural
    HTML end-of-term webpage design assignment for college students, you can replace text and pictures to meet different needs

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

  3. JavaScript: do interactive behavior with the user


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: css all page styles, text scrolling, image zoom, etc.;
(3) js file: js realizes dynamic carousel special effects , form submission, click event, etc. (js code is used in the web page)
to describe the theme of web design, DIV+CSS layout production, HTML+CSS web design end-of-term course work, the code is simple and 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, banner is generally 5) (2) Secondary page: After clicking to enter from the  
homepage The page is called the second-level 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 a home page composed of web pages : the home page is the entry
page of a website, so it is often edited to make it easy to understand . The top or side area, also known as the navigation bar, plays the role of linking various pages in the site or software.
Web page footer : It is the area at the bottom of each page in the web page. Often used to display additional information. Such as author, record number, etc.


web demo

insert image description here
insert image description here
insert image description here
insert image description here
insert image description here
insert image description here

Website source code

HTML structure code


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>昆明网</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>昆明</span></a>
			</li>
			<li class="lang"><b>一城山水 一城春色</b></li>
		</ul>
	</div>
	
	<div class="nav">
		<ul>
			<li><a href="index.html">昆明首页</a></li>
			<li><a href="info.html">城市简介</a></li>
			<li><a href="area.html">行政区划</a></li>
			<li><a href="place.html">地理环境</a></li>
			<li><a href="nature.html">自然资源</a></li>
			<li><a href="history.html">历史文化</a></li>
			<li><a href="good.html">地方特产</a></li>
			<li><a href="tour.html">风景名胜</a></li>
			<li><a href="register.html">用户注册</a></li>
			<li><a href="login.html">用户登录</a></li>
		</ul>
	</div>
		
    <div class="wrapper">
	
		<div class="main">
	
			<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>
				</ul>                
				<ul id="focus_button" class="focus_button">
					<li class="on"></li>
					<li></li>
				</ul>
			</div>
			
			<div class="item">
				<b>城市简介</b>
				<a href="info.html"><img src="images/info.jpg"/></a>
				<p><a href="info.html">昆明,别称春城,是云南省省会、滇中城市群中心城市,国务院批复确定的中国西部地区重要的中心城市之一。截至2019年,全市下辖7个区、3个县、代管1个县级市和3个自治县。</a></p>
			</div>
			
			<div class="item">
				<b>行政区划</b>
				<a href="area.html"><img src="images/area1.jpg"/></a>
				<p><a href="area.html">2016年11月24日,晋宁县撤县设区。昆明市辖14个县级行政区划单位(市辖区7,县级市1,县6),139个乡级行政区划单位(街道80,镇43,乡16)。昆明市人民政府驻呈贡区锦绣大街1号。</a></p>
			</div>
			
			<div class="line">
				<p>
					<b>地理环境</b>
					<span><a href="place.html">昆明位于中国西南云贵高原中部。南濒滇池,三面环山,滇池平原。昆明是中国面向东南亚、南亚乃至中东、南欧、非洲的前沿和门户,具有东连黔桂通沿海,北经川渝进中原,南下越老达泰柬,西接缅甸连印巴的独特区位优势。总面积21012.54平方千米。昆明属北纬低纬度亚热带-高原山地季风气候,由于受印度洋西南暖湿气流的影响,日照长、霜期短、年平均气温15℃,年均日照2200小时左右,无霜期240天以上。气候温和,夏无酷暑,冬无严寒,四季如春,气候宜人,年降水量1035mm。昆明市中心海拔约1891m。拱王山马鬃岭为昆明境内最高点,金沙江与普渡河汇合处为昆明境内最低点。</a></span>
				</p>
				<a href="place.html"><img src="images/place.jpg"/></a>
			</div>
			
			<div class="line">
				<a href="nature.html"><img src="images/nature.jpg"/></a>
				<p>
					<b>自然资源</b>
					<span><a href="nature.html">昆明地区水资源主要由地表水和地下水两大部份组成。水资源总量虽不少,但人均占有量较低。全市多年平均年径流量为73.1亿立方米,人均年占有水量1440立方米,每亩耕地年占有水量2070立方米,低于全国、全省的水平,属于资源性贫水地区。且时空分布不均匀,水质污染也较严重。昆明属高原红壤地区,土壤主要有红壤、紫色土和水稻土三类,适宜种植稻谷、小麦、蚕豆、玉米、马铃薯等粮食作物和油菜、烤烟、蔬菜、花卉等经济作物及桃、梨、苹果、柑桔、葡萄、板栗等经济林木。昆明市自然资源十分丰富。矿产资源主要有磷、盐、铁、钛、煤、石英砂、铝土、硅石等,其中以磷、盐、铁矿最为丰富。</a></span>
				</p>
			</div>
			
			<div class="list">
				<b>历史文化</b>
				<a href="history.html"><img src="images/history.jpg"/></a>
				<p><a href="history.html">“昆明”作为地名出现,则是在唐代。“武德二年,于镇置昆明县,盖南接昆明之地,因此为名。”按此处置昆明县,非今之昆明,乃四川定笮镇。</a></p>
			</div>
			
			<div class="list">
				<b>地方特产</b>
				<a href="good.html"><img src="images/good.jpg"/></a>
				<p><a href="good.html">云南山茶花也叫滇山茶,南山茶、大茶花,其树体较高大,荫浓叶阔,花朵硕大,生长过程中的叶子,有其典型的特性云南山茶花,是中国传统花木之一。</a></p>
			</div>
			
			<div class="list">
				<b>风景名胜</b>
				<a href="tour.html"><img src="images/tour1.jpg"/></a>
				<p><a href="tour.html">滇池,亦称昆明湖、昆明池、滇南泽、滇海。在昆明市西南,有盘龙江等河流注入,湖水在西南海口洩出,云南省最大的淡水湖,有高原明珠之称。</a></p>
			</div>
			
			<div class="list">
				<b>社会事业</b>
				<a href="info.html"><img src="images/honor.jpg"/></a>
				<p><a href="info.html">中国昆明进出口商品交易会、中国国际旅游交易会、中国昆明国际旅游节主要的会展城市之一。2018年,中国大陆最佳商业城市排名第23名。</a></p>
			</div>
			
		</div>
		
    </div>
	
	<div class="footer">Copyright @ 2022 kunming.com 昆明网 版权所有</div>
	
</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 and direct them hand in hand. At that time, I am afraid you will exclaim: This is it?

So, relax and enjoy your college time
—————————————————


learn more

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


insert image description here

Guess you like

Origin blog.csdn.net/m0_65484028/article/details/127852488