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 Website Introduction : This work is the subject of student personal homepage web design, student personal single-page homework homework student web design finished static HTML web single-page production dreamweaver web design and production code web front-end final homework
2. Webpage editing : The code of the webpage works is simple, and any HTML editing software can be used (such as: Dreamweaver, HBuilder, Vscode, Sublime, Webstorm, Text, Notepad++ and other arbitrary HTML editing software to run, modify and edit, etc.).
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 design at the same time Knowledge points required for 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 lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HERO</title>
<link rel="icon" href="./font/marvel.png" type="image/x-icon" />
<link rel="stylesheet" href="./assets/reset.css">
<link rel="stylesheet" href="./assets/animate.css">
<link rel="stylesheet" href="./font/iconfont.css">
<link rel="stylesheet" href="./css/hero.css">
</head>
<body>
<div class="box">
<ul class="animated lightSpeedIn nav">
<li>
<a href="hero.html">
<img src="./font/marvel.png" alt="logo">
</a>
</li>
<li id="li_btn">
<a href="hero.html">
HERO
</a>
<ul id="nav_two" class=" nav_two">
<li class="animated zoomIn " id="thor">Thor</li>
<li class="animated zoomIn " id="hulk">Hulk</li>
<li class="animated zoomIn " id="widow">Widow</li>
</ul>
</li>
<li>
<a href="film.html">
FILM
</a>
</li>
</ul>
<div class="con">
<div id="section" class="ironman animated rollIn">
<img src="./img/one.png" alt="钢铁侠" />
</div>
<div class="thor animated bounceInRight">
<img src="./img/two.png" alt="雷神" />
</div>
<div class="hulk animated bounceInLeft">
<img src="./img/three.png" alt="浩克" />
</div>
<div class="widow animated zoomIn">
<img src="./img/four.png" alt="黑寡妇" />
</div>
</div>
<div class="back_top animated jackInTheBox" id="back_top">
<i class="iconfont icon-fanhuidingbu3"></i>
</div>
</div>
</body>
<script src="./js/jquery.min.js"></script>
<script src="./js/hero.js"></script>
</html>
2. CSS code
body {
width: 100%;
height: 100%;
overflow-x: hidden;
background-color: #0e100f;
}
body a {
color: #fff;
text-decoration: none;
}
body::-webkit-scrollbar {
display: none;
}
body .nav {
z-index: 999;
width: 50%;
display: flex;
justify-content: space-evenly;
position: absolute;
top: 1.5%;
font-weight: bolder;
}
body .nav > li {
display: inline-block;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
}
body .nav > li img {
width: 50%;
}
body .nav > li:nth-child(1) {
font-size: 25px;
}
body .nav > li:hover {
cursor: pointer;
font-size: 25px;
}
body .nav .nav_two {
display: none;
color: lightgray;
font-size: 15px;
}
body .nav .nav_two li {
height: 50px;
}
body .nav .nav_two li:hover {
font-size: 20px;
}
body img {
width: 100%;
}
body .box {
width: 100%;
color: #fff;
position: relative;
}
body .box .back_top {
display: none;
cursor: pointer;
position: fixed;
right: 20px;
top: 300px;
}
body .box .back_top .icon-fanhuidingbu3 {
font-size: 50px;
}
body .box .con .hulk,
body .box .con .thor,
body .box .con .widow {
display: none;
}
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.
Four, wonderful recommendation
If you see this, please support me 【点赞，好评，收藏】three times. Your support is the driving force for my creation.