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 .
Wonderful column recommendation
? [Author’s homepage – get more high-quality source code]
? [Web front-end end-of-session homework – completed project boutique practical case (1000 sets)]
Article directory
- 1. Web page introduction
- 1. Web page effect
- 2. Code display
-
- 1.HTML code
- 2. CSS code
- 3. Personal summary
- 4. More dry goods
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">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=yes" />
<title>Hatsu Sakura Anime</title>
<link rel="stylesheet" type="text/css" href="css/base.css" />
<link rel="stylesheet" type="text/css" href="css/index_style.css" />
<!-- Add js carousel style -->
<style>
.addWrap{<!-- --> position:relative; width:100%;background:#fff;margin:0;padding:0;}
.addWrap .swipe{<!-- -->overflow: hidden;visibility: hidden;position:relative;}
.addWrap .swipe-wrap{<!-- -->overflow:hidden;position:relative;}
.addWrap .swipe-wrap > div {<!-- -->float: left;width: 100%;position:relative;}
\t\t\t
#position{<!-- --> position:absolute; bottom:0; right:0; padding-right:8px; margin:0; background:#000; opacity: 0.4; width:100%; filter: alpha( opacity=50);text-align:right;}
#position li{<!-- -->width:10px;height:10px;margin:0 2px;display:inline-block;-webkit-border-radius:5px;border-radius:5px;background-color:# AFAFAF;}
#position li.cur{<!-- -->background-color:#FF0000;}
.img-responsive {<!-- --> display: block;}
</style>
<body>
<div id="contain">
<!-- global -->
<div id="top">
<!-- head -->
<a>
<div id="logo">
<!-- logo image -->
<!-- <a href="#"><img class="logo" src="img/logo.png"></a> -->
</div>
</a>
<div id="search">
<!-- search box -->
<input type="search" id="search_width" class="search" required="" placeholder="Search">
<input type="button" id="search_button" class="search" value="search" />
</div>
<div id="login">
<!-- Login -->
<!-- Register -->
<a href="login.html"><input type="button" class="login" value="login" /></a> & amp;nbsp; & amp;nbsp ;
<a href="register.html"><input type="button" class="login" value="register" /></a>
</div>
</div>
<div id="links">
<!-- navigation bar -->
<span><a href="index.html"><input type="button" class="links_button" value="Home" /></a>
<a href="movie.html"><input type="button" class="links_button" value="anime movie" /></a>
<a href="j_anime.html"><input type="button" class="links_button" value="Japanese Anime" /></a>
<a href="#"><input type="button" class="links_button" value="Domestic animation" /></a>
<a href="#"><input type="button" class="links_button" value="OVA version" /></a>
<a href="#"><input type="button" class="links_button" value="leaderboard" /></a></span>
</div>
<!-- <div id="banner"> -->
<!-- carousel images -->
<!-- <div id="lunbo">
<img src="//i2.wp.com/img.zcool.cn/community/010a11584b5f40a801219c77181f3d.jpg@1280w_1l_2o_100sh.jpg" width="1280px"
height="300px">
<img src="//i2.wp.com/img.zcool.cn/community/0115115b9a51e4a8012099c8b7b24c.png@1280w_1l_2o_100sh.png" width="1280px"
height="300px">
<img src="//i2.wp.com/img.zcool.cn/community/01c0e2584b5f40a801219c77e7799f.jpg@1280w_1l_2o_100sh.jpg" width="1280px"
height="300px">
<img src="//i2.wp.com/img.zcool.cn/community/01b96b584b5f40a8012060c8572fec.jpg@1280w_1l_2o_100sh.jpg" width="1280px"
height="300px">
<img src="//i2.wp.com/img.zcool.cn/community/016fb2584b5f40a801219c7726690b.jpg@1280w_1l_2o_100sh.jpg" width="1280px"
height="300px">
</div> -->
<div class="addWrap">
<div class="swipe" id="mySwipe">
<div class="swipe-wrap">
<div><a href="javascript:;"><img class="img-responsive" src="//i2.wp.com/img.zcool.cn/community/010a11584b5f40a801219c77181f3d.jpg@ 1280w_1l_2o_100sh.jpg"
width="1280px" height="300px" /></a></div>
<div><a href="javascript:;"><img class="img-responsive" src="//i2.wp.com/img.zcool.cn/community/0115115b9a51e4a8012099c8b7b24c.png@ 1280w_1l_2o_100sh.png"
width="1280px" height="300px" /></a></div>
<div><a href="javascript:;"><img class="img-responsive" src="//i2.wp.com/img.zcool.cn/community/01c0e2584b5f40a801219c77e7799f.jpg@ 1280w_1l_2o_100sh.jpg"
width="1280px" height="300px" /></a></div>
<div><a href="javascript:;"><img class="img-responsive" src="//i2.wp.com/img.zcool.cn/community/01b96b584b5f40a8012060c8572fec.jpg@ 1280w_1l_2o_100sh.jpg"
width="1280px" height="300px" /></a></div>
<div><a href="javascript:;"><img class="img-responsive" src="//i2.wp.com/img.zcool.cn/community/016fb2584b5f40a801219c7726690b.jpg@ 1280w_1l_2o_100sh.jpg"
width="1280px" height="300px" /></a></div>
</div>
</div>
<ul id="position">
<li class="cur"></li>
<li class=""></li>
<li class=""></li>
<li class=""></li>
<li class=""></li>
\t\t\t\t</ul>
</div>
<!-- carousel js -->
<script src="js/swipe.js"></script>
<!-- Display the position of the ball js -->
<script type="text/javascript">
var bullets = document.getElementById('position').getElementsByTagName('li');
var banner = Swipe(document.getElementById('mySwipe'), {<!-- -->
auto: 2000,
continuous: true,
disableScroll: false,
callback: function(pos) {<!-- -->
var i = bullets. length;
while (i--) {<!-- -->
bullets[i].className = ' ';
}
bullets[pos].className = 'cur';
}
});
</script>
<!-- </div> -->
<div id="content">
<!-- content -->
<div class="module">
<div class="module1_1">
<p id="p1"><a href="#">Recently updated</a></p>
<p id="p2"><a href="#">More</a></p>
</div>
<div class="module_1_2">
<ul>
<li><a href="#"><img src="http://p.xiaomingming.org/FileUpload/201810618424440146.jpg" alt="Sword Art Online Alicization"></a>
<p><a href="#" title="Sword Art Online Alicization Chapter">Sword Art Online Alicization Chapter</a></p>
\t\t\t\t\t\t\t</li>
<li><a href="#"><img src="http://p.xiaomingming.org/FileUpload/20202115591459841.jpg" alt="The Misfits of Demon King Academy"></a>
<p><a href="#" title="The Misfits of the Devil Academy">The Misfits of the Devil Academy</a></p>
\t\t\t\t\t\t\t</li>
<li><a href="#"><img src="http://p.xiaomingming.org/FileUpload/20204117511193265.jpg" alt="Peter Greer's Sage Time">< /a>
<p><a href="#" title="Peter Greer's Sage Time">Peter Greer's Sage Time</a></p>
\t\t\t\t\t\t\t</li>
<li><a href="#"><img src="http://p.xiaomingming.org/FileUpload/202068172561760.jpg" alt="Lease Girlfriend"></a>
<p><a href="#" title="Rent Girlfriend">Rent Girlfriend</a></p>
\t\t\t\t\t\t\t</li>
<li><a href="#"><img src="http://p.xiaomingming.org/FileUpload/202032214454763065.jpg" alt="Uzaki-chan wants to play!"></a>
<p><a href="#" title="Uzaki-chan wants to play!">Uzaki-chan wants to play! </a></p>
\t\t\t\t\t\t\t</li>
<li><a href="#"><img src="http://p.xiaomingming.org/FileUpload/201911126265428275.jpg" alt="My youth love story really has a problem with the third season" ></a>
<p><a href="#" title="There is a problem with my youth love story, end">There is a problem with my youth love story</a></p>
\t\t\t\t\t\t\t</li>
\t\t\t\t\t\t</ul>
</div>
</div>
<div class="module">
<div class="module1_1">
<p id="p1"><a href="#">Popular</a></p>
<p id="p2"><a href="#">More</a></p>
</div>
<div class="module_1_2">
<ul>
<li><a href="#"><img src="http://p.xiaomingming.org/FileUpload/2020782374465089.jpg" alt="Zero -Starting Life in Another World Season 2"> </a>
<p><a href="#" title="Life in a different world from zero">Life in a different world from zero</a></p>
\t\t\t\t\t\t\t</li>
<li><a href="#"><img src="http://p.xiaomingming.org/FileUpload/201911126265428275.jpg" alt="My youth love story really has a problem with the third season" ></a>
<p><a href="#" title="There is a problem with my youth love story, end">There is a problem with my youth love story</a></p>
\t\t\t\t\t\t\t</li>
<li><a href="#"><img src="http://p.xiaomingming.org/FileUpload/201810618424440146.jpg" alt="Sword Art Online Alicization"></a>
<p><a href="#" title="Sword Art Online Alicization Chapter">Sword Art Online Alicization Chapter</a></p>
\t\t\t\t\t\t\t</li>
<li><a href="#"><img src="http://pic.xiaomingming.org/FileUpload/2050.jpg" alt="One Piece"></a>
<p><a href="#" title="One Piece">One Piece</a></p>
\t\t\t\t\t\t\t</li>
<li><a href="#"><img src="http://p.xiaomingming.org/FileUpload/201762221155776184.jpg" alt="The Rise of the Shield Hero"></a>
<p><a href="#" title="The Rise of the Shield Hero">The Rise of the Shield Hero</a></p>
\t\t\t\t\t\t\t</li>
<li><a href="#"><img src="http://p.xiaomingming.org/FileUpload/20184421312852362.jpg" alt="OVERLORD Season 3"></a>
<p><a href="#" title="OVERLORD Season 3">OVERLORD Season 3</a></p>
\t\t\t\t\t\t\t</li>
\t\t\t\t\t\t</ul>
</div>
</div>
</div>
<div id="end">
<!-- Tail -->
<div id="information">
<!-- Related Information -->
<p>The animation resources provided by this website are all collected from major video websites.
This website only provides web page services and does not provide video resource storage.
Do not participate in recording or uploading. If the links included in this site inadvertently infringe your company's copyright,
Please contact us by email, we will deal with the relevant content in time, thank you!</p>
<p><a href="#">Friendship Link: First Sakura Anime</a> & amp;nbsp; & amp;nbsp; & amp;nbsp; & amp;nbsp; & amp;nbsp; & amp;nbsp;
<a href="#">About Us</a> & amp;nbsp;<b>|</b> & amp;nbsp;
<a href="#">Join Us</a> & amp;nbsp;<b>|</b> & amp;nbsp;<a href="#">Contact Us</a> <b>|</b>
\t\t\t\t\t\t</p>
<p><a href="#"></a></p>
</div>
</div>
</div>
</body>
</html>
2.CSS code
*,
::after,
::before {<!-- -->
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {<!-- -->
font-size: 14px;
font-family: "microsoft yahei";
color: #333333;
}
a {<!-- -->
color: #333333;
text-decoration: none;
}
a:hover {<!-- -->
color: #333333;
}
.clear::before,
.clear::after {<!-- -->
content: "";
display: block;
visibility: hidden;
height: 0;
line-height: 0;
clear: both;
}
input[type="text"],
input[type="search"] {<!-- -->
outline: none;
border: none;
-webkit-appearance: none;
}
html,
body,
#contain {<!-- -->
height: 800px;
width: 1280px;
}
#top {<!-- -->
width: 100%;
height: 15%;
}
#logo {<!-- -->
width: 45%;
height: 100%;
float: left;
background: url(../img/logo.png) no-repeat;
}
#search {<!-- -->
width: 35%;
height: 50%;
float: left;
margin-top: 1%;
}
.search {<!-- -->
height: 100%;
border-radius: 10px;
background-color: pink;
}
#search_width {<!-- -->
height: 100%;
width: 80%;
}
#search_button {<!-- -->
height: 100%;
width: 15%;
}
#login {<!-- -->
width: 20%;
height: 50%;
float: right;
margin-top: 1%;
padding-left: 3%;
}
.login {<!-- -->
height: 100%;
width: 40%;
background-color: pink;
border-radius: 10px;
}
#links {<!-- -->
height: 10%;
width: 100%;
background-color: white smoke;
}
.links_button {<!-- -->
background-color: pink;
border-radius: 10px;
width: 10%;
height: 70%;
margin-left: 1%;
margin-top: 0.5%;
}
#end {<!-- -->
height: auto;
width: 100%;
background: yellowgreen;
}
#information {<!-- -->
width: 80%;
height: 100%;
margin: 0 auto;
background-color: pink;
border-radius: 5px;
text-align: center;
overflow: auto;
}
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. More dry goods
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