HTML instance web page code, this example is suitable for beginners of HTML. This example has css style settings and div style pattern. This is a comprehensive example to help students learn. This article will introduce how to practice design by designing a personal website from scratch and converting it into code.
β½ Brilliant Column Recommendation ππ»ππ»ππ»
β€ [Author Home Page- π₯ Get more quality source)
β€ [web Front End Big Job- π₯π₯ Finished Project Quality Actual Warfare Cases (1000 sets)
1. Introduction to Web Pages π
1. Introduction to Web Page: This work is designed for students'personal homepage with themes, HTML+CSS layout, big homework at the end of the web, source code for undergraduate homepage design. It is a good web page production with a clear picture and simple code for students. It is very suitable for beginners to learn and use.
2. Web page editing: Web page work code is simple and can be edited using any HTML editing software (such as Dreamweaver, HBuilder, Vscode, Sublime, Webstorm, Text, Notepad+, etc.).
3. Knowledge application: The technology mainly applies the knowledge of web pages: Div+CSS, mouse-over effects, Table, navigation bar effects, Banner, forms, secondary and tertiary pages, video, audio elements, Flash, and designed the knowledge points needed for Logo (source file).
1. Web Page Effect π
2. Code Display π
1.HTML code structure π§±
The code is as follows (example): Here is only a partial 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>Queen's net</title>
<link href="css/public.css" rel="stylesheet" type="text/css" />
<link href="css/index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-----Head Start------->
<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">home page</a></li>
<li><a href="about.html">Introduction to the King of Pirates</a></li>
<li><a href="jingdian.html">Popular People</a></li>
<li><a href="minsu.html">Three Powers</a></li>
<li><a href="techan.html">Consulting Eight Diagrams</a></li>
<li><a href="liuyan.html">Guest Message</a></li>
</ul>
</div>
</div>
<!---nav End---->
<!-----banner------->
<div class="ban">
<img src="images/banner3.gif" width="1000" height="335" border="0" />
</div>
<!-----End of Head------->
<!-----main start------->
<div class="main">
<div class="box1">
<div class="shang-left">
<div class="gk-title"><a href="about.html"><h1>Introduction to the King of Pirates</h1></a></div>
<div class="gk">
<img src="images/gktu.jpg" />
<p><ONE PIECE>(Pirate King, Nautical King) for short"OP"οΌIt is a juvenile comic book by Japanese comic artist Ichiro Oda. In Weekly Youth Jump>1997 Year 34 begins serialization. Describes the youth flying with rubber body and straw cap to become"One Piece"Story of adventures in the sea for your goals and companions. There are also peripheral media products such as the Theater Edition of the King of Thieves, TV animations and games with the same name. By June 2017, issuance exceeded 4 in the world.1 Billions of books, is the world's largest distribution of Japanese comic books. Translated versions of comic book single lines have been published and distributed in more than 30 countries and regions outside Japan.</p>
</div>
</div>
<div class="xz">
<a href="techan.html"><h1>Consulting Eight Diagrams<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 Powers</h1></a></div>
<div class="count">
<br />
<p>In the name of absolute righteousness, the Navy Department, a direct organization of the world's government in the Prince of Pirates, proposed that the world's maritime order be maintained."Absolute Justice". The correct name for the Navy Department is"Marinford"οΌDestroyed after the war with White Beard, it has moved to the New World Naval headquarters.</p>
<p>The four emperors of pirates are recognized as the four thieves in the world. They dominate in the new world like emperors. They are named after them. They are powerful and have outstanding personal abilities. In general, they gather large quantities of high reward thieves and their squid gangs. </p>
<p>The Seven Kings of the Wuhan Sea is an overly dangerous force that holds both freedom and status in its hands. Although seemingly neutral, it is actually regarded as its enemy by both the Navy and the pirates. Qiwuhai is only the government's strategy against the four emperors, and the relationship between them is mutual use. </p>
</div>
</div>
</div>
<div class="meishi">
<div class="yy-title"><a href="jingdian.html"><h1>Pirate King Popular</h1></a></div>
<div class="ms">
<ul>
<li><img src="images/jd1.jpg" /><p>Monkey D Luffy</p></li>
<li><img src="images/jd2.jpg" /><p>Name</p></li>
<li><img src="images/jd3.jpg" /><p>Yamagata</p></li>
<li><img src="images/jd4.jpg" /><p>Usop</p></li>
<li><img src="images/jd5.jpg" /><p>Sauron</p></li>
</ul>
</div>
</div>
<!-----main End------->
<!-----bottom start------->
<div class="bottom">
<div class="bottom-box">
<p>2018-2021@ Copyright - King of Thieves </p>
</div>
</div>
<!-----bottom End------->
</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: "Bold"; }
.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: "Bold"; }
.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: "Bold"; }
.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 End -----------------*/
3. Personal Summary π
A set of qualified pages should contain (depending on individual requirements)
- The page is divided into four parts: the header, the menu navigation bar (preferably drop-down), the middle content section, and the footer.
- All pages are hyperlinked to each other, up to three-level pages, consisting of 5-10 pages;
- Page style uniform layout display normal, not messy, using Div+Css technology;
- The menu is beautiful and striking, and the secondary menu can pop up and jump normally.
- To have JS special effects, such as timer switching and manual switching of picture news;
- There are multimedia elements on the page, such as gif, video, music, the use of form technology;
- The pages are refreshing, beautiful and generous.
- The front-end program of the website should not only be able to present the content required by users, but also satisfy the requirements of good layout, beautiful interface, elegant color matching and diverse forms of expression.
4. More Dry Goods π
1. If my blog is helpful to you and if you like my blog content, please " π Zan"" βοΈ Comments"" π Collection "One button, three links!"
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, and site-wide templates, graduate HTML templates, large final 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. The above content technology related issues π Welcome to exchange learning π₯ [Home page- π Get more quality source)
