HTML example web page code, this example is suitable for students who are beginners in HTML. In this example, there are css style settings and div style patterns. This example is more comprehensive and helpful for students to learn. This article will introduce how to practice design by designing a personal website from scratch and converting it into code .
Article directory
- 1. Web page introduction
- 1. Web page effect
- 2. Code display
-
- 1.HTML code
- 2. CSS code
- 3. Personal summary
- Four, wonderful recommendation
1. Web page introduction
1 Webpage Introduction: This work is the theme of student personal homepage webpage design, HTML + CSS layout production, web front-end final assignment, college student webpage design homework source code, this is a good webpage production, the picture is smart, The code is a simple student level, very suitable for beginners to learn and use.
2. Webpage editing: The code of the webpage works is simple, and any HTML editing software (such as: Dreamweaver, HBuilder, Vscode, Sublime, Webstorm, Text, Notepad + + etc. any html editing software for operation, modification and editing).
3. Knowledge application: In terms of technology, it mainly applies web page knowledge: Div + CSS, mouse over effects, Table, navigation bar effects, Banner, forms, secondary and tertiary pages, etc., video, Audio elements, Flash, and the knowledge points required for designing the Logo (source file).
1. Web page effect
2. Code display
1.HTML code
The code is as follows (example): The following only shows part of the code for reference~
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link type="text/css" rel="stylesheet" href="css/style.css" />
<title>Your name</title>
</head>
<body>
<div class="wrapin">
<!--head-->
<div class="banner">
<div class="box-1">
<ul>
<li> <img src="images/banner_1.jpg"></img></li>
<li> <img src="images/banner_2.jpg"></img></li>
<li> <img src="images/banner_3.jpg"></img></li>
<li> <img src="images/banner_4.jpg"></img></li>
</ul>
</div>
<div class="box-2">
<ul>
</ul>
</div>
<div class="box-3"> <span class="prev"> < </span> <span class="next"> > </span> </div>
</div>
<header>
<ul class="nav clearfix">
<li><a href="index.html">Homepage</a></li>
<li><a href="juqing.html">Story</a></li>
<li><a href="tupian.html">Wonderful Photos</a></li>
<li><a href="jingchai.html">Plot explanation</a></li>
<li><a href="lianxi.html">Contact Us</a></li>
</ul>
</header>
<!--Content-->
<div class="con">
<div class="top clearfix">
<div class="text">
<h2>Your name. </h2>
<p>"your name. "" is an original Japanese animation film directed by Makoto Shinkai, with Ryunosuke Kamiki and Moe Kamishiraishi as the main voices.<br>
<br>
The place where the story took place was one month before the visit of the comet that returns once every millennium, Komachi Itomoricho, a rural town in Hida City, Japan. Here, Mitsuha, a female high school student, lives a melancholy life every day, and what worries her is not only the election campaign held by her father, who is the mayor of the town, but also the ancient custom of passing down the shrine by her family. In this small town, there are only some carefree old people around. For this reason, Sanye is full of longing for the metropolis.</p>
</div>
<div class="pic"> <img src="images/15.jpg"/> </div>
</div>
<div class="title">
<h2>Video review</h2>
</div>
<div class="pinglun">
<div class="text">《Your name. is based on an original screenplay by Shinkai, the film revolves around Mitsuha, a girl who is unhappy living in the countryside, and Taki, a high school student in Tokyo who is an architecture buff. The two have a fated bond, but the movie does it in an unusual way, to say the least: They swap bodies in their dreams. Makoto Shinkai's movie also shows the real embarrassment and embarrassment of adolescence. When Mitsuha turns into Taki, his friend's surprise when he finds himself using the female "I" address, etc., this joke is very cute, of course such a scene Also appeared in other TV shows. However, the transgender aspect of this film is unique to Makoto Shinkai, because they have strange situations and strange longings. They leave notes to each other and even quarrel. Of course, once things get to this stage, love is known to bloom. But the mystery of the story is that a once-in-a-thousand-year comet appeared in the sky one month before the story began. It also indicates the germination of the relationship between the central characters. The plot needs a lot of twists and turns, but keeps the focus on Mitsuha and Taki's respective fates. Supporting characters, such as Miki, Taki's crush, and Sanye's grandmother Ichiyo and younger sister Yotsuba, are mainly to highlight the characteristics and dilemmas of the two protagonists. But as the climax, the sky bursts into a dazzling burst of color and light, "Your Name. "Just like a dream, almost everyone thinks that the lover is too perfect, the encounter is too short, the ending is too sudden, and the joy dissolves in thin air to keep a sane life. But something remains-memory, faint as it is. "your name. What you get is an unforgettable blend of poignant pathos and supernatural beauty. </div>
</div>
<div class="tupian">
<div class="title">
<h2>Wonderful photo gallery</h2>
</div>
<ul class="clearfix">
<li><img src="images/8.jpg"/></li>
<li><img src="images/14.jpg"/></li>
<li><img src="images/16.jpg"/></li>
</ul>
</div>
</div>
<!--Bottom-->
<footer>
<p>your name</p>
</footer>
</div>
<script type="text/javascript" src="js/js.js"></script>
<audio controls="controls" autoplay="autoplay" hidden>
<source src="audio/song.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
</body>
</html>
2.CSS code
/*General class*/
* {<!-- -->
margin: 0;
padding: 0;
}
body {<!-- -->
margin: 0 auto;
font-size: 14px;
background: url(../images/13.jpg) no-repeat fixed;
color: #333;
position: relative;
padding-top: 50px;
padding-bottom: 50px;
}
img {<!-- -->
border: none;
}
a {<!-- -->
cursor: pointer;
color: #333;
text-decoration: none;
outline: none;
}
ul {<!-- -->
list-style-type: none;
}
em {<!-- -->
font-style: normal;
}
.lt {<!-- -->
float: left;
}
.rt {<!-- -->
float: right;
}
div. clear {<!-- -->
font: 0px Arial;
line-height: 0;
height: 0;
overflow: hidden;
clear: both;
}
.clearfix::after {<!-- -->
content: "";
display: block;
clear: both;
}
/*wrapin body container width*/
.wrapin {<!-- -->
width: 1000px;
margin-left: auto;
margin-right: auto;
}
header {<!-- -->
height: 50px;
background: #fff;
border-bottom: 1px solid #ccc;
}
.nav li {<!-- -->
line-height: 50px;
float: left;
width: 20%;
text-align: center;
font-size: 16px;
}
.nav li a {<!-- -->
color: #333;
}
.banner {<!-- -->
display: block;
}
.banner img {<!-- -->
width: 100%;
display: block;
}
.banner {<!-- -->
width: 100%;
height: 560px;
overflow: hidden;
position: relative;
}
.box-1 ul {<!-- -->
}
.box-1 ul li {<!-- -->
width: 100;
height: 560px;
position: relative;
overflow: hidden;
}
.box-1 ul li img {<!-- -->
display: block;
width: 100%;
height: 100%;
}
.box-1 ul li h2 {<!-- -->
position: absolute;
left: 0;
bottom: 0;
height: 40px;
width: 100%;
background: rgba(125,125,120,.4);
text-indent: 2em;
padding-right: 500px;
font-size: 15px;
line-height: 40px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
font-weight: normal;
color: ghostwhite
}
.box-2 {<!-- -->
position: absolute;
right: 10px;
bottom: 14px;
}
.box-2 ul li {<!-- -->
float: left;
width: 12px;
height: 12px;
overflow: hidden;
margin: 0 5px;
border-radius: 50%;
background: rgba(0,0,0,0.8);
text-indent: 100px;
cursor: pointer;
}
.box-2 ul .on {<!-- -->
background:#FF9933;
}
.box-3 span {<!-- -->
position: absolute;
color: rgba(255,255,255,0.1);
background: rgba(255,255,255,0.1);
width: 50px;
height: 80px;
top: 50%;
font-family: "宋体";
line-height: 80px;
font-size: 60px;
margin-top: -40px;
border-radius: 5px;
text-align: center;
cursor: pointer;
}
.box-3 .prev {<!-- -->
left: 10px;
}
.box-3.next {<!-- -->
right: 10px;
}
.box-3 span::selection {<!-- -->
background: transparent;
}
.box-3 span:hover {<!-- -->
background: rgba(255,255,255,.5);
color: rgba(255,255,255,1)
}
.con {<!-- -->
padding: 15px;
background: #fff;
}
.top .text {<!-- -->
float: left;
width: 60%;
line-height: 26px;
}
.top .pic {<!-- -->
float: right;
width: 38%;
margin-top: 20px;
}
.top .pic img {<!-- -->
width: 100%;
}
.title {<!-- -->
padding: 20px 0;
}
.title h2 {<!-- -->
font-size: 20px;
color: #333;
}
.tupian ul {<!-- -->
margin: 0-15px;
}
.tupian ul li {<!-- -->
width: 33.33%;
float: left;
padding: 15px;
box-sizing: border-box;
}
.tupian ul li img {<!-- -->
width: 100%;
height: 200px;
object-fit: cover;
}
.pinglun {<!-- -->
line-height: 26px;
color: #333;
font-size: 14px;
padding-bottom: 30px;
}
footer {<!-- -->
background: #282828;
text-align: center;
color: #fff;
line-height: 50px;
}
form {<!-- -->
width: 460px;
float: right;
}
form p {<!-- -->
margin: 10px 0;
font-size: 16px;
color: #333;
}
form.phone {<!-- -->
width: 100%;
height: 36px;
padding: 0 10px;
box-sizing: border-box;
border: 1px solid #ccc;
}
form textarea {<!-- -->
width: 100%;
height: 100px;
}
form.but {<!-- -->
background: #fff;
border: 1px solid #ccc;
color: #333;
margin: 20px auto;
display: block;
width: 200px;
height: 36px;
}
.lx_pic {<!-- -->
float: left;
width: 460px;
height: 360px;
}
.lx_pic img {<!-- -->
object-fit: cover;
height: 100%;
width: 100%;
}
3. Personal summary
A set of qualified web pages should include (specifically, it can be determined according to individual requirements)
- The page is divided into four parts: the header, the menu navigation bar (preferably pull down), the middle content section, and the footer;
- All pages are hyperlinked to each other, and you can go to the third-level page, which consists of 5-10 pages;
- The unified layout of the page style is normal, not messy, using Div + Css technology;
- The menu is beautiful and eye-catching, and the secondary menu can pop up and jump normally;
- There must be JS special effects, such as timing switching and manual switching of picture news;
- There are multimedia elements in the page, such as gif, video, music, and the use of form technology;
- The page is clean, beautiful, generous, and not the same.
- The front-end program of the website must not only be able to present the content required by the user, but also meet the requirements of good layout, beautiful interface, elegant color matching, and various forms of expression.
4. Wonderful recommendation
1. If you see this, please [Like and collect blog posts] for three consecutive supports, your support is the driving force for my creation, [Follow the author|Get more source code| High-quality articles 】.
2. Follow me and take you to learn various front-end plug-ins, 3D cool effects, picture display, text effects, and whole site templates, college graduate graduation HTML templates, final assignment templates, etc.! “There are many front-end developers here, let’s join together Discuss front-end Node knowledge and learn from each other!”
3. The above content and technology-related issues can learn and communicate with each other