HTML實例網頁代碼, 本實例適合于初學HTML的同學。該實例里面有設置了css的樣式設置，有div的樣式格局，這個實例比較全面，有助于同學的學習,本文將介紹如何通過從頭開始設計個人網站并將其轉換為代碼的過程來實踐設計。

文章目錄

一、網頁介紹

1 網頁簡介：此作品為學生個人主頁網頁設計題材，HTML+CSS 布局制作,web前端期末大作業,大學生網頁設計作業源碼，這是一個不錯的網頁制作，畫面精明，代碼為簡單學生水平, 非常適合初學者學習使用。

2.網頁編輯：網頁作品代碼簡單，可使用任意HTML編輯軟件（如：、、 、 、、Text 、++ 等任意html編輯軟件進行運行及修改編輯等操作）。

3.知識應用：技術方面主要應用了網頁知識中的: Div+CSS、鼠標滑過特效、Table、導航欄效果、、表單、二級三級頁面等，視頻、 音頻元素 、Flash，同時設計了Logo（源文件）所需的知識點。

一、網頁效果

二、代碼展示 1.HTML代碼

代碼如下（示例）：以下僅展示部分代碼供參考~

    <div class="hdbox">
        <div class="hd_main clearfix">
            <h1>
                <a class="logo" href="javascript：;">360影視a>
            h1>
            <div class="hd_inp clearfix">
                <input id="hd_text" class="hd_text" type="text" placeholder="你怎么可以這么懶" value="" />
                <input class="hd_button" type="button" value="" />
                <div id="inplist" class="inplist"><img src="img/toulan1.jpg" />div>
            div>
            <ul class="hdul clearfix fl" id="hdul">
                <li><a href="javascript：;"><span class="bg1">span>我的影視a>li>

                <li>
                    <a href="javascript：;">觀看記錄
                    <span class="bg2">span>
                    <div class="seelist"><i>i>暫無觀看記錄div>
                a>
                li>
                <li><a href="javascript：;"><span class="bg3">span>APP下載a>li>
            ul>
        div>
    div>

2.CSS代碼

body {
    background: #f4f4f4;
    overflow-x: hidden;
}
.hdbox {
    height: 70px;
    border-bottom: 2px solid #fd8d4e;

    background: #fff;
}
.hd_main {
    width: 1240px;
    height: 70px;
    margin: 0 auto;
}
h1 {
    width: 150px;
    height: 45px;
    margin-top: 14px;
    float: left;
}
.logo {
    display: inline-block;
    text-indent: -999em;
    width: 150px;
    height: 45px;
    background: url(../img/logo.png) no-repeat;
}

.hd_inp {
    width: 500px;
    height: 38px;
    float: left;
    margin-top: 18px;
    margin-left: 194px;
    position: relative;
}
.hd_text {
    width: 448px;
    height: 38px;
    background: #eee;
    padding-left: 14px;
    border-radius: 5px;
    float: left;
}
.hd_button {
    width: 38px;
    height: 38px;
    display: inline-block;

    background: url(../img/search_btn.png) no-repeat;
    float: left;
    cursor: pointer;
}
.inplist {
    width: 498px;
    height: 290px;
    border: 1px solid #fd8d4e;
    position: absolute;
    left: 0;
    top: 38px;
    background: #fff;
    display: none;
    z-index: 10;
}
.hdul li {
    width: 88px;
    height: 26px;
    margin-left: 22px;
    float: left;
    position: relative;

}
.hdul li a {
    display: inline-block;
    color: #666;
    width: 100%;
    height: 100%;
    text-align: right;
    font-size: 15px;
    line-height: 28px;
}

三、個人總結

一套合格的網頁應該包含(具體可根據個人要求而定)

頁面分為頁頭、菜單導航欄（最好可下拉）、中間內容板塊、頁腳四大部分；所有頁面相互超鏈接，可到三級頁面，有5-10個頁面組成；頁面樣式風格統一布局顯示正常，不錯亂，使用Div+Css技術；菜單美觀、醒目，二級菜單可正常彈出與跳轉；要有JS特效，如定時切換和手動切換圖片新聞；頁面中有多媒體元素，如gif、視頻、音樂，表單技術的使用；頁面清爽、美觀、大方，不雷同。網站前端程序不僅要能夠把用戶要求的內容呈現出來網站制作，還要滿足布局良好、界面美觀、配色優雅、表現形式多樣等要求。 四、心得體會

許多開發人員認為攬長設計是一種天生的能力，而創造力是與生俱來的。但是設計是一項可以像其他任何東西一樣學習的技能。你不必天生就可以創建一個漂亮的網站的藝術家，這需要實踐，熟不知局限太大，自己想要的內容板式也要跟著思路走，越往后看著自己的站點越不順眼，沒有一點成就感。

①在人群中脫穎而出。許多開發都喜歡搬運其它站點頁面，很容易看出它不是自己設計的。如果個人網站的目的是展示你的能力，那么使用模板可能會降低別人對你的肯定，自己設計的獨特風格，讓你站點在眾多的站點中脫潁而出。

②練習技巧。設計它會幫助你練習設計原則，工具，HTML和CSS。你將更容易開發用戶界面并將其引入網絡。設計出獨特且符合現代潮流的個人站點。

以前接私活的時侯，不會設計頁面網站制作，搬運其它站點頁面，導致自己修改圖片和部分頁面的時候，不會使用工具，設計出來的頁面死板不靈活，客戶不滿意，自己看了也覺得很普通，沒有給你心意的感覺。

③更好的應用程序性能。你的網站將是輕量級的，并且使用自定義CSS會具有更好的性能。如果要包括U庫或模板，則它可能包含大量代碼，以涵蓋您未使用的各種可能的自定義。如果未使用的代碼發送給用戶，則會對你網站的性能產生負面影響。加載慢，打開網頁慢，被很多人不接受。

④發展職業技能。在Wb開發角色中，你可能不必從頭開始實現完整的網站設計，但是你應該能夠制作與現代設計一致的外觀精美的界面。成為“全棧開發人員”通常意味著精通后端語言或前端框架，同時能夠熟悉設計，產品方面的知識。全棧開發人員應具有些基本的設計知識，并能夠為用戶提供一致的體驗。當然從中學習到很多的技能知識，這是毋雨置疑的。

⑤可能會很有趣。創造出令自己感到驕做的東西是一種有趣的經歷。如果您花一些時間練習它，琢磨它，打迄礎廂自君胸乘學矯錄更好，生活中發現美是一件很美好的事，但我覺得創造美更讓人覺得驕傲。