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 ）
List of articles
- 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 ~
- Introduction to works
- One 、 Demonstration of works
- Two 、 Code directory
- 3、 ... and 、 Code implementation
- Four 、web Front end entry to advanced ( video + Source code + Information + interview ) a full set of ( course )
- 5、 ... and 、 The source code for
- 6、 ... and 、 more HTML Final assignment work article
- 7、 ... and 、 More confession source code
One 、 Demonstration of works
1. home page
2. Mars member
3. Huazi has a family
4. Contact us
5. Sign in / register
Two 、 Code directory
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
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 !
6、 ... and 、 more HTML Final assignment work article
5.HTML Final homework ~ be based on HTML+CSS+JavaScript Design and implementation of tourism website
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)
11.HTML Web design and production homework - Make comics, Web Design 6 A page (HTML+CSS+JavaScript)
14.HTML Final homework ~ Hotel website template (HTML+CSS+JavaScript)
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)
27.HTML Final homework ~ Maldives tourism web design finished product
29.HTML Final homework ~ Fengyang tourism website design finished product (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
43.HTML Web design homework ~ Imitation mushroom Street Mall website 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)
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
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
The sidebar is recommended
- Crazy blessing! Tencent boss's "million JVM learning notes", real topic of Huawei Java interview 2020-2021
- JS JavaScript how to get the subscript of a value in the array
- How to implement injection in vuex source code?
- JQuery operation select (value, setting, selected)
- One line of code teaches you how to advertise on Tanabata Valentine's Day - Animation 3D photo album (music + text) HTML + CSS + JavaScript
- An article disassembles the pyramid architecture behind the gamefi outbreak
- BEM - a front-end CSS naming methodology
- [vue3] encapsulate custom global plug-ins
- Error using swiper plug-in in Vue
- Another ruthless character fell by 40000, which was "more beautiful" than Passat and maiteng, and didn't lose BMW
guess what you like
-
Huang Lei basks in Zhang Yixing's album, and the relationship between teachers and apprentices is no less than that in the past. Netizens envy Huang Lei
-
He was cheated by Wang Xiaofei and Li Chengxuan successively. Is an Yixuan a blessed daughter and not a blessed home?
-
Zhou Shen sang the theme song of the film "summer friends and sunny days" in mainland China. Netizen: endless aftertaste
-
Pink is Wangyuan online! Back to the peak! The new hairstyle is creamy and sassy
-
Front end interview daily 3 + 1 - day 858
-
Spring Webflux tutorial: how to build reactive web applications
-
[golang] walk into go language lesson 24 TCP high-level operation
-
August 23, 2021 Daily: less than three years after its establishment, Google dissolved the health department
-
The female doctor of Southeast University is no less beautiful than the female star. She has been married four times, and her personal experience has been controversial
-
There are many potential safety hazards in Chinese restaurant. The top of the program recording shed collapses, and the artist will fall down if he is careless
Random recommended
- Anti Mafia storm: He Yun's helpless son, Sun Xing, is destined to be caught by his dry son
- Introduction to flex flexible layout in CSS -- learning notes
- CSS learning notes - Flex layout (Ruan Yifeng tutorial summary)
- Today, let's talk about the arrow function of ES6
- Some thoughts on small program development
- Talk about mobile terminal adaptation
- Unwilling to cooperate with Wang Yibo again, Zhao Liying's fans went on a collective strike and made a public apology in less than a day
- JS function scope, closure, let, const
- Zheng Shuang's 30th birthday is deserted. Chen Jia has been sending blessings for ten years. Is it really just forgetting to make friends?
- Unveil the mystery of ascension
- Asynchronous solution async await
- Analysis and expansion of Vue infinite scroll source code
- Compression webpack plugin first screen loading optimization
- Specific usage of vue3 video play plug-in
- "The story of huiyeji" -- people are always greedy, and fairies should be spotless!
- Installing Vue devtool for chrome and Firefox
- Basic usage of JS object
- 1. JavaScript variable promotion mechanism
- Two easy-to-use animation JS that make the page move
- Front end Engineering - scaffold
- Java SQL Server intelligent fixed asset management, back end + front end + mobile end
- Mediator pattern of JavaScript Design Pattern
- Array de duplication problem solution - Nan recognition problem
- New choice for app development: building mobile applications using Vue native
- New gs8 Chengdu auto show announces interior Toyota technology blessing
- Vieira officially terminated his contract and left the team. The national security club sent blessings to him
- Less than 200000 to buy a Ford RV? 2.0T gasoline / diesel power, horizontal bed / longitudinal bed layout can be selected
- How does "heart 4" come to an end? Pinhole was boycotted by the brand, Ma Dong deleted the bad comments, and no one blessed him
- We are fearless in epidemic prevention and control -- pay tribute to the front-line workers of epidemic prevention!
- Front end, netty framework tutorial
- Xiaomi 11 | miui12.5 | android11 solves the problem that the httpcanary certificate cannot be installed
- The wireless charging of SAIC Roewe rx5 plus is so easy to use!
- Upload and preview pictures with JavaScript, and summarize the most complete mybatis core configuration file
- [25] typescript
- CSS transform Complete Guide (Second Edition) flight.archives 007
- Ajax foundation - HTTP foundation of interview essential knowledge
- Cloud lesson | explain in detail how Huawei cloud exclusive load balancing charges
- Decorator pattern of JavaScript Design Pattern
- [JS] 10. Closure application (loop processing)
- Left hand IRR, right hand NPV, master the password of getting rich