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 introduction: This work is the theme of student personal homepage web design, HTML+CSS layout production, web front-end final assignment, college student web design homework source code, this is a good web page production, the picture 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 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>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>电影网站</title>
<link rel="stylesheet" href="css/main.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/icofont.css" />
<link rel="stylesheet" href="css/mian_style.css" />
<script src='./js/jquery.js'></script>
</head>
<body>
<!--头部开始 -->
<header class="header">
<div class="container">
<div class="header_area">
<div class="logo">
<a href="index.html">
<img src="picture/logo.png" alt="logo"/>
</a>
</div>
<div class="meau">
<ul>
<li>
<a class="active" href="index.html">首页</a>
</li>
<li>
<a href="movies.html">电影</a>
</li>
<li>
<a href="celebrities.html">明星</a>
</li>
<li>
<a href="hot.html">热点</a>
</li>
<li>
<a href="news.html">新闻</a>
</li>
<li style="width: 120px;">
<a href="###" class="theme-btn">
<i class="icofont icofont-ticket"></i>
订票
</a>
</li>
</ul>
</div>
</div>
</div>
<!--头部结束-->
</header>
<!--内容部分开始-->
<section id="content">
<!--banner开始-->
<div class="banner">
<ul class="list">
<li class="on"><a href="#"><img src="picture/b1.jpg" alt="" /></a></li>
<li><a href="#"><img src="picture/b2.jpg" alt="" /></a></li>
<li><a href="#"><img src="picture/b3.jpg" alt="" /></a></li>
<li><a href="#"><img src="picture/b4.jpg" alt="" /></a></li>
<li><a href="#"><img src="picture/b5.jpg" alt="" /></a></li>
</ul>
<ul class="btn">
<li class="on">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<a href="javascript:;" class="arrow left"><</a>
<a href="javascript:;" class="arrow right">></a>
</div>
<!--近期热播-->
<div class="con_area">
<div class="container">
<div class="recent_con">
<div class="con_top">
<h1>
<i class="icofont icofont-movie" ></i>
近期热播
</h1>
<a href="index.html" class="more">
MORE>>
</a>
</div>
<div class="con_main">
<ul style="overflow:hidden;margin-bottom: 20px;">
<li class="img_right">
<img src="picture/portfolio1.png" alt="1" />
<a>
<i class="icofont icofont-ui-play"></i>
</a>
<div class="portfolio-content">
<h2>Boyz II Men</h2>
<div class="review">
<div class="author-review">
<b class="icofont icofont-star"></b>
<b class="icofont icofont-star"></b>
<b class="icofont icofont-star"></b>
<b class="icofont icofont-star"></b>
<b class="icofont icofont-star"></b>
</div>
<h4>180k voters</h4>
</div>
</div>
</li>
<li class="img_right">
<img src="picture/portfolio2.png" alt="1" />
<a>
<i class="icofont icofont-ui-play"></i>
</a>
<h2>Boyz II Men</h2>
<div class="review">
<div class="author-review">
<b class="icofont icofont-star"></b>
<b class="icofont icofont-star"></b>
<b class="icofont icofont-star"></b>
<b class="icofont icofont-star"></b>
<b class="icofont icofont-star"></b>
</div>
<h4>180k voters</h4>
</div>
</li>
<li class="img_right">
<img src="picture/portfolio2.png" alt="1" />
<a>
<i class="icofont icofont-ui-play"></i>
</a>
<h2>Boyz II Men</h2>
<div class="review">
<div class="author-review">
<b class="icofont icofont-star"></b>
<b class="icofont icofont-star"></b>
<b class="icofont icofont-star"></b>
<b class="icofont icofont-star"></b>
<b class="icofont icofont-star"></b>
</div>
<h4>180k voters</h4>
</div>
</li>
<li>
<img src="picture/portfolio4.png" alt="1" />
<a>
<i class="icofont icofont-ui-play"></i>
</a>
<h2>Boyz II Men</h2>
<div class="review">
<div class="author-review">
<b class="icofont icofont-star"></b>
<b class="icofont icofont-star"></b>
<b class="icofont icofont-star"></b>
<b class="icofont icofont-star"></b>
<b class="icofont icofont-star"></b>
</div>
<h4>180k voters</h4>
</div>
</li>
</ul>
<ul>
<li class="img_right">
<img src="picture/portfolio5.png" alt="1" />
<a>
<i class="icofont icofont-ui-play"></i>
</a>
<h2>Boyz II Men</h2>
<div class="review">
<div class="author-review">
<b class="icofont icofont-star"></b>
<b class="icofont icofont-star"></b>
<b class="icofont icofont-star"></b>
<b class="icofont icofont-star"></b>
<b class="icofont icofont-star"></b>
</div>
<h4>180k voters</h4>
</div>
</li>
<li class="img_right">
<img src="picture/portfolio6.png" alt="1" />
<a>
<i class="icofont icofont-ui-play"></i>
</a>
<h2>Boyz II Men</h2>
<div class="review">
<div class="author-review">
<b class="icofont icofont-star"></b>
<b class="icofont icofont-star"></b>
<b class="icofont icofont-star"></b>
<b class="icofont icofont-star"></b>
<b class="icofont icofont-star"></b>
</div>
<h4>180k voters</h4>
</div>
</li>
<li class="img_right">
<img src="picture/portfolio2.png" alt="1" />
<a>
<i class="icofont icofont-ui-play"></i>
</a>
<h2>Boyz II Men</h2>
<div class="review">
<div class="author-review">
<b class="icofont icofont-star"></b>
<b class="icofont icofont-star"></b>
<b class="icofont icofont-star"></b>
<b class="icofont icofont-star"></b>
<b class="icofont icofont-star"></b>
</div>
<h4>180k voters</h4>
</div>
</li>
<li>
<img src="picture/portfolio4.png" alt="1" />
<a>
<i class="icofont icofont-ui-play"></i>
</a>
<h2>Boyz II Men</h2>
<div class="review">
<div class="author-review">
<b class="icofont icofont-star"></b>
<b class="icofont icofont-star"></b>
<b class="icofont icofont-star"></b>
<b class="icofont icofont-star"></b>
<b class="icofont icofont-star"></b>
</div>
<h4>180k voters</h4>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<!--经典电影-->
<div class="con_area">
<div class="container">
<div class="jd_con">
<div class="con_top">
<h1>
<i class="icofont icofont-film" ></i>
经典电影
</h1>
<a href="index.html" class="more">
MORE>>
</a>
</div>
<div class="row" style="overflow: hidden; width: 100%;">
<div class="col-md-9">
<div class="video-area">
<img src="picture/video1.png" alt="video" />
<a href="###" class="popup-youtube">
<i class="icofont icofont-ui-play"></i>
</a>
<div class="video-text">
<h2>Angle of Death</h2>
<div class="review">
<div class="author-review">
<i class="icofont icofont-star"></i>
<i class="icofont icofont-star"></i>
<i class="icofont icofont-star"></i>
<i class="icofont icofont-star"></i>
<i class="icofont icofont-star"></i>
</div>
<h4>180k voters</h4>
</div>
</div>
</div>
<div class="video-area">
<img src="picture/video1.png" alt="video" />
<a href="###" class="popup-youtube">
<i class="icofont icofont-ui-play"></i>
</a>
<div class="video-text">
<h2>Angle of Death</h2>
<div class="review">
<div class="author-review">
<i class="icofont icofont-star"></i>
<i class="icofont icofont-star"></i>
<i class="icofont icofont-star"></i>
<i class="icofont icofont-star"></i>
<i class="icofont icofont-star"></i>
</div>
<h4>180k voters</h4>
</div>
</div>
</div>
<div class="video-area">
<img src="picture/video1.png" alt="video" />
<a href="###" class="popup-youtube">
<i class="icofont icofont-ui-play"></i>
</a>
<div class="video-text">
<h2>Angle of Death</h2>
<div class="review">
<div class="author-review">
<i class="icofont icofont-star"></i>
<i class="icofont icofont-star"></i>
<i class="icofont icofont-star"></i>
<i class="icofont icofont-star"></i>
<i class="icofont icofont-star"></i>
</div>
<h4>180k voters</h4>
</div>
</div>
</div>
<div class="video-area">
<img src="picture/video1.png" alt="video" />
<a href="###" class="popup-youtube">
<i class="icofont icofont-ui-play"></i>
</a>
<div class="video-text">
<h2>Angle of Death</h2>
<div class="review">
<div class="author-review">
<i class="icofont icofont-star"></i>
<i class="icofont icofont-star"></i>
<i class="icofont icofont-star"></i>
<i class="icofont icofont-star"></i>
<i class="icofont icofont-star"></i>
</div>
<h4>180k voters</h4>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 最新电影-->
<div class="con_area">
<div class="container">
<div class="jd_con">
<div class="con_top">
<h1>
<i class="icofont icofont-coffee-cup" ></i>
最新电影
</h1>
<a href="index.html" class="more">
MORE>>
</a>
</div>
</div>
<div class="news-slide-area">
<div class="news-slider">
<div class="single-news">
<div class="news-bg-1"></div>
<div class="news-date">
<h2><span>NOV</span> 25</h2>
<h1>2017</h1>
</div>
<div class="news-content">
<h2>The Witch Queen</h2>
<p>Witch Queen is a tall woman with a slim build. She has pink hair, which is pulled up under her hat, and teal eyes.</p>
</div>
<a href="#">Read More</a>
</div>
<div class="single-news">
<div class="news-bg-2"></div>
<div class="news-date">
<h2><span>NOV</span> 25</h2>
<h1>2017</h1>
</div>
<div class="news-content">
<h2>The Witch Queen</h2>
<p>Witch Queen is a tall woman with a slim build. She has pink hair, which is pulled up under her hat, and teal eyes.</p>
</div>
<a href="#">Read More</a>
</div>
<div class="single-news">
<div class="news-bg-3"></div>
<div class="news-date">
<h2><span>NOV</span> 25</h2>
<h1>2017</h1>
</div>
<div class="news-content">
<h2>The Witch Queen</h2>
<p>Witch Queen is a tall woman with a slim build. She has pink hair, which is pulled up under her hat, and teal eyes.</p>
</div>
<a href="#">Read More</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!--end start-->
<footer id="end">
<div class="container">
<span class="company">
北京时代国际影业有限公司
</span>
</div>
</footer>
</body>
<script type="text/javascript" src="js/main.js"></script>
</html>
2. CSS code
body{
line-height: 24px;
font-size: 14px;
color: #b6b7b9;
background: #13151f;
font-family: 'Poppins', sans-serif;
font-weight: 400;
position: relative;
/* height: 5000px;*/
}
.header{
padding: 18px 0;
width: 100%;
border-bottom: 1px solid #252838;
z-index: 99;
}
.header_area{
overflow: hidden;
}
.container{
max-width: 1140px;
margin: 0 auto;
}
.logo{
float: left;
}
.logo a{
display: inline-block;
}
.meau{
float: right;
padding-top: 34px;
}
.meau li{
float: left;
width: 90px;
text-align: center;
}
.meau li a{
font-family: "微软雅黑";
font-size: 14px;
color: #ffffff;
text-decoration: none;
}
.meau li a:hover{
color: #eb315a;
}
.meau li .active{
color: #eb315a;
}
.meau li .theme-btn{
background: #eb315a;
border: 1px solid #eb315a;
color: #fff;
border-radius: 35px;
padding: 5px 25px;
display: inline-block;
font-size: 15px;
cursor: pointer;
font-weight: 500;
}
.meau li .theme-btn:hover{
color: #eb315a;
border: 1px solid #eb315a;
background: rgba(235,49,90,0.2);
}
/*banner*/
.banner{
width: 100%;
height: 450px;
margin: 0px auto;
overflow: hidden;
position: relative;
}
.list li{
position: absolute;
width: 100%;
text-align: center;
}
.btn{
font:14px/2.5em "微软雅黑";
text-align: center;
position: absolute;
left: 50%;
transform: translateX(-55%);
bottom:40px;
z-index: 2;
}
.btn li{
float: left;
width: 30px;
line-height: 30px;
border-radius: 50%;
background: salmon;
margin: 0 5px;
color: #fff;
cursor: pointer;
}
.btn .on{
background: slateblue;
}
.list .on{
z-index: 1;
}
.arrow{
position: absolute;
top: 50%;
transform: translateY(-40%);
width: 30px;
text-align: center;
line-height: 60px;
background: rgba(0,0,0,0.3);
color: #fff;
text-decoration: none;
font-size: 20px;
z-index: 2;
}
.right{
right: 14%;
}
.left{
left:14%;
}
.arrow:hover{
background: rgba(0,0,0,0.5);
font-weight: bold;
text-decoration: none;
}
/*近期热播*/
.con_area{
padding-top: 30px;
}
.recent_con{
overflow: hidden;
}
.con_top{
height: 54px;
padding:8px 0;
border-bottom: 1px solid #ffffff;
}
.con_top h1{
float: left;
}
.con_top h1 i{
color: #fece50;
font-size: 40px;
margin-right: 5px;
}
h1{
font-size: 36px;
color: #ffffff;
}
.more{
float: right;
line-height: 74px;
color: #eb315a;
}
.con_main{
margin-top: 50px;
}
.con_main li{
float: left;
display: block;
position: relative;
cursor: pointer;
width: 255px;
}
.con_main li:hover img{
width: 102%;
height: 102%;
}
.con_main li img{
transition: 0.9s
}
.con_main .img_right{
margin-right: 2.2%;
}
.con_main li a{
display: block;
position: absolute;
top: 42%;
margin-top: -30px;
margin: auto;
left: 50%;
margin-left: -30px;
}
.con_main li i{
width: 60px;
height: 60px;
line-height: 60px;
color: #fff;
border: 2px solid #fff;
border-radius: 50%;
text-align: center;
font-size: 18px;
display: inline-block;
transition: all 0.4s;
}
.con_main li i:hover{
color: orange;
border-color: orange;
}
/*底部*/
#end{
margin-top: 30px;
background:#202334;
}
.company{
width: 100%;
display: inline-block;
padding: 20px 0px;
text-align: center;
}
/*详情页标题*/
.breadcrumb-area-content h2{
margin-top: 30px;
}
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. Experience
Many developers believe that long-term design is an innate ability, and creativity is innate. But design is a skill that can be learned like anything else. You don’t have to be a born artist to create a beautiful website. It takes practice. You don’t know how to be familiar with it. The limitations are too big. The content format you want must follow the idea. feel.
① Stand out from the crowd. Many developers like to port pages from other sites, and it's easy to see that it wasn't designed by them. If the purpose of your personal website is to show your ability, then using a template may reduce others' affirmation of you, and the unique style of your own design will make your site stand out among many sites.
② practice skills. Designing it will help you practice design principles, tools, HTML and CSS. It will be easier for you to develop user interfaces and bring them to the web. Design a personal site that is unique and modern.
When I was doing private work before, I didn’t know how to design pages, and when I moved other site pages, I didn’t know how to use tools when I modified pictures and some pages. The designed pages were rigid and inflexible, and the customers were not satisfied. Ordinary, does not give you the feeling of heart.
③ Better application performance. Your website will be lightweight and have better performance with custom CSS. If you're including a U library or template, it's likely to contain a lot of code to cover every possible customization you're not using. If unused code is sent to users, it can negatively impact your site's performance. Slow loading and slow opening of web pages are not accepted by many people.
④ Development of vocational skills. In a web development role, you may not have to implement a complete website design from scratch, but you should be able to produce a great-looking interface that is consistent with modern designs. Becoming a "full-stack developer" usually means being proficient in back-end languages or front-end JavaScript frameworks, and at the same time being familiar with design and product knowledge. A full-stack developer should have some basic design knowledge and be able to provide users with a consistent experience. Of course, there is no doubt that I have learned a lot of technical knowledge from it.
⑤It might be interesting. It's a fun experience creating something you're proud of. If you spend some time practicing it, thinking about it, it is better to learn from it. Finding beauty in life is a beautiful thing, but I think creating beauty is more proud.
Five, wonderful recommendation
If you see this, please support me 【点赞，好评，收藏】three times. Your support is the driving force for my creation.