HTML example webpage code, this example is suitable for students who are beginners in HTML. This example has css style settings and div style patterns. This example is more comprehensive and helps students to learn. This article will introduce how to practice design by designing a personal website from scratch and converting it into code. .
1. Introduction to the website📖
1 Web page introduction: This work is the theme of student personal homepage web page design, HTML+CSS layout production, web front-end final work, college student web page design homework source code, this is a good web page production, the screen is smart, the code is simple student level, very Suitable for beginners to learn to 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.) can be used to run, modify and edit.
3. Knowledge application: The technology mainly applies in web page knowledge: Div+CSS, mouse-over effects, Table, navigation bar effect, Banner, form, second-level and third-level pages, video, audio elements, Flash, and design The knowledge points required for Logo (source file).
1. Web page effect 🌌
2. Code display 😈
1.HTML code structure 🧱
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>Document</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<!-- jQuery -->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<!-- Newest Bootstrap core JavaScript document -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" id="menu-nav">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img src="images/small tv.jpg" id="xiao" alt="" style="width:100px;height:50px;" />
</a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<!-- Home title -->
<li><a class="active" href="index.html"><span class="glyphicon glyphicon-home" aria-hidden="true"></span>front page<span class="sr-only">(current)</span></a></li>
<li><a href="xingpanbiao.html"><span class="glyphicon glyphicon-time" aria-hidden="true"></span>New schedule</a></li>
<li><a href="jiesao.html"><span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span>Anime Introduction</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<span class="glyphicon glyphicon-expand" aria-hidden="true"></span>Fan drama<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">Fan drama classification</a></li>
<li><a href="#">Serial animation</a></li>
<li><a href="#">End animation</a></li>
<li><a href="#">Fan Opera Index</a></li>
<li><a href="#">History</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Official Extension</a></li>
</ul>
</li>
<li>
<a data-toggle="modal" href='#modal-id'><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>About</a>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search" aria-hidden="true"></span>search</button>
</form>
<ul class="nav navbar-nav navbar-right">
<!-- <li><a href="#"><span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span>Help</a></li> -->
<li><a href="denglu.html">Log in</a></li>
<button type="register" class="btn btn-default zhuces"><a href="zhuce.html">register</a></button>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav><hr>
<!-- carousel -->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
<li data-target="#carousel-example-generic" data-slide-to="4"></li>
</ol>
<div class="carousel-inner" role="listbox">
<!-- Carousel 0 -->
<div class="item active">
<img src="images/sword.jpg" alt="Sword Art Online 3">
<div class="carousel-caption">
<h1>Sword Art Online 3</h1>
</div>
</div>
<!-- carousel 1 -->
<div class="item">
<img src="images/shield.jpg" alt="shield">
<div class="carousel-caption">
<h1>The Rising of the Shield Hero</h1>
</div>
</div>
<!-- carousel 2 -->
<div class="item">
<img src="images/Attack on Titan 3.JPG" alt="Attack on Titan 3">
<div class="carousel-caption">
<h1>Attack on Titan 3</h1>
</div>
</div>
<!-- carousel 3 -->
<div class="item">
<img src="images/Magic Forbidden Book Catalog 3.jpg" alt="Magic Forbidden Book Catalog 3">
<div class="carousel-caption">
<h1>Magic Forbidden Book Catalog 3</h1>
</div>
</div>
<!-- carousel 4 -->
<div class="item">
<img src="images/Demon Gods: Shadow Demon.jpg" alt="Demon Gods: Shadow Demon">
<div class="carousel-caption">
<h1>Demon Gods: Shadow Demon</h1>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<hr>
<!-- Guochuang,Japan,Movie -->
<div id="row1" class="row">
<!-- Guochuang -->
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<img class="img-circle" src="images/Guochuang.png" alt="Generic placeholder image" width="140" height="140">
<h2>Guochuang animation</h2>
<p><a class="btn btn-success" href="guochan.html" role="button">click to enter »</a></p>
</div>
<!-- Japan -->
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<img class="img-circle" src="images/Japan.jpg" alt="Generic placeholder image" width="140" height="140">
<h2>anime</h2>
<p><a class="btn btn-success" href="riben.html" role="button">click to enter »</a></p>
</div>
<!-- Movie -->
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<img class="img-circle" src="images/timg.jpg" alt="Generic placeholder image" width="140" height="140">
<h2>anime movie</h2>
<p><a class="btn btn-success" href="dianying.html" role="button">click to enter »</a></p>
</div>
</div>
<!-- -->
<div class="row" id="row2">
<h3 class="h3">Strong appraisal works<a id="gengduo" class="btn btn-success btn-sm" href="#" role="button">more »</a></h3>
<!-- Recommended 1 -->
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-2" id="tui">
<div class="in-anishe-text">
<img alt="Sword Art Online" src="images/Sword 3.png">
<a target="_blank" href="#" class="mod-cover-list-mask" title="Sword Art Online">
<span class="mod-cover-list-text">Update to Chapter 14</span>
</a>
<h5>
<a target="_blank" href="#" class="mod-cover-list-name">Sword Art Online 3</a>
</h5>
<p><a class="btn btn-info btn-xs" href="#" role="button">Click to play »</a></p>
<p>
<a target="_blank" href="#" class="mod-tag-item">Blood</a>
<a target="_blank" href="#" class="mod-tag-item">Japan</a>
</p>
</div>
</div>
<!-- Recommendation 2 -->
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-2" id="tui">
<div class="in-anishe-text">
<img alt="Douluo Continent" src="images/Douluo Continent.jpg">
<a target="_blank" href="#" class="mod-cover-list-mask" title="Douluo Dalu">
<span class="mod-cover-list-text">Update to chapter 32</span>
</a>
<h5>
<a target="_blank" href="#" class="mod-cover-list-name">Douluo Dalu 3</a>
</h5>
<p><a class="btn btn-info btn-xs" href="#" role="button">Click to play »</a></p>
<p>
<a target="_blank" href="#" class="mod-tag-item">Blood</a>
<a target="_blank" href="#" class="mod-tag-item">China</a>
</p>
</div>
</div>
<!-- Recommendation 3 -->
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-2" id="tui">
<div class="in-anishe-text">
<img alt="Yao Shen Ji" src="images/Yao Shen Ji recommended.jpg">
<a target="_blank" href="#" class="mod-cover-list-mask" title="Yao Shen Ji">
<span class="mod-cover-list-text">Update to Chapter 113</span>
</a>
<h5>
<a target="_blank" href="#" class="mod-cover-list-name">Yo Shen Ji: Shadow Demon Chapter</a>
</h5>
<p><a class="btn btn-info btn-xs" href="#" role="button">Click to play »</a></p>
<p>
<a target="_blank" href="#" class="mod-tag-item">Blood</a>
<a target="_blank" href="#" class="mod-tag-item">China</a>
</p>
</div>
</div>
<!-- Recommended 4 -->
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-2" id="tui">
<div class="in-anishe-text">
<img alt="working cell" src="images/working cell.jpg">
<a target="_blank" href="#" class="mod-cover-list-mask" title="Working cells">
<span class="mod-cover-list-text">Update to Chapter 14</span>
</a>
<h5>
<a target="_blank" href="#" class="mod-cover-list-name">Working cells</a>
</h5>
<p><a class="btn btn-info btn-xs" href="#" role="button">Click to play »</a></p>
<p>
<a target="_blank" href="#" class="mod-tag-item">Daily Funny</a>
<a target="_blank" href="#" class="mod-tag-item">Japan</a>
</p>
</div>
</div>
<!-- Recommended 5 -->
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-2" id="tui">
<div class="in-anishe-text">
<img alt="Beast Slayer" src="images/Beast Slayer.jpg">
<a target="_blank" href="#" class="mod-cover-list-mask" title="Beast Slayer">
<span class="mod-cover-list-text">Update to chapter 4</span>
</a>
<h5>
<a target="_blank" href="#" class="mod-cover-list-name">Beast Slayer</a>
</h5>
<p><a class="btn btn-info btn-xs" href="#" role="button">Click to play »</a></p>
<p>
<a target="_blank" href="#" class="mod-tag-item">Combat Fantasy</a>
<a target="_blank" href="#" class="mod-tag-item">China</a>
</p>
</div>
</div>
<!-- Recommended 6 -->
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-2" id="tui">
<div class="in-anishe-text">
<img alt="fate series" src="images/FATE.jpg">
<a target="_blank" href="#" class="mod-cover-list-mask" title="fate series">
<span class="mod-cover-list-text">loading</span>
</a>
<h5>
<a target="_blank" href="#" class="mod-cover-list-name">fate series</a>
</h5>
<p><a class="btn btn-info btn-xs" href="#" role="button">Click to play »</a></p>
<p>
<a target="_blank" href="#" class="mod-tag-item">Blood Battle Fantasy</a>
<a target="_blank" href="#" class="mod-tag-item">Japan</a>
</p>
</div>
</div>
</div>
<hr width="980px">
<!-- footer -->
<div id="foot">
<img src="images/QR code.jpg" alt="Wechat QR code" /><img src="images/Receipt code.png" alt="WeChat payment code" />
<p>Copyright©2018-2050 DONGMANZIJIAcom,CAIJIAHAN ALL right reserved.</p>
<p>2018-2040,Copyright 85 CP prepare </p>
</div>
<!--About popovers-->
<div class="modal fade" id="modal-id">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">about</h4>
</div>
<div class="modal-body">
<p>This website belongs to the Department of Mechanical and Electrical Engineering of Guangdong Environmental Protection Engineering Vocational College.<br>Copyright belongs to, is an enthusiast engaged in Internet website development. Adhering to the spirit of "pioneering, innovative, positive and hard-working", it fully displays the characteristics of the Internet website in the form of a website, and is committed to dedicating its own strength to the website business and hobby scholars.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" data-dismiss="modal">understood/closure</button>
</div>
</div>
</div>
</div>
</body>
</html>
2.CSS style code 🏠
<style>
@media(max-width:768px) {
#carousel-id .item {
height: 300px;
}
}
.carousel .item img{
width: 100%;
}
.zhuces{
margin-top: 8px;
margin-right: 10px;
}
/* National Creation, Japan, Film */
.row .col-lg-4 {
margin-top: 10px;
margin-bottom: 20px;
text-align: center;
border: 1px solid #ffffff;
background:rgb(198, 218, 233);
}
.img-circle {
margin-top: 20px;
}
/* Strongly recommended works */
.in-anishe-text{
/* border: 2px solid rgb(27, 231, 27); */
text-align: center;
}
#gengduo{
float: right;
margin-right: 50px;
}
.in-anishe-text img {
width: 133px;
height: 200px;
display: block;
margin: 0px auto;
}
.mod-cover-list-mask {
position: relative;
left: 0px;
display: block;
width: 133px;
height: 22px;
background-color: rgba(0,0,0,0.6);
color: #fff;
text-align:center;
margin: 0px auto;
}
.mod-cover-list-text:hover{
color: #fff;
}
.h3{
margin-left: 20px;
font-weight:bolder;
color: rgb(27, 231, 27)
}
#row2{
background:rgb(198, 218, 233);
}
#tui{
border: 1px solid rgb(27, 231, 27);
}
/* footer */
#foot{
width: 100%;
height: 200px;
background:rgb(18, 15, 22);
color: #fff;
line-height: 26px;
text-align: center;
padding-top: 50px;
margin-top: 3px;
}
#xiao{
margin-top: -15px;
}
#foot img{
width: 70px;
height: 70px;
margin: 3px;
}
</style>
3. Personal summary 😊
A set of qualified web pages should contain (specifically according to individual requirements)
- The page is divided into four parts: header, menu navigation bar (preferably drop-down), middle content section, and footer;
- All pages are hyperlinked to each other and can go to the third-level page, which consists of 5-10 pages;
- The unified layout of page style and style is displayed normally, 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, the use of form technology;
- The page is refreshing, beautiful, generous, and different.
- 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.
Fourth, more dry goods 🚀
1. If my blog is helpful to you, if you like the content of my blog, please "👍 Like" "✍️ Comment" "💙 Favorites" with one click!
2. ❤ [Focus on Me | Get More Sources | Quality Articles] takes you to learn about various front-end plug-ins, 3D cool effects, picture display, text effects, as well as site-wide templates, college graduate HTML templates, final big job templates, and so on! "There are many front-end developers here who are exploring front-end Node knowledge and learning from each other."
3. Questions related to the above content technology😈Welcome to exchange and learn together🔥!
💂[How to get]
gitee code cloud source code warehouse - welcome to Star: https://gitee.com/zhanyuqiu2022/my-app