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 .

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

insert image description here

2. Code display

1.HTML code

The code is as follows (example): The following only shows part of the code for reference~


<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="css/style.css" rel="stylesheet" />
    <title>《大话西游》</title>
</head>

<body>
    <div class="con">
        <div class="head">
            <div class="logo">
                <h1>《大话西游之大圣娶亲》</h1>
            </div>
            <div class="nav">
                <ul>
                    <li><a href="index.html">首&nbsp;&nbsp;&nbsp;&nbsp;页</a></li>
                    <li><a href="page1.html">角色介绍</a></li>
                    <li><a href="page2.html">幕后花絮</a></li>
                    <li><a href="page3.html">影片评价</a></li>


                </ul>
            </div>
            <div class="clear"></div>
        </div>
        <div class="clear"></div>
        <div class="lunbo"><a href="#"><img src="images/d1.jpg"  width="1024"/></a></div>
        <div class="clear"></div>
        <div class="main">
            <p>&nbsp;</p>
            <h2>《大话西游之大圣娶亲》简介</h2>
            <p>《大话西游之大圣娶亲》（又名《大话西游之仙履奇缘》）是周星驰彩星电影公司1994年制作和出品的一部经典的无厘头搞笑爱情片，改编依据是吴承恩所撰写的神怪小说《西游记》，该片是《大话西游》系列的第二部，由刘镇伟导演，技安编剧，周星驰制作，周星驰、朱茵、莫文蔚、蔡少芬、陆树铭、吴孟达等人主演。</p>
            <p>该片主要讲述了至尊宝为了救白晶晶而穿越回到五百年前，遇见紫霞仙子之后发生一段感情并最终成长为孙悟空的故事。该片于1995年2月4日在香港首映并入围第十五届香港电影金像奖最佳编剧奖和最佳男主角奖，周星驰凭借该片获得第一届香港电影金紫荆奖最佳男主角奖和第二届香港电影评论学会奖最佳男主角奖。</p>
            <p>&nbsp;</p>
            <h2>剧情介绍</h2>
            <div></div>
            <div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;紫霞和青霞原是佛祖缠在一起的灯芯，两人前世斗争激烈。紫霞夺走了至尊宝的月光宝盒，又在他的脚上印下了3颗痣。紫霞要至尊宝带她走，牛魔王要纳紫霞为妾，而牛的妹妹牛香香也要嫁至尊宝，一时乱作一团。铁扇公主也赶来和牛魔王杀在一起。牛魔王擒回紫霞逼迫她与他成亲，被绑在一旁的唐僧流下了同情的泪水。至尊宝拿起金箍套在头上，他便不再是凡人了。孙悟空驾云来到牛府，要救唐僧一行去西天取经。</div>
            <p>&nbsp;</p>
            <p></p>
            <p></p>
            <p></p>
            <h2>电影片段</h2>
            <div class="main_list">
                <ul>
                    <li><a href="#"><img src="images/q1.jpg" /></a></li>
                    <li><a href="#"><img src="images/q2.jpg" /></a></li>
                    <li><a href="#"><img src="images/q3.jpg" /></a></li>
                    <li><a href="#"><img src="images/q4.jpg" /></a></li>
                    <li><a href="#"><img src="images/q5.jpg" /></a></li>
                    <li><a href="#"><img src="images/q6.jpg" /></a></li>
                    <li><a href="#"><img src="images/q7.jpg" /></a></li>
                    <li><a href="#"><img src="images/q8.jpg" /></a></li>
                    <li><a href="#"><img src="images/q9.jpg" /></a></li>
                    <li><a href="#"><img src="images/q10.jpg" /></a></li>

                </ul>
            </div>
        </div>
        <div class="clear"></div>
        <div class="foot">
            <p>版权所有：《大话西游之大圣娶亲》</p>
            <p>All Rights Reserved</p>
        </div>
        <div class="clear"></div>
    </div>
</body>

</html>

2. CSS code

/*----------------------common-------------------------*/

* {
    
    
    margin: 0;
    padding: 100;
    font-family: Microsoft YaHei;
}

.clear {
    
    
    clear: both;
}

.fl {
    
    
    float: left;
}

.fr {
    
    
    float: right;
}

img {
    
    
    border: none;
}

a {
    
    
    text-decoration: none;
}

a:hover {
    
    
    text-decoration: underline;
}

li {
    
    
    list-style-type: none;
}

.ofh {
    
    
    overflow: hidden;
}

.center {
    
    
    text-align: center;
}

.em {
    
    
    text-indent: 2em;
}

.p5 {
    
    
    padding: 5px;
}

.pl50 {
    
    
    padding-left: 50px;
}

body {
    
    
    background-attachment: fixed;
    background-color: #000;
    background-image: url(../images/bj.jpg);
    background-repeat: no-repeat;
    background-position: center top;
}

/*----------------------con-------------------------*/

.con {
    
    
    width: 960px;
    padding: 20px;
    height: auto;
    margin: 10px auto;
    background: #fff;
    background-color: rgba(255, 255, 255, 0.8);
    -moz-border-radius: 10px;
    border-radius: 10px;
}

/*----------------head-----------------*/

.head {
    
    
    width: 960px;
    height: auto;
    margin: auto;
}

.logo {
    
    
    width: 550px;
    height: 60px;
}

.logo h1 {
    
    
    font-size: 36px;
    line-height: 60px;
    color: #000;
    font-family: 黑体;
}

.nav {
    
    
    width: 960px;
    height: 40px;
    margin: 5px auto;
    background-color: #000;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.nav ul {
    
    
    padding-left: 10px;
}

.nav li {
    
    
    float: left;
    padding: 5px 20px;
}

.nav li a {
    
    
    font-size: 20px;
    line-height: 30px;
    color: #fff;
}

.nav li a:hover {
    
    
    color: #fff;
    text-decoration: none;
}

.nav li:hover {
    
    
    background-color: #f97255
}

.nav li:hover a {
    
    
    color: #fff;
}

.lunbo {
    
    
    width: 960px;
    height: 350px;
    margin: 5px auto;
    overflow: hidden;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

/*----------------main-----------------*/

.main {
    
    
    width: 960px;
    height: auto;
    margin: 10px auto;
    font-size: 14px;
    line-height: 24px;
    color: #555;
}

.main h2 {
    
    
    font-size: 18px;
    line-height: 46px;
    color: #333;
}

.main p {
    
    
    font-size: 14px;
    line-height: 24px;
    color: #555;
    text-indent: 2em;
}

.main_list {
    
    
    width: 960px;
    height: auto;
}

.main_list li {
    
    
    width: 150px;
    height: 100px;
    float: left;
    margin: 3px;
    border: 2px solid #fff;
}

.main_list li:hover {
    
    
    border: 2px solid #ffca2c;
}

.main_list li img {
    
    
    width: 150px;
    height: 100px;
}

/*----------------foot-----------------*/

.foot {
    
    
    width: 960px;
    height: 50px;
    margin: 10px auto;
    padding-top: 10px;
    border-top: 3px solid #600;
    text-align: center;
    font-size: 14px;
    line-height: 24px;
    color: #666;
}

.foot {
    
    
    font-size: 14px;
    line-height: 24px;
    color: #CCC;
}

.con .main p img {
    
    
    float: right;
}

.con .main ul li {
    
    
    float: left;
    list-style-type: none;
    padding-left: 10px;
}

.con .main span {
    
    
    width: 300px;
    height: 200px;
    display: block;
    float: left;
    padding-left: 10px;
    padding-right: 5px;
    line-height: 30px;
}

.con .main ul li {
    
    
    float: left;
    height: auto;
    width: 137px;
    padding-left: 20px;
}

.con .main ul li p {
    
    
    font-size: 12px;
    color: #000;
}

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, wonderful recommendation

1. If you see this, please support me 【点赞收藏博文】three times. Your support is the driving force for my creation 【观注作者 |获取更多源码| 优质文章】 .

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

Make a simple HTML personal web page (HTML+CSS) web page design