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 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>One Piece</title>
<link href="css/public.css" rel="stylesheet" type="text/css" />
<link href="css/index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-----head starts------->
<div class="top">
<a href="index.html"><img style="float:left" src="images/logo.jpg" /></a>
</div>
<!---nav start---->
<div class="daohang">
<div id="nav">
<ul>
<li><a href="index.html">front page</a></li>
<li><a href="about.html">Introduction to One Piece</a></li>
<li><a href="jingdian.html">popular</a></li>
<li><a href="minsu.html">three major forces</a></li>
<li><a href="techan.html">Consulting gossip</a></li>
<li><a href="liuyan.html">VIP message</a></li>
</ul>
</div>
</div>
<!---nav Finish---->
<!-----banner------->
<div class="ban">
<img src="images/banner3.gif" width="1000" height="335" border="0" />
</div>
<!-----head end------->
<!-----main start------->
<div class="main">
<div class="box1">
<div class="shang-left">
<div class="gk-title"><a href="about.html"><h1>Introduction to One Piece</h1></a></div>
<div class="gk">
<img src="images/gktu.jpg" />
<p><ONE PIECE>(One Piece, One Piece) for short"OP"，It is a juvenile manga by Japanese manga artist Eiichiro Oda. In "Weekly Boys" Jump>1997 Serialization began on the 34th of the year. Describes a young Luffy with a rubber body and a straw hat to become a"One Piece"A story about an adventure in the sea for a target and a companion. In addition, there are peripheral media products such as the One Piece theatrical version, TV animation and games of the same name. As of June 2017, the circulation has exceeded 4 in the world.1 It is the most circulated Japanese manga in the world. The translated version of the manga is published in more than 30 countries and regions outside of Japan.</p>
</div>
</div>
<div class="xz">
<a href="techan.html"><h1>Consulting gossip<span><i> More>></i></span></h1></a>
<a href="tc01.html"><img src="images/tc01.jpg" /></a>
<a href="tc02.html"><img src="images/tc02.jpg" /></a>
<a href="tc03.html"><img src="images/tc03.jpg" /></a>
<a href="tc04.html"><img src="images/tc04.jpg" /></a>
</div>
<div class="shang-right">
<div class="count-title"><a href="minsu.html"><h1>three major forces</h1></a></div>
<div class="count">
<br />
<p>The Navy Headquarters, the organization directly under the World Government in "One Piece", maintains the security of the world's seas in the name of absolute justice, and proposes"absolute justice". The correct name for the Naval Headquarters is"marineford"，Destroyed after the battle with Whitebeard, it has now been relocated to the New World Naval Headquarters.</p>
<p>The Four Emperors of the Pirates are the four major pirates recognized in the world of pirates. They dominate the new world. They are like emperors in the new world, hence the name. They are powerful and have outstanding personal abilities. Generally, they have a large number of high rewards. King's Great Pirate and his pirate group. </p>
<p>The King's Qiwuhai is an overly dangerous force that holds both freedom and status in its hands. Although it appears to be neutral on the surface, it is actually regarded as an enemy by the navy and pirates. Qiwuhai is just the government's strategy against the Four Emperors, and the relationship with the government is mutual use. </p>
</div>
</div>
</div>
<div class="meishi">
<div class="yy-title"><a href="jingdian.html"><h1>One Piece Popular Characters</h1></a></div>
<div class="ms">
<ul>
<li><img src="images/jd1.jpg" /><p>Luffy</p></li>
<li><img src="images/jd2.jpg" /><p>Nami</p></li>
<li><img src="images/jd3.jpg" /><p>Sanji</p></li>
<li><img src="images/jd4.jpg" /><p>Usopp</p></li>
<li><img src="images/jd5.jpg" /><p>Sauron</p></li>
</ul>
</div>
</div>
<!-----main Finish------->
<!-----bottom start------->
<div class="bottom">
<div class="bottom-box">
<p>2018-2021@ All rights reserved One Piece </p>
</div>
</div>
<!-----bottom Finish------->
</body>
</html>
2.CSS style code 🏠
@charset "utf-8";
/* CSS Document */
/*---------main start-----------------*/
.box1{ width:1000px; height:311px; margin:0 auto;}
.shang-left{float:left;}
.gk-title{ width:308px; height:40px; background:#3e8400; }
.gk-title h1{ height: 40px;
line-height: 40px;
width: 130px;
margin-left: 20px;
font-size: 16px;
color: #FFF;
font-family: "black body"; }
.gk{ width:296px; height:262px; border-left:#8c8c8c 1px solid; border-right:#8c8c8c 1px solid; border-bottom:#8c8c8c 1px solid; background:#FFF; padding:0px 5px;padding-top: 10px; }
.gk span{ color:#F00;}
.gk img{ margin-right:10px; float:left;}
.xz{ width:347px; height:311px; padding-left:5px; margin:0px 15px;border:#8c8c8c 1px solid; background:#FFF; float:left; overflow:hidden;}
.xz h1{height:35px; line-height:35px; font-size:14px; color:#333; font-family:"bold"; }
.xz span{font-size:12px; color:#333; color:#408602; font-family: "Courier New", Courier, monospace}
.xz img{ width:160px; height:120px; margin:5px; float:left;}
.shang-right{float:left;}
.count-title{ width:308px; height:40px; background: #3e8400; }
.count-title h1{ height: 40px;
line-height: 40px;
width: 130px;
margin-left: 20px;
font-size: 16px;
color: #FFF;
font-family: "black body"; }
.count{ width:286px; height:272px; border-left:#8c8c8c 1px solid; border-right:#8c8c8c 1px solid; border-bottom:#8c8c8c 1px solid; background:#FFF; padding:0px 10px;}
.count img{ margin:10px 0px 10px 20px;}
.count p{ line-height: 20px;
font-size: 12px;}
.count span{ color:#408602; font-size:16px; font-family: "Bold";}
.yy-title{ width:1000px; height: 40px;
background: #3e8400;}
.yy-title h1{ height: 40px;
line-height: 40px;
width: 130px;
margin-left: 20px;
font-size: 16px;
color: #FFF;
font-family: "black body"; }
.yy{ width: 978px;
padding:10px;
height: 190px;
border-left: #6c6b6b 1px solid;
border-right: #6c6b6b 1px solid;
border-bottom: #6c6b6b 1px solid;
background: #FFF; }
.meishi{ margin-top:15px !important; margin-bottom:15px; }
.ms{ width: 978px;
padding:10px;
height: 190px;
border-left: #6c6b6b 1px solid;
border-right: #6c6b6b 1px solid;
border-bottom: #6c6b6b 1px solid;
background: #FFF; }
.ms ul{}
.ms ul li{ width:185px; height:180px; margin:5px; float:left;}
.ms ul li img{ width:185px; height:150px;}
.ms ul li p{ text-align:center; font-size:14px;}
/*---------main Finish-----------------*/
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 my blog content, please "👍 Like" "✍️ Comment" "💙 Favorites" with one click!
2. ❤️ [Watch Me | Get More Sources | Quality Articles] Take you to learn about various front-end plug-ins, 3D cool effects, picture display, text effects, and site-wide templates, graduate HTML templates, large homework templates at the end of the term, 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