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

文章目錄

一、網(wǎng)頁介紹

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

2.網(wǎng)頁編輯：網(wǎng)頁作品代碼簡單，可使用任意HTML編輯軟件（如：、、 、 、、Text 、++ 等任意html編輯軟件進(jìn)行運(yùn)行及修改編輯等操作）。

3.知識應(yīng)用：技術(shù)方面主要應(yīng)用了網(wǎng)頁知識中的: Div+CSS、鼠標(biāo)滑過特效、Table、導(dǎo)航欄效果、、表單、二級三級頁面等，視頻、 音頻元素 、Flash，同時設(shè)計了Logo（源文件）所需的知識點(diǎn)。

一、網(wǎng)頁效果

二、代碼展示 1.HTML代碼

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

 <center>
      <nav class="navbar navbar-default " role="navigation">
        <div class="container-fluid ">
          <div class="navbar-header">
            <a class="navbar-brand" href="#">電影網(wǎng)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;
    }
  }
}

三、個人總結(jié)

一套合格的網(wǎng)頁應(yīng)該包含(具體可根據(jù)個人要求而定)

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

1.看到這里了就 【點(diǎn)贊收藏博文】 三連支持下吧，你的支持是我創(chuàng)作的動力, 【觀注作者 |獲取更多源碼| 優(yōu)質(zhì)文章】 。

2.關(guān)注我?guī)鷮W(xué)習(xí)各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學(xué)生畢業(yè)HTML模板 、期末大作業(yè)模板 、等! 「在這里有好多 前端 開發(fā)者，一起探討 前端 Node 知識，互相學(xué)習(xí)」！

3.以上內(nèi)容技術(shù)相關(guān)問題可以相互學(xué)習(xí)交流