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 effect
- 2. Code display
-
- 1.HTML code
- 2. CSS code
- 3. Personal summary
- Four, wonderful recommendation
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~
<html><!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=gb2312" />
<title>home</title>
<link rel="stylesheet" type="text/css" href="css/index.css" tppabs="http://yanshi.brahj.cn/chengpin/dianying/css/index .css">
<script src="js/jquery-1.4a2.min.js" tppabs="http://yanshi.brahj.cn/chengpin/dianying/js/jquery-1.4a2.min.js" type= "text/javascript"></script>
<script src="js/jquery.KinSlideshow-1.2.1.min.js" tppabs="http://yanshi.brahj.cn/chengpin/dianying/js/jquery.KinSlideshow-1.2.1.min .js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){<!-- -->
$("#KinSlideshow").KinSlideshow();
})
</script>
<style type="text/css">
.code{<!-- --> height:auto; padding:20px; border:1px solid #9EC9FE; background:#ECF3FD;}
.code pre{<!-- -->font-size:14px;}
.info{<!-- --> font-size:12px; color:#666666; font-family:Verdana; margin:20px 0 50px 0;}
.info p{<!-- --> margin:0; padding:0; line-height:22px; text-indent:40px;}
h2.title{<!-- --> margin:0; padding:0; margin-top:50px; font-size:18px; }
h3.title{<!-- --> font-size:16px;}
.importInfo{<!-- --> font-family:Verdana; font-size:14px;}
</style>
</head>
<body bgcolor="#0d0908">
<center>
<div class="head"><img src="images/top.jpg" tppabs="http://yanshi.brahj.cn/chengpin/dianying/images/top.jpg" /> </div>
<div class="page">
<div class="nav">
<p>Hollywood blockbuster recommendation</p>
</div>
<div class="content" style="padding-top:10px;">
<div class="guntu">
<marquee><img src="images/h1.jpg" tppabs="http://yanshi.brahj.cn/chengpin/dianying/images/h1.jpg" width="160" height= "90" /> <img src="images/h2.jpg" tppabs="http://yanshi.brahj.cn/chengpin/dianying/images/h2.jpg" width="160 " height="90" /> <img src="images/h3.jpg" tppabs="http://yanshi.brahj.cn/chengpin/dianying/images/h3.jpg" width ="160" height="90" /> <img src="images/h4.jpg" tppabs="http://yanshi.brahj.cn/chengpin/dianying/images/h4. jpg" width="160" height="90" /> <img src="images/h5.jpg" tppabs="http://yanshi.brahj.cn/chengpin/dianying/ images/h5.jpg" width="160" height="90" /> <img src="images/h6.jpg" tppabs="http://yanshi.brahj.cn/ chengpin/dianying/images/h6.jpg" width="160" height="90" /></marquee>
</div>
<div class="jianzhu"><p>american comedy</p><p>british comedy</p></div>
<div class="jianzhu_bot">
<div class="jianzhuA">
<a href="dianying1.html" tppabs="http://yanshi.brahj.cn/chengpin/dianying/dianying1.html"><img src="images/1.jpg" tppabs= "http://yanshi.brahj.cn/chengpin/dianying/images/1.jpg" border="0" align="left" style=" float:left;"/>< /a>
<p style=" float:left; margin-left:10px; display:inline">The protagonists of "Mamma Mia" are a mother and daughter on a Greek island who make a living by opening a restaurant. The daughter is about to get married, and she really hopes that her father can personally hand her hand to the groom on the wedding day, but unfortunately, her mother never told her who her father is. So before she got married, she peeked at her mother's diary and found that her mother had three lovers who were most likely to be her biological father. In desperation, she sent three invitations to invite them to attend according to the old letter addresses she found. her wedding. Without her mother's knowledge, the heroine's "three fathers" are in...<a href="dianying1.html" tppabs="http://yanshi.brahj.cn/chengpin/dianying/ dianying1.html">[detailed]</a><br />
</p>
</div>
<div class="jianzhuA">
<a href="dianying6.html" tppabs="http://yanshi.brahj.cn/chengpin/dianying/dianying6.html"><img src="images/6.jpg" tppabs= "http://yanshi.brahj.cn/chengpin/dianying/images/6.jpg" border="0" align="left" style=" float:left;"/>< /a>
<p style=" float:left; margin-left:10px; display:inline"> If you think this is a movie about ghost zombies, then you are dead wrong, this film is adapted from Daniel . Cross's graphic novel of the same name is about two teenage girls in their teens who have a strange, unsure of what to do with in the time between high school graduation and the rest of their lives. In their view, the real world during this period is more terrifying than the ghost world. <br />Enid and Rebecca are very good friends, the kind of friends who are very comfortable when they are together
...<a href="dianying6.html" tppabs="http://yanshi.brahj.cn/chengpin/dianying/dianying6.html">[detailed]</a></p>
</div>
</div>
<div class="jianzhu_bot">
<div class="jianzhuA">
<a href="dianying2.html" tppabs="http://yanshi.brahj.cn/chengpin/dianying/dianying2.html"><img src="images/2.jpg" tppabs= "http://yanshi.brahj.cn/chengpin/dianying/images/2.jpg" border="0" align="left" style=" float:left;"/>< /a>
<p style=" float:left; margin-left:10px; display:inline">This film is based on the 1998 French film "Le Diner
de Cons" was edited or not. The protagonist and a group of friends who pretend to be smart and smart meet to hold a "idiot dinner party". Come for fun. Then the protagonist finds a silly-looking man who he thinks would be the perfect candidate. Unexpectedly, because of the accident, the other party's stupid behavior fooled the protagonist and made him complain endlessly. ...<a href="dianying2.html" tppabs="http://yanshi.brahj.cn/chengpin/dianying/dianying2.html">[detailed]</a><br />
</p>
</div>
<div class="jianzhuA">
<a href="dianying7.html" tppabs="http://yanshi.brahj.cn/chengpin/dianying/dianying7.html"><img src="images/7.jpg" tppabs= "http://yanshi.brahj.cn/chengpin/dianying/images/7.jpg" border="0" align="left" style=" float:left;"/>< /a>
<p style=" float:left; margin-left:10px; display:inline"> In this turbulent world, there are few units as trustworthy as British Intelligence. It has the world's top intelligence agents, the most cutting-edge advanced technology, the sharpest weapons and the most effective intelligence collection network, and every commissioner of the British Intelligence Agency is a top master who is proficient in eighteen kinds of martial arts .
<br />
So when they got the information that someone wanted to steal the British royal jewels, they sent the top super spy in the bureau: Special Agent No. 1 of Tianzi to investigate. But... he was quickly killed. worse
...<a href="dianying7.html" tppabs="http://yanshi.brahj.cn/chengpin/dianying/dianying7.html">[detailed]</a></p>
</div>
</div>
<div class="jianzhu_bot">
<div class="jianzhuA">
<a href="dianying3.html" tppabs="http://yanshi.brahj.cn/chengpin/dianying/dianying3.html"><img src="images/3.jpg" tppabs= "http://yanshi.brahj.cn/chengpin/dianying/images/3.jpg" border="0" align="left" style=" float:left;"/>< /a>
<p style=" float:left; margin-left:10px; display:inline">For Pete Calvin (played by Paul Rudd), who has just turned 30, there is nothing like this The thing made him even more embarrassed-one night not long ago, he proposed to his girlfriend Zooey (played by Rashida Jones) who had been with him for several years, and Zooey also agreed to his proposal. Originally, this was a very happy thing, but when Pete started preparing for the wedding, he realized that money is not a problem, time is not a problem, booking a hotel, choosing a wedding dress and choosing a honeymoon vacation are all problems. The biggest problem is that Pete There is no one who can be his newlywed best man...<a href="dianying3.html" tppabs="http://yanshi.brahj.cn/chengpin/dianying/dianying3.html"> [Details]</a><br />
</p>
</div>
<div class="jianzhuA">
<a href="dianying8.html" tppabs="http://yanshi.brahj.cn/chengpin/dianying/dianying8.html"><img src="images/8.jpg" tppabs= "http://yanshi.brahj.cn/chengpin/dianying/images/8.jpg" border="0" align="left" style=" float:left;"/>< /a>
<p style=" float:left; margin-left:10px; display:inline"> The film tells the story of King George VI, father of Queen Elizabeth II. George VI is the younger brother of Edward VIII who gave up his country for the sake of beauty. After Edward abdicated, he reluctantly sat on the throne of king. However, George VI had a very serious stutter, and it was very difficult to speak, and he couldn't even stutter a few simple words. Fortunately, he met the speech therapist Lionel (Lionel)
Logue), through a series of training the two became good friends, and the king's stuttering also improved a lot...<a href="dianying8.html" tppabs="http://yanshi.brahj.cn/chengpin/ dianying/dianying8.html">[detailed]</a></p>
</div>
</div>
<div class="jianzhu_bot">
<div class="jianzhuA">
<a href="dianying4.html" tppabs="http://yanshi.brahj.cn/chengpin/dianying/dianying4.html"><img src="images/4.jpg" tppabs= "http://yanshi.brahj.cn/chengpin/dianying/images/4.jpg" border="0" align="left" style=" float:left;"/>< /a>
<p style=" float:left; margin-left:10px; display:inline">Also known as: Puss in Boots Story / Puss in Shoes Swordsman (Taiwan)
/ Invincible Cat Swordsman (Hong Kong)<br />
Before Puss in Boots met Shrek, he teamed up with Humpty Dumpty (the famous fairy tale character, a guy with a body like an egg, voiced by Zach Galifianakis), the valiant catwoman Kitty (Sara Alma Hayek) to protect Mother Goose's golden eggs from being stolen by bad guys. <br />
...<a href="dianying4.html" tppabs="http://yanshi.brahj.cn/chengpin/dianying/dianying4.html">[detailed]</a><br />
</p>
</div>
<div class="jianzhuA">
<a href="dianying9.html" tppabs="http://yanshi.brahj.cn/chengpin/dianying/dianying9.html"><img src="images/9.jpg" tppabs= "http://yanshi.brahj.cn/chengpin/dianying/images/9.jpg" border="0" align="left" style=" float:left;"/>< /a>
<p style=" float:left; margin-left:10px; display:inline"> Alias: Ein russischer
Sommer Askin son mevsimi Tolsto, le dernier automne <br />
Starring: Christopher Plummer, Helen Mirren, James McAvoy, Paul Giamatti, John Sessions, Patrick Kennedy, Kerry Conton, Ann-Marie Duff<br />Director: Michael Hoffman<br />
...<a href="dianying9.html" tppabs="http://yanshi.brahj.cn/chengpin/dianying/dianying9.html">[detailed]</a></p>
</div>
</div>
<div class="jianzhu_bot">
<div class="jianzhuA">
<a href="dianying5.html" tppabs="http://yanshi.brahj.cn/chengpin/dianying/dianying5.html"><img src="images/5.jpg" tppabs= "http://yanshi.brahj.cn/chengpin/dianying/images/5.jpg" border="0" align="left" style=" float:left;"/>< /a>
<p style=" float:left; margin-left:10px; display:inline">In order to fulfill his father's wish, Victor (Tom Hanks
Tom Hanks) from his old country to Kennedy Airport in the United States by plane, but something dramatic happened: he was told that a coup had taken place in his motherland, and his id card and passport had expired one by one, and his visa could no longer be used. Victor, who was in a dilemma, had to stay at the airport, waiting for the new documents to be processed. <br />
However, he waited at the airport for a full nine months. During these 9 months, he used the airport toilet to wash and slept in the waiting room. He has learned to adapt to local conditions and take care of his own life at the airport...<a href="dianying5.html" tppabs=" http://yanshi.brahj.cn/chengpin/dianying/dianying5.html">[detailed]</a><br />
</p>
</div>
<div class="jianzhuA">
<a href="dianying10.html" tppabs="http://yanshi.brahj.cn/chengpin/dianying/dianying10.html"><img src="images/10.jpg" tppabs= "http://yanshi.brahj.cn/chengpin/dianying/images/10.jpg" border="0" align="left" style=" float:left;"/>< /a>
<p style=" float:left; margin-left:10px; display:inline"> A Russian gang in Leeds is lawless in the UK, abducting Eastern Europeans into the UK through containers, these Eastern European women are sold to sex services, men are forced to participate in illegal underground fighting. However, they and local businessman Gabe
Taylor had a conflict ...<a href="dianying10.html" tppabs="http://yanshi.brahj.cn/chengpin/dianying/dianying10.html">[detailed]</a></p>
</div>
</div>
</div>
</div><div class="foot"><p>Production time: June 2012</p></div>
</center>
</body>
</html>
2.CSS code
/* CSS Document */
body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{<!-- -->margin:0;padding:0;border :0;}
*{<!-- -->margin:0;padding:0;border:0; font-family:"Times New Roman", Times, serif;}
body {<!-- -->font-family:"Times New Roman", Times, serif;font-size: 12px;color:#000000;line-height: 20px;text-align:left}
ul,li{<!-- -->list-style-type:none;}
.head{<!-- -->width:1002px; margin:0 auto; text-align:left; height:260px;}
.page{<!-- -->width:1002px; margin:0 auto; background:#FFFFFF;padding-top:5px;}
.nav{<!-- -->width:1002px; height:30px; background:url(http://www.meimeipet.com/chengpin/dianying/images/nav_bg.gif) repeat-x; line-height: 30px; text-align:center; font-size:14px; font-weight:bold; color:#ffffff;}
.foot{<!-- -->width:1002px; margin:0 auto; padding:20px 0; color:#FFFFFF}
.content{<!-- -->width:1002px; padding:30px 0; text-align:left;}
.guntu{<!-- -->width:1002px; height:110px; margin:0 auto; overflow:hidden; padding-bottom:10px;}
.jianzhu{<!-- -->width:982px; height:26px; margin:0 auto; background:#565050; line-height:26px;}
.jianzhu p{<!-- -->line-height:26px; color:#FFFFFF;width:440px; float:left; margin-left:40px; display:inline; height:26px; font-weight:bold; font-size: 14px; text-align: left; }
.jianzhu p a{<!-- -->color:#FFFFFF;}
.jianzhu_bot{<!-- -->width:982px; margin:0 auto; overflow:hidden; padding-top:20px; padding-bottom:20px; border-bottom:1px solid #565050; background:#c2bdbd;}
.jianzhuA{<!-- -->width:440px; float:left; margin-left:40px; display:inline; text-align:left}
.meishi{<!-- -->width:760px; margin:0 auto; padding:30px; text-align:left;}
.meishi h3{<!-- -->font-size:18px; font-weight:bold; text-align:center; line-height:30px; padding:10px 0;}
.dianying{<!-- -->width:982px; margin:0 auto; overflow:hidden; padding-top:20px; padding-bottom:20px; border-bottom:1px solid #565050; background:#c2bdbd;}
.dianying_tu{<!-- -->width:120px; float:left; margin-left:40px; display:inline;}
.dianying_zi{<!-- -->width:720px; float:left; margin-left:20px; display:inline; text-align:left;}
.jianjie{<!-- -->width:902px; margin:0 auto; text-align:left; padding:20px 20px; background:#999999}
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. Wonderful recommendation
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
