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

文章目錄

一、網頁介紹

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

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

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

一、網頁效果

二、代碼展示 1.HTML代碼

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

 <center>
      <nav class="navbar navbar-default " role="navigation">
        <div class="container-fluid ">
          <div class="navbar-header">
            <a class="navbar-brand" href="#">電影網LOGOa>
          div>
          <ul class="nav navbar-nav navbar-right">
            <li>
              <a href="register.html"><span class="glyphicon glyphicon-user">span> 注冊a>
            li>
            <li>
              <a href="#"><span class="glyphicon glyphicon-log-in">span> 登錄a>
            li>
          ul>
        div>
      nav>
      <div style="width: 75%; min-width: 1150px;max-width: 1320px;">
        <nav class="navbar navbar-inverse navbar-static-top " role="navigation">
          <div class="container-fluid">
            <div class="navbar-header">
              <a class="navbar-brand" href="index.html">首頁a>
            div>
            <div>
              <ul class="nav navbar-nav">
                <li>
                  <a href="#">電影a>
                li>
                <li>
                  <a href="#">電視劇a>
                li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    動漫 <b class="caret">b>
                  a>
                  <ul class="dropdown-menu">
                    <li>
                      <a href="#">jmetera>
                    li>
                    <li>
                      <a href="#">EJBa>
                    li>
                    <li>
                      <a href="#">Jasper Reporta>
                    li>
                  ul>
                li>
                <li>
                  <a href="#">綜藝a>
                li>
                <li>
                  <a href="#">音樂MVa>
                li>
                <li>
                  <a href="#">視頻短片a>
                li>
                <li>
                  <a href="#">公開課a>
                li>
              ul>
              <div class="clear">
                <form name="myForm"  onsubmit="return validateForm()" 	 class="navbar-form navbar-right"  >
                  <div class="form-group">
                    <input id="searchKey" name="fname" type="text" class="form-control" placeholder="輸入電影名稱...">
                  div>
                  <button type="submit" class="btn btn-default " onclick="sear()">搜索電影button>
                form>
              div>
            div>
          div>
          <div class="container-fluid navbar-default  ">
            <div>
              <ul class="nav navbar-nav">
                <li>
                  <a href="#">2019電影a>
                li>
                <li>
                  <a href="#">國語電影a>
                li>
                <li>
                  <a href="#">喜劇片a>
                li>
                <li>
                  <a href="#">動作片a>
                li>
                <li>
                  <a href="#">恐怖片a>
                li>
                <li>
                  <a href="#">愛情片a>
                li>
                <li>
                  <a href="#">劇情片a>
                li>
                <li>
                  <a href="#">科幻片a>
                li>
              ul>
              <ul class="nav navbar-nav navbar-right">
                <li>
                  <a href="#">評分最高a>
                li>
                <li>
                  <a href="#">最熱門a>
                li>
              ul>
            div>
          div>
        nav>
        

2.CSS代碼

// --------------------------------------------------
.jumbotron {
  padding-top:    @jumbotron-padding;
  padding-bottom: @jumbotron-padding;
  margin-bottom: @jumbotron-padding;
  color: @jumbotron-color;
  background-color: @jumbotron-bg;
  h1,
  .h1 {
    color: @jumbotron-heading-color;
  }
  p {
    margin-bottom: (@jumbotron-padding / 2);
    font-size: @jumbotron-font-size;
    font-weight: 200;
  }
  > hr {
    border-top-color: darken(@jumbotron-bg, 10%);
  }
  .container &,
  .container-fluid & {
    border-radius: @border-radius-large; // Only round corners at higher resolutions if contained in a container
    padding-left:  (@grid-gutter-width / 2);
    padding-right: (@grid-gutter-width / 2);
  }
  .container {
    max-width: 100%;
  }
  @media screen and (min-width: @screen-sm-min) {
    padding-top:    (@jumbotron-padding * 1.6);
    padding-bottom: (@jumbotron-padding * 1.6);
    .container &,
    .container-fluid & {
      padding-left:  (@jumbotron-padding * 2);
      padding-right: (@jumbotron-padding * 2);
    }
    h1,
    .h1 {
      font-size: @jumbotron-heading-font-size;
    }
  }
}

三、個人總結

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

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

1.看到這里了就 【點贊收藏博文】 三連支持下吧，你的支持是我創作的動力, 【觀注作者 |獲取更多源碼| 優質文章】 。

2.關注我帶您學習各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學生畢業HTML模板 、期末大作業模板 、等! 「在這里有好多 前端 開發者，一起探討 前端 Node 知識，互相學習」！

3.以上內容技術相關問題可以相互學習交流