current position:Home>Make a beautiful and simple personal web page with HTML + CSS ~ personal photo album introduction personal home page template (6 pages) ~ students' HTML personal web page homework works~

Make a beautiful and simple personal web page with HTML + CSS ~ personal photo album introduction personal home page template (6 pages) ~ students' HTML personal web page homework works~

2021-08-22 22:52:41 @. code out the future

use HTML+CSS Make a beautiful and simple personal web page ~ Personal album introduction personal home page template (6 A page ) Student HTML Personal web work

Towards the end of the term , You're still working on HTML Web design homework , The teacher's homework requirements are big ?HTML There is no way to start web homework ? The total number of pages required is too much ? No suitable template ? And so on and so forth . The problem you want to solve , In this blog post, you can basically meet your needs ~

original HTML+CSS+JS Page design , web College students web design homework source code , This is a good web page making , Smart picture , Very suitable for beginners to learn to use .

Introduction to works

1. Introduction to web works : Black Universal IT Programmer information exchange personal blog website template . You can download what you like , The article page supports mobile phones PC Responsive layout . There are mainly : Sign in 、 register 、 Home page 、 Mars member 、 The huazi family Contact us Wait a total 6 A page html download .

2. Web work editing : This work is the subject matter of students' personal home page design , The code is simple student level html+css Layout making , After downloading the works, you can use any HTML Edit software ( for example :DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm All editors are available )

3. The layout of web works : The overall layout of the web page is LOGO、 Navigation 、 Main content layout . There are many layouts of sub pages , Interest content uses picture list layout , The score page inserts a table , Contact us to set the left alignment using the image alignment .

4. Technical aspects of web works : Use CSS Made a background picture of the web page 、 Color change effect of mouse passing and selected navigation 、 Underline, etc . The home page has made a message form , At the same time, it is easy to use JavaScript Made a form to judge ( The form cannot be empty when submitting )

One 、 Demonstration of works

1. home page

 Insert picture description here

2. Mars member

 Insert picture description here

3. Huazi has a family

 Insert picture description here

4. Contact us

 Insert picture description here

5. Sign in / register

 Insert picture description here
 Insert picture description here

Two 、 Code directory

 Insert picture description here

3、 ... and 、 Code implementation


<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
	<title>Born to love</title>
	<!--  Sliding plug-in library  -->
	<link rel="stylesheet" type="text/css" href="css/animate.css">
	<!-- bootstrap -->
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<!--  Own style  -->
	<link rel="stylesheet" href="css/style.css">
	<!--  Public style  -->
	<link rel="stylesheet" href="css/reset.css">
</head>
<body>

	<header id="header" class="header">
		<nav class="navbar navbar-default navbar-fixed-top">
			<div class="container">
				<div class="navbar-header">
					<a href="index.html" class="navbar-brand logo hidden-xs">
						<img src="images/logo.png" alt="logo" class="img-responsive">
					</a>
					<a href="index.html" class="navbar-brand logo hidden-md hidden-sm hidden-lg">Born to love</a>
					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
				</div>
				<div class="collapse navbar-collapse" id="navbar-collapse">
					<ul class="nav navbar-nav navbar-right">
						<li class=""><a href="index.html"> home page </a></li>
						<li><a href="team.html"> Mars member </a></li>
						<li><a href="activity.html"> The Chinese family has a son </a></li>
						<li><a href="us.html"> Contact us </a></li>
						<li><a href="login.html"> Sign in </a></li>
						<li><a href="register.html"> register </a></li>
					</ul>
				</div>
			</div>
		</nav>
	</header>

	<section>
		<div id="myCarousel" class="carousel slide wow fadeInDown">
			<ul class="carousel-indicators">
				<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
				<li data-target="#myCarousel" data-slide-to="1"></li>
				<li data-target="#myCarousel" data-slide-to="2"></li>
			</ul>
			<div class="carousel-inner">
				<div class="item active">
					<img src="images/lunbo2.jpg" alt=" The first one " class="img-responsive">
				</div>
				<div class="item">
					<img src="images/lunbo3.jpg" alt=" The second " class="img-responsive">
				</div>
				<div class="item">
					<img src="images/lunbo1.jpg" alt=" Third sheets " class="img-responsive">
				</div>
			</div>
			<a href="#myCarousel" data-slide="prev" class="carousel-control left">
				<span class="glyphicon glyphicon-chevron-left"></span>
			</a>
			<a href="#myCarousel" data-slide="next" class="carousel-control right">
				<span class="glyphicon glyphicon-chevron-right"></span>
			</a>
		</div>
	</section>


	<section id="welcome">
		<div class="container">
			<div class="col-md-12">
				<div class="welcome-title text-center wow fadeInDown">
					<h2>Born to Love</h2>
					<p>Welcome  Home</p>
				</div>
			</div>
			<div class="row">
				<div class="col-md-6 wow fadeInLeft col-sm-6">
					<div class="li">
						<a href="#" class="pull-left">
							<img src="images/Welcome06.jpg" alt="bg" class="img-responsive">
						</a>
						<div class="media-body">
							<h3>It's   Not   Ending</h3>
							<p> About home , There will be no end </p>
							<p> Because everything has just begun </p>
							<p> however , Stories always say goodbye </p>
							<p> I hope home is always there , The family has always been good </p>
						</div>
					</div>
				</div>
				<div class="col-md-6 wow fadeInRight col-sm-6" data-wow-delay="0.2s" >
					<div class="li">
						<a href="#" class="pull-left">
							<img src="images/Welcome01.png" alt="bg" class="img-responsive">
						</a>
						<div class="media-body">
							<h3>Welcome  Home</h3>
							<p> We are all strangers </p>
							<p> Are silently running on their respective tracks </p>
							<p>  Like parallel lines that will never intersect </p>
							<p> But the wonderful fate brings us together here </p>
							<p> Be a friend , To be family </p>
						</div>
					</div>
				</div>

				<div class="col-md-6 wow fadeInLeft col-sm-6">
					<div class="li">
						<a href="#" class="pull-left">
							<img src="images/Welcome03.jpg" alt="bg" class="img-responsive">
						</a>
						<div class="media-body">
							<h3>BORN  TO  LOVE</h3>
							<p> At our feet stood every inch of land , All from Mars </p>
							<p> From our common home </p>
							<p> Everything at home is fine </p>
						</p>
					</div>
				</div>
			</div>

			<div class="col-md-6 wow fadeInRight col-sm-6" data-wow-delay="0.2s">
				<div class="li">
					<a href="#" class="pull-left">
						<img src="images/Welcome02.jpg" alt="bg" class="img-responsive">
					</a>
					<div class="media-body">
						<h3>To  Be  Myself</h3>
						<p> In the home , We have no rules and regulations </p>
						<p> None of them “ Good boy ”“ Good parents ”“ Good boss ” The label of </p>
						<p> Will not be arbitrarily defined by others </p>
						<p> I don't define others casually </p>
						<p> What we do is based on kindness </p>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>

<section id="team">
	<div class="container">
		<div class="col-md-12">
			<div class="huoxin-title wow slideInLeft">
				<h2> Mars member </h2>
			</div>
		</div>
		<div class="row">
			<div class="time">
				<div class="col-md-4 wow zoomInRight col-sm-6">
					<div class="thumbnail thm">
						<img src="images/1.jpg" alt=" Head portrait ">
						<a href="#"><h2>PrePre</h2></a>
						<span>It is a lovely cat </span>
						<p> Just to better meet   It gives distance and time   today   It's worth waiting for </p>
					</div>
				</div>
				<div class="col-md-4 wow zoomInUp col-sm-6">
					<div class="thumbnail thm">
						<img src="images/2.jpg" alt=" Head portrait ">
						<a href="#"><h2> Black briquette </h2></a>
						<span>A group of lovely and inflated Fairies</span>
						<p> When you face confusion   It will tell you   You are you.   The best you </p>
					</div>
				</div>
				<div class="col-md-4 wow zoomInLeft col-sm-6">
					<div class="thumbnail thm">
						<img src="images/3.jpg" alt=" Head portrait ">
						<a href="#"><h2> Martian mouse </h2></a>
						<span>A lovely mouse</span>
						<p> It likes to laugh   It's just   Sometimes   Will be lost and sad </p>
					</div>
				</div>
				<div class="hidden-md wow zoomInLeft col-sm-6 hidden-lg hidden-xs">
					<div class="thumbnail thm">
						<img src="images/5.jpg" alt=" Head portrait ">
						<a href="#"><h2> Martian mouse </h2></a>
						<span>nubmer one</span>
						<p> You are you.   The only you </p>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>


<!--  The Chinese family has a son  -->
<section id="activity">
	<div class="container">
		<div class="col-md-12">
			<div class="title wow slideInLeft">
				<h2> The Chinese family has a son </h2>
				<p> I'm not a genius , I just learned earlier than others </p>
			</div>
		</div>
		<div class="row">
			<div class="events-bottom">
				<div class="col-md-6 event-left wow zoomIn">
					<div class="col-md-6 event-right wow zoomIn">
						<div class="e-2">
							<a href=""><img src="images/tuan3.jpeg" alt="" >
								<h4> I'm with you   Meet by chance   So you   Born of love </h4>
							</a>
						</div>
					</div>
					<div class="col-md-6 event-right wow zoomIn">
						<div class="e-2">
							<a href=""><img src="images/tuan1.jpg" alt="" >
								<h4> Stay cool and independent   Or enjoy loneliness </h4>
							</a>
						</div>
					</div>
					<img src="images/tuan5.jpg" alt="" >
					<div class="event">
						<a href=""><h4> Hua Chenyu </h4></a>
						<p> Hua Chenyu ,1990 year 2 month 7 Born in Shiyan City, Hubei Province , Male singers in mainland China 、 Composer , Graduated from Wuhan Conservatory of music .2013 Participated in Hunan Satellite TV 《 Happy boys 》 Won the championship of the year and made his debut .2014 year 1 On the first stage of CCTV Spring Festival Gala ; Same year 4 Participate in the outdoor reality show in June 《 Flowers and youth 》;9 month 6 Japan -7 Two games were held in Beijing MasterCard center on the th “ Mars ” The concert , Then released his first solo album 《 Casimodo's gift 》, And won... With this album 2015QQ The best mainland male singer of the year and the most popular male singer of the year in the 15th music billboard .</p>
					</div>
					
				</div>
				<div class="col-md-6">
					<div class="col-md-6 event-right wow zoomIn">
						<div class="e-2 wow zoomIn">
							<a href=""><img src="images/tuan2.jpg" alt="" >
								<h4> Feel love and freedom   or   Live your true self </h4>
							</a>
						</div>
					</div>
					<div class="col-md-6 event-right wow zoomIn">
						<div class="e-2 wow zoomIn">
							<a href=""><img src="images/tuan4.jpg" alt="" >
								<h4> May you touch Mars   Contact the new world </h4>
							</a>
						</div>
					</div>
					<div class="col-md-12">
						<a href=""><img src="images/tuan6.jpg" alt="" class="img-responsive"></a>
						<div class="event">
							<a href=""><h4> Hua Chenyu </h4></a>
							<p>2016 year 9 month 27 Attend the Asian new song list on the th 2016 The annual event , Won the best male singer award ; Same year 10 In June, he joined Oriental satellite TV 《 Battle of sounds 》; Same year 12 month 2 Daily gain 2016MAMA Best artist in Asia .2017 year 3 month 14 Release album on the th 《H》; Same year 6 month , Take part in the travel reality show 《 The pattern of the journey 》.2018 year 2 In June, I participated in Hunan Satellite TV 《 singer 2018》, Won the second place in the finals    ; Same year 9 month 8 Japan -9 Two consecutive games were held at the bird's Nest Stadium on the th 2018 Mars concert  .2019 year 11 month 15 Japan -17 It opened at wuyuanhe stadium in Haikou on the th 3 site 2019 Mars concert   .</p>
						</div>
					</div>
				</div>

				<div class="clearfix"></div>
			</div>
		</div>
	</div>
</section>



<section id="we">
	<div class="container">
		<div class="col-md-12">
			<div class="title1 wow slideInLeft">
				<h2> Contact us </h2>
			</div>
		</div>
		<div class="row">
			<div class="col-md-10 col-md-offset-1" >
				<form method="get" >
					<div class="form-group wow fadeInRight form-height">
						<input type="text" class="form-control form-control-white" placeholder="name" value="" required>
					</div>
					<div class="form-group wow fadeInLeft form-height">
						<input type="text" class="form-control form-control-white" placeholder="call" value="" required>
					</div>
					<div class="form-group wow fadeInRight form-height">
						<input type="email" class="form-control form-control-white" placeholder="Email" value="" required>
					</div>
					<div class="form-group wow fadeInLeft">
						<textarea class="form-control form-control-white" placeholder=" Please leave a message ..." required rows="5"></textarea>
					</div>
					<div class="form-group wow fadeInLeft form-height">
						<button type="submit" class="btn btn-default btn-lg" required> Submission of information </button>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>
</section>

<footer id="footer">
	<div class="container">
		<div class="row">
			<div class="footer-top wow wobble">
				<div class="col-md-4 footer-left col-sm-4">
					<span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span>
					<p>
						<label> Contact address </label>
						 Mars space station 
					</p>
				</div>
				<div class="col-md-4 footer-left col-sm-4">
					<span class="glyphicon glyphicon-earphone" aria-hidden="true"></span>
					<p><label> contact number </label>
					ETHCY317</p>
				</div>
				<div class="col-md-4 footer-left col-sm-4">
					<span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>
					<p><label> mailbox </label>
						<a href="mailto:[email protected]">[email protected]</a></p>
					</div>
				</div>
				<!--  Demarcation line  -->
				<div class="col-md-4 xian col-sm-4"></div>
				<div class="col-md-12 col-sm-12">
					<img src="images/vx.png" alt=" WeChat official account "/>
				</div>
				<div class="col-md-12">
					<p>Born to Love  Welcome </p>
				</div>
			</div>
		</div>
	</footer>




	<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script type="text/javascript" src="js/wow.min.js"></script>
	<script type="text/javascript"> // Animation library  $(function(){
      new WOW().init(); }); </script>
	</body>
	</html>


Four 、web Front end entry to advanced ( video + Source code + Information + interview ) a full set of ( course )

web front end Zero basis - Entry to advanced ( video + Source code + Development software + Learning materials + Interview questions ) a full set of ( course )
Suitable for children's shoes from entry to advanced ~ send 1000 set HTML+CSS+JavaScript Template website
 Insert picture description here


5、 ... and 、 The source code for

* ~ Pay attention to me , Like the blog ~ Every day brings you knowledge !

*1. See here, just [ give the thumbs-up + Praise + Collection ] Three even Support me , Yours 「 give the thumbs-up , Praise , Collection 」 It's the driving force of my creation .

* 2. Pay attention to me ~ Take you to study every day : Various front-end plug-ins 、3D Cool effect 、 Pictures show 、 Text effect 、 And the whole station template 、 College graduates HTML Templates 、 Final assignment template 、 etc. ! 「 There are a lot of front end developer , To discuss front end Node knowledge , learn from each other 」!

*3. We can learn from each other about the above technical issues , can Focus on ↓ Male Z Number Get more source code !

 Insert picture description here

6、 ... and 、 more HTML Final assignment work article

1.HTML The students finish their homework at the end of the term ~html+css+javascript Imitation Dingdang movie online website ( The function is all ready )

2.HTML Final student homework ~html+css+javascript Cat's eye movie online website ( The function is all ready )

3.HTML Final student homework (9 set )html+css+javascript Imitation of Jingdong 、 Tmall 、 clothing 、 Major e-commerce templates ( University graduation project )

4.HTML Final homework ~ Pirate king Qiaoba special cartoon student web page setting homework source code (HTML+CSS+JavaScript)

5.HTML Final homework ~ be based on HTML+CSS+JavaScript Design and implementation of tourism website

6.HTML Web design final course assignment ~ Design and implementation of imitation Tencent game official website (HTML+CSS+JavaScript)

7.HTML Final homework ~ Imitation Xiaomi mall web design template (HTML+CSS+JavaScript)

8.HTML Final homework ~ Catering culture student web design homework (HTML+CSS+JavaScript)

9.HTML Student web design homework ~ Catering food hamburger enterprise website 6 Page with carousel (HTML+CSS+JavaScript)

10. university web Basic final assignment ~ Imitation excellent purchase page production (HTML+CSS+JavaScript)

11.HTML Web design and production homework - Make comics, Web Design 6 A page (HTML+CSS+JavaScript)

12.web Front end freshman training ~ Design and implementation of cartoon website (HTML+CSS+JavaScript)

13.web Web design final course assignment ~ Super high imitation hero League LOL Design and implementation of game official website (HTML+CSS+JavaScript)

14.HTML Final homework ~ Hotel website template (HTML+CSS+JavaScript)

15.HTML Student web design homework source code ~ Happy travel website design and Implementation (HTML Final homework )

16.HTML Olympic web page 5 Page culture ~ PE Students' web design homework

17.HTML My hometown Hangzhou web design homework source code (div+css)

18.HTML Web design final course assignment ~ Anime cherry balls 5 Page table div+css Student web design homework source code

19.HTML Student web design homework finished ~ Design and implementation of cosmetics official website (HTML+CSS+JS) common 8 A page

20.HTML College students animation web design homework source code ~ Naruto animation 7 Page with special effects and carousel (HTML+CSS+JavaScript)

21. A complete set of imitation pull hook nets HTML Static web page template ( contain 38 Independent HTML)

22.HTML Final assignment course design big assignment ~ Environmental protection student web design homework source code (HTML+CSS)

23 Web Finished web homework for college students ~ Design and implementation of gourmet catering website (HTML+CSS+JavaScript)

24.HTML Final homework ~ Design and implementation of green agricultural products and food website (HTML+CSS+JavaScript)

25.HTML Final homework ~ Design and implementation of website template of flower shop flower Mall (HTML+CSS+JavaScript)

26.HTML Final homework ~ College students travel official website design homework finished product (HTML+CSS+JavaScript)

27.HTML Final homework ~ Maldives tourism web design finished product

28.HTML Final homework ~ my hometown ( Luoyang City ) Tourism web design finished product (HTML+CSS+JavaScript)

29.HTML Final homework ~ Fengyang tourism website design finished product (HTML+CSS+JavaScript)

30.HTML Final homework ~ Fengyang smart tourism official flagship store ( my hometown )(HTML+CSS+JavaScript)

31.HTML Final homework course design ~ Imitation Yin Yang division game official website home page html Templates (HTML+CSS)

32.HTML Final homework course design animation theme html5 Webpage ~ Chien animation home page html Templates (HTML+CSS)

33.HTML Final homework course design ~ Animation game official website 10 A page (HTML+CSS+JavaScript)

34. Personal design web Front end operation ~ Responsive game website source code (HTML+CSS+Bootstrap)

35.HTML Final homework ~ Personal image resources web page design, a total of 5 A page (HTML+CSS+JavaScript)

36.web Course design, web page planning and design ~ The online novel reading page has a total of 6 A page (HTML+CSS+JavaScript+Bootstrap)

37.HTML Final homework ~ Fresh handmade soap website display 4 A page (HTML+CSS+JavaScript+Bootstrap)

38. Student HTML Personal web work ~ The cake and dessert shop has a total of 11 A page (HTML+CSS+JavaScript)

39.HTML Final homework ~ Chess and card game static website (6 A page ) HTML+CSS+JavaScript

40.HTML Final homework ~ Fast fresh food station html Webpage ( common 6 A page )HTML+CSS+JavaScript

41.HTML Web design homework ~ Imitation Xiaomi mall website is pure HTML Template source code (8 A page )(HTML+CSS)

42.HTML Web design class homework ~ The home page of imitation Fanke clothing mall is pure HTML Template source code (HTML+CSS+JS)

43.HTML Web design homework ~ Imitation mushroom Street Mall website source code (HTML+CSS+JS)

44.web Course design, web page planning and design ~ Fashion clothing shopping mall template html Source code (HTML+CSS+JS)

45.web Web design final course assignment ~ Pink clothing shopping mall page template (HTML+CSS+JS)

46.HTML Final homework ~ Holiday gift mall website html Templates 11 A page (HTML+CSS+JavaScript)

47. Student HTML Personal web work ~ Personal home page blog web page design and production (6 A page )

48.HTML Final homework ~ Student personal blog static page template 6 A page (HTML+CSS+JavaScript)

49.HTML Final homework ~web Front end development personal blog HTML Whole station formwork

50. Final students HTML Personal web work Blue yiqingxuan responsive personal blog template source code (6 A page )bootstrap Responsive blog site template html

51.HTML Final homework ~ Simple programmer personal blog website template source code (7 A page )(HTML+CSS)

52.HTML Final homework ~ Simple front page of personal blog website HTML Templates 7 A page (html+css+js)

53.HTML+CSS College Students' personal website assignment template ~ black html5 Personal blog website template whole station download (5 A page )

7、 ... and 、 More confession source code

100 paragraph html+css+JavaScript Declare the source code demonstration address

copyright notice
author[@. code out the future],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210822225239251f.html

Random recommended