整合營(yíng)銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          網(wǎng)頁(yè)設(shè)計(jì)HTML零基礎(chǔ)入門

          、Html概述

          Html是Hyper Text Mark-up Language 的首字母簡(jiǎn)寫,意思是超文本標(biāo)記語(yǔ)言,超文本指的是超鏈接,標(biāo)記指的是標(biāo)簽,是一種用來(lái)制作網(wǎng)頁(yè)的語(yǔ)言,這種語(yǔ)言由一個(gè)個(gè)的標(biāo)簽組成,用這種語(yǔ)言制作的文件保存的是一個(gè)文本文件,文件的擴(kuò)展名為html或者h(yuǎn)tm,一個(gè)html文件就是一個(gè)網(wǎng)頁(yè),html文件用編輯器打開顯示的是文本,可以用文本的方式編輯它,如果用瀏覽器打開,瀏覽器會(huì)按照標(biāo)簽描述內(nèi)容文件渲染成網(wǎng)頁(yè),顯示的網(wǎng)頁(yè)可以從一個(gè)網(wǎng)頁(yè)鏈接跳轉(zhuǎn)到另一個(gè)網(wǎng)頁(yè)。
          

          二、Html標(biāo)簽語(yǔ)法

          Html中標(biāo)簽分為 :成對(duì)標(biāo)簽和自閉合標(biāo)簽【空標(biāo)簽】

          1、成對(duì)標(biāo)簽

          成對(duì)出現(xiàn),有開始標(biāo)簽必須有結(jié)束標(biāo)簽,內(nèi)容包裹在兩個(gè)標(biāo)簽中,而且開始標(biāo)簽名和結(jié)束標(biāo)簽名一致,并且結(jié)束標(biāo)簽必須以斜杠/開頭

          語(yǔ)法:

          <font>內(nèi)容</font>
          

          2、自閉合標(biāo)簽

          只有一個(gè)標(biāo)簽,用斜杠結(jié)束,斜杠也可以省略

          語(yǔ)法:

          <br/>
          

          注意事項(xiàng):

          • 成對(duì)標(biāo)簽中,結(jié)束標(biāo)簽必須以斜杠開頭
          • 成對(duì)標(biāo)簽與成對(duì)標(biāo)簽可以嵌套不能交叉
          • 標(biāo)簽名不區(qū)分大小寫,但是我們都必須小寫

          三、Html基本架構(gòu)

          <!DOCTYPE html>
          <html lang="en">
          <head>
              <title></title>
          </head>
          <body>
              
          </body>
          </html>
          

          1、!DOCTYPE

          !DOCTYPE html是文檔聲明,定義文檔類型為html,并且告訴不同的瀏覽器用標(biāo)準(zhǔn)方式進(jìn)行解析html語(yǔ)言,如果不寫的話,會(huì)產(chǎn)生怪異模式,所謂怪異模式,就是瀏覽器會(huì)用自己的方式進(jìn)行解析,不同的瀏覽器有各自的解析方式,從而會(huì)出現(xiàn)無(wú)效果、不兼容等問(wèn)題。

          注意,html中有兩種聲明類型,一種叫做xhtml,即html,另一種叫做html5,html5是xhtml的升級(jí)版,所以我們建議使用html5的聲明方式

          xhtml聲明方式:

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

          html5聲明方式:

          <!DOCTYPE html>

          2、html

          html是html文檔的整體,也就是表示一個(gè)網(wǎng)頁(yè)。

          html中的lang="en"是定義該文件語(yǔ)言是英文

          3、head

          head是html的第一層子元素【子標(biāo)簽】,負(fù)責(zé)對(duì)網(wǎng)頁(yè)進(jìn)行一些設(shè)置以及定義標(biāo)題,設(shè)置包括定義網(wǎng)頁(yè)的編碼格式,外鏈css樣式文件和JavaScript文件等。設(shè)置的內(nèi)容不會(huì)顯示在網(wǎng)頁(yè)上,標(biāo)題的內(nèi)容會(huì)顯示在標(biāo)題欄中。即title標(biāo)簽。

          4、meta

          meta是html語(yǔ)言head標(biāo)簽中的一個(gè)輔助性標(biāo)簽,該標(biāo)簽不包含任何內(nèi)容,但是該標(biāo)簽的屬性定義了與文檔相關(guān)聯(lián)的名稱,比如:編碼

          <meta charset="utf-8"></meta>
          

          5、body

          body也是html的第一層子元素,我們頁(yè)面中顯示的所有內(nèi)容全部都是編寫在該標(biāo)簽體中。

          四、Html文檔規(guī)范

          html制定了文檔的編寫規(guī)范,必須遵守。

          所有的標(biāo)簽必須小寫

          所有的屬性必須用雙引號(hào)括起來(lái)

          五、Html注釋

          html文檔代碼中可以插入注釋,注釋是對(duì)代碼的說(shuō)明和解釋,注釋的內(nèi)容不會(huì)顯示在頁(yè)面上。

          注釋的語(yǔ)法:

          <!-- 注釋的內(nèi)容 -->

          六、html基本屬性

          注:屬性是標(biāo)簽的輔助作用。

          屬性 描述 bgcolor 設(shè)置網(wǎng)頁(yè)的背景顏色 background 設(shè)置網(wǎng)頁(yè)的背景圖片

          1.bgcolor

          設(shè)置網(wǎng)頁(yè)的背景顏色

          <!DOCTYPE html>
          <html lang="en">
          <head>
              <title>html的屬性</title>
          </head>
          <body bacolor="pink">
              
          </body>
          </html>
          

          2.路徑

          我們?cè)陂_發(fā)網(wǎng)頁(yè)時(shí),需要經(jīng)常的插入圖片、視頻、文件等一些操作,但是我們需要指定文件所在的位置,這個(gè)位置就是所謂的路徑

          路徑分為:

          1. 相對(duì)路徑 指目標(biāo)相對(duì)于當(dāng)前文件的路徑,網(wǎng)頁(yè)結(jié)構(gòu)設(shè)計(jì)中多采用這種方式來(lái)表示目標(biāo)的路徑。相對(duì)路徑有多種表示方法,其表示的意義不盡相同。表示方法如下: ./ :代表文件所在的目錄(可以省略不寫)../ :代表文件所在的父級(jí)目錄../../ :代表文件所在的父級(jí)目錄的父級(jí)目錄/ :代表文件所在的根目錄【/ : 可以理解為目標(biāo)文件的絕對(duì)路徑】
          2. 絕對(duì)路徑 指目標(biāo)文件的完整路徑,從盤符開始。

          3.background

          設(shè)置網(wǎng)頁(yè)的背景圖片

          <!DOCTYPE html>
          <html lang="en">
          <head>
              <title>html的屬性</title>
          </head>
          <body background="../images/10.jpg">
              
          </body>
          </html>
          

          注意事項(xiàng):

          bgcolor和background不能同時(shí)使用

          background不能指定絕對(duì)路徑

          七、Html標(biāo)簽

          1.網(wǎng)頁(yè)的組成

          網(wǎng)頁(yè)的組成:文字、圖片、視頻、超鏈接、列表、表格、表單等組成。

          2、文本段落標(biāo)簽

          標(biāo)簽 描述 hn 設(shè)置文字標(biāo)題【n:取值范圍 1~6】 center 居中對(duì)齊 hr 水平線 屬性(width:寬度 color:顏色 size:粗細(xì)) br 換行 p 段落

          3、文本控制標(biāo)簽

          標(biāo)簽 描述 font 設(shè)置字體,需要借助屬性設(shè)置

          屬性 描述 color 設(shè)置字體顏色 size 設(shè)置字體大小,不需要帶單位,取值范圍:1~7【瀏覽器默認(rèn)值:3】 face 設(shè)置字體風(fēng)格

          <font size="2" color="red" face="黑體"></font>
          

          4、文本格式化標(biāo)簽

          標(biāo)簽 描述 b 定義粗體文本 em 定義著重文字 i 定義斜體文字 small 定義小號(hào)字 strong 定義加重語(yǔ)氣 sub 定義下標(biāo)字 sup 定義上標(biāo)字 ins 定義插入字 del 定義刪除字

          <!DOCTYPE html>
          <html lang="en">
          <head>
              <meta charset="UTF-8">
              <title>Html文本格式化標(biāo)簽</title>
          </head>
          <body>
          
              <b>粗體文本</b>
              <i>傾斜文本</i>
              <em>著重文本</em>
              <small>小號(hào)字</small>
              <strong>加重語(yǔ)氣</strong>
              <sub>上標(biāo)</sub>
              <sup>下標(biāo)</sup>
              <ins>插入字</ins>
              <del>刪除字</del>
              
          </body>
          </html>
          

          5、圖片標(biāo)簽

          在Html中,圖像由

          標(biāo)簽定義。

          是空標(biāo)簽,意思是說(shuō),它只包含屬性。

          要在頁(yè)面上顯示圖像,你需要使用源屬性(src)。src指"source"。源屬性的值是圖像的URL地址。

          標(biāo)簽 描述 img 圖片標(biāo)簽

          屬性 描述 src 指定圖片的地址 width 設(shè)置圖片的寬度 height 設(shè)置圖片的高度 alt 設(shè)置圖片的預(yù)備文本

          注意事項(xiàng):不建議設(shè)置圖片大小,容易失真

          6、audio

          在Html中,聲音由標(biāo)簽定義。

          標(biāo)簽 描述 audio 聲音標(biāo)簽

          屬性 描述 src 指定聲音地址

          <audio src="nice.mp3">對(duì)不起,您的瀏覽器不支持</audio>
          

          7、video

          在Html中,視頻由video標(biāo)簽定義

          標(biāo)簽 描述 video 視頻標(biāo)簽

          屬性 描述 src 指定視頻地址

          <video src="美女.mp4">對(duì)不起,您的瀏覽器不支持</video>
          

          8、超鏈接

          a標(biāo)簽定義超鏈接,用于從一個(gè)頁(yè)面鏈接到另一個(gè)頁(yè)面。

          a標(biāo)簽最重要的屬性是href,它指定鏈接的目標(biāo)。

          在所有瀏覽器中,鏈接的默認(rèn)外觀如下:

          未被訪問(wèn)的鏈接帶有下劃線而且是藍(lán)色的

          已被訪問(wèn)的鏈接帶有下劃線而且是紫色的

          活動(dòng)鏈接帶有下劃線而且是紅色的

          語(yǔ)法:

          <a href="鏈接目標(biāo)">點(diǎn)擊內(nèi)容</a>
          

          屬性 描述 href 指定鏈接目標(biāo) name 指定錨的名稱 download 指定下載鏈接 target 指定跳轉(zhuǎn)方式 屬性值 描述 _blank 新窗口打開【常用】 _parent 在父窗口中打開鏈接【了解】 _self 默認(rèn),在當(dāng)前窗口打開【了解】 _top 在當(dāng)前窗體打開鏈接,并替換當(dāng)前的整個(gè)窗體【了解】 framename 到 iframe 在講【常用】

          超鏈接分類:

          • 內(nèi)部鏈接 鏈接目標(biāo):本地頁(yè)面 <a href="demo.html">點(diǎn)擊內(nèi)容</a>
          • 外部鏈接 鏈接目標(biāo):外部頁(yè)面 <a href="http://www.baidu.com">點(diǎn)擊內(nèi)容</a>
          • 多媒體鏈接 鏈接目標(biāo):圖片、視頻等 <a href="images/美女.jpg">點(diǎn)擊內(nèi)容</a>
          • 電子郵件鏈接 鏈接目標(biāo):電子郵件【系統(tǒng)自帶的電子郵件】 <a href="mailto:12345@qq.com">點(diǎn)擊內(nèi)容</a>
          • 錨鏈接 鏈接目標(biāo):錨點(diǎn) 1.建立錨點(diǎn)
            <
            a name="錨點(diǎn)名"></a>

            2.跳轉(zhuǎn)
            <a href="#錨點(diǎn)名">點(diǎn)擊內(nèi)容</a>

          9、列表

          列表的使用與word等軟件的列表概念相似,只不過(guò)是應(yīng)用在網(wǎng)頁(yè)展示中。

          1.有序列表

          有序列表是指有數(shù)字編號(hào)或字母的列表項(xiàng),可以使用css定義更多樣式。

          <!-- 有序列表 -->
              <ol type="a">
                  <li>新聞一</li>
                  <li>新聞二</li>
                  <li>新聞三</li>
              </ol>
          

          屬性 描述 type 設(shè)置符號(hào)類型 值:1 a A I i 默認(rèn)數(shù)字 start 從第幾個(gè)開始【用于ol標(biāo)簽中】 value 從第幾個(gè)開始【用于li標(biāo)簽中】

          <!-- 有序列表 -->
              <ol type="a" start="4">
                  <li>新聞一</li>
                  <li type="1" value="1">新聞二</li>
                  <li>新聞三</li>
              </ol>
          

          2、無(wú)序列表

          無(wú)序列表是指沒(méi)有數(shù)字編號(hào)或字母的列表項(xiàng),可以使用css定義更多樣式。

          <!-- 無(wú)序列表 -->
          <ul>
              <li>童裝</li>
              <li>男裝</li>
              <li>女裝</li>
          </ul>
          

          屬性 描述 type 用于設(shè)置符號(hào)類型,默認(rèn):實(shí)心圓 值:空心圓、正方形 【用于ul、li】

          <!-- 無(wú)序列表 -->
          <ul type="square">
                  <li>童裝</li>
                  <li type="circle">男裝</li>
                  <li>女裝</li>
              </ul>
          

          3、描述列表

          描述列表指每個(gè)列表項(xiàng)有單獨(dú)的標(biāo)題。

          <!-- 描述列表 -->
              <dl>
                  <dt>開源產(chǎn)品</dt>
                  <dd>Java封裝庫(kù)</dd>
                  <dd>Web組件庫(kù)</dd>
                  
                  <dt>網(wǎng)站導(dǎo)航</dt>
                  <dd>mrliujava.com</dd>
                  <dd>mrliuweb.com</dd>
              </dl>
          

          10、表格

          表格在網(wǎng)頁(yè)開發(fā)中使用頻率非常高,尤其是數(shù)據(jù)展示的時(shí)候。

          10.1 基本使用

          標(biāo)簽 描述 table 代表表格標(biāo)簽 caption 表格標(biāo)題 thead 表頭部分 tbody 表格主體部分 tfoot 表格尾部

          屬性 描述 border 表格邊框 cellspacing 單元格與單元格間距 width 寬度 height 高度 bgcolor 設(shè)置背景顏色 background 設(shè)置背景圖片 align 對(duì)齊方式

          <!-- 表格 -->
              <table border="1" cellspacing="0" width="600px" height="200px">
                  <caption>員工薪資統(tǒng)計(jì)表</caption>
                  <thead>
                      <tr>
                          <th>序號(hào)</th>
                          <th>姓名</th>
                          <th>性別</th>
                          <th>職位</th>
                          <th>薪資</th>
                      </tr>
                  </thead>
          
                  <tbody>
                      <tr>
                          <td>1</td>
                          <td>狗蛋</td>
                          <td>男</td>
                          <td>JavaEe工程師</td>
                          <td>8780</td>
                      </tr>
          
                      <tr>
                          <td>2</td>
                          <td>黑妞</td>
                          <td>女</td>
                          <td>Web前端工程師</td>
                          <td>9750</td>
                      </tr>
          
                      <tr>
                          <td>3</td>
                          <td>傻蛋</td>
                          <td>妖</td>
                          <td>測(cè)試工程師</td>
                          <td>996</td>
                      </tr>
                  </tbody>
          
                  <tfoot>
                      <tr>
                          <td>當(dāng)前頁(yè):1 頁(yè)</td>
                          <td>上一頁(yè)</td>
                          <td>下一頁(yè)</td>
                          <td>尾頁(yè)</td>
                          <td>共 3 頁(yè)</td>
                      </tr>
                  </tfoot>
              </table>
          

          10.2 單元格合并

          屬性 說(shuō)明 rowspan 行合并 colspan 列合并

          下面是行合并:

          <!-- 表格 -->
              <table border="1" cellspacing="0" width="600px" height="200px">
                  <caption>員工薪資統(tǒng)計(jì)表</caption>
                  <thead>
                      <tr>
                          <th>序號(hào)</th>
                          <th>姓名</th>
                          <th>性別</th>
                          <th>職位</th>
                          <th>薪資</th>
                      </tr>
                  </thead>
          
                  <tbody>
                      <tr>
                          <td>1</td>
                          <td>狗蛋</td>
                          <td>男</td>
                          <td rowspan="2">JavaEe工程師</td>
                          <td>8780</td>
                      </tr>
          
                      <tr>
                          <td>2</td>
                          <td>黑妞</td>
                          <td>女</td>
                          <td>9750</td>
                      </tr>
          
                      <tr>
                          <td>3</td>
                          <td>傻蛋</td>
                          <td>妖</td>
                          <td>測(cè)試工程師</td>
                          <td>996</td>
                      </tr>
                  </tbody>
          
                  <tfoot>
                      <tr>
                          <td>當(dāng)前頁(yè):1 頁(yè)</td>
                          <td>上一頁(yè)</td>
                          <td>下一頁(yè)</td>
                          <td>尾頁(yè)</td>
                          <td>共 3 頁(yè)</td>
                      </tr>
                  </tfoot>
              </table>
          

          下面是列合并:

          <!-- 表格 -->
              <table border="1" cellspacing="0" width="600px" height="200px">
                  <caption>員工薪資統(tǒng)計(jì)表</caption>
                  <thead>
                      <tr>
                          <th>序號(hào)</th>
                          <th>姓名</th>
                          <th>性別</th>
                          <th>職位</th>
                          <th>薪資</th>
                      </tr>
                  </thead>
          
                  <tbody>
                      <tr>
                          <td>1</td>
                          <td>狗蛋</td>
                          <td>男</td>
                          <td>JavaEe工程師</td>
                          <td>8780</td>
                      </tr>
          
                      <tr>
                          <td>2</td>
                          <td>黑妞</td>
                          <td>女</td>
                          <td>Web前端工程師</td>
                          <td>9750</td>
                      </tr>
          
                      <tr>
                          <td>3</td>
                          <td colspan="2">傻蛋</td>
                          <td>測(cè)試工程師</td>
                          <td>996</td>
                      </tr>
                  </tbody>
          
                  <tfoot>
                      <tr>
                          <td>當(dāng)前頁(yè):1 頁(yè)</td>
                          <td>上一頁(yè)</td>
                          <td>下一頁(yè)</td>
                          <td>尾頁(yè)</td>
                          <td>共 3 頁(yè)</td>
                      </tr>
                  </tfoot>
              </table>
          

          11、表單

          表單是一個(gè)包含表單元素的區(qū)域。

          表單元素是允許用戶在表單中輸入內(nèi)容,比如:文本域(textarea)、下拉列表(select)、單選框(radio)、復(fù)選框(checkbox)等等。

          11.1 基本使用

          表單需要使用表單標(biāo)簽來(lái)設(shè)置:

          <!-- 表單 -->
          <form>
          input元素
          </form>

          11.2 GET&POST

          屬性 說(shuō)明 action 后臺(tái)地址 method 提交方式GET或POST

          GET和POST區(qū)別:

          1.GET

          • 數(shù)據(jù)會(huì)顯示在地址欄中,數(shù)據(jù)不安全
          • 數(shù)據(jù)大小有限制
          • 數(shù)據(jù)通過(guò)請(qǐng)求頭傳遞

          2.POST

          • 數(shù)據(jù)不會(huì)顯示在地址欄中,數(shù)據(jù)安全
          • 數(shù)據(jù)對(duì)大小無(wú)限制
          • 數(shù)據(jù)通過(guò)實(shí)體內(nèi)容傳遞
          <form action="后端接口" method="POST">
                  <input type="text">
                  <input type="password">
          </form>
          

          11.3 LABEL

          使用label用于描述表單標(biāo)題,當(dāng)點(diǎn)擊標(biāo)題后文本框會(huì)獲得焦點(diǎn),需要保證使用的ID在頁(yè)面中是唯一的。

          <form action="后端接口" method="POST">
                  <label for="username">用戶名</label>
                  <input type="text" id="username">
          
                  <label for="password">密碼</label>
                  <input type="password" id="password">
          </form>
          

          也可以將文本框放在label標(biāo)簽內(nèi)部,這樣就不需要設(shè)置id與for屬性了。

          11.4 INPUT

          文本框用于輸入單行文本使用,下面是常用屬性與示例。

          屬性 說(shuō)明 type 表單類型,默認(rèn)為text name 后端接收字段名 required 必須輸入 placeholder 提示文本內(nèi)容 value 默認(rèn)指 maxlength 允許最大輸入字符數(shù) size 表單長(zhǎng)度,一般用css來(lái)控制 disabled 禁用,不可提交后端 readonly 只讀,可提交后端 accept 設(shè)置選中類型 比如:.jpg capture 使用麥克風(fēng)\視頻或攝像頭哪種方式獲取手機(jī)上傳文件,支持的值有microphone , video , camera

          11.4.1 基本示例

          <form action="后端接口" method="POST">
                  <label for="username">用戶名</label>
                  <input type="text" name="username" id="username" placeholder="請(qǐng)輸入用戶名" maxlength="5" size="50" required>
          </form>
          

          11.4.2 調(diào)用攝像頭

          當(dāng)input類型為file時(shí)手機(jī)會(huì)讓用戶選擇圖片或者拍照,如果想直接調(diào)取攝像頭使用以下代碼.

          <form action="后端接口" method="POST">
                  <label for="file">上傳文件</label>
                  <input type="file" name="file" id="file" accept="*.jpg" capture="camera">
          </form>
          

          11.4.3 其他類型

          通過(guò)設(shè)置表單的type字段可以指定不同的輸入內(nèi)容.

          類型 說(shuō)明 email 輸入內(nèi)容為郵箱 url 輸入內(nèi)容為URL地址 password 輸入內(nèi)容為密碼項(xiàng) tel 電話號(hào),移動(dòng)端會(huì)調(diào)出數(shù)字鍵盤 search 搜索框 hidden 隱藏表單 submit 提交表單 reset 重置表單 button 自定義按鈕

          11.4.4 HIDDEN

          隱藏表單用于提交后臺(tái)數(shù)據(jù),但在前臺(tái)內(nèi)容不顯示所以在其上做用樣式定義也沒(méi)有意義.

          <input type="hidden" name="id" value="1">
          

          11.4.5 SUBMIT

          創(chuàng)建提交按鈕可以將表單數(shù)據(jù)提交到后臺(tái),有多種方式可以提交數(shù)據(jù),比如:AJAX,或者Html的表單按鈕.

          a.使用input構(gòu)建提交按鈕,如果設(shè)置了name值,那么按鈕數(shù)據(jù)也會(huì)提交到后臺(tái),如果有多個(gè)表單項(xiàng)可以通過(guò)這些進(jìn)行判斷是哪個(gè)表單提交的.

          <input type="submit" name="submit" value="提交表單">
          

          b.使用button也可以提交,設(shè)置type屬性為submit或不設(shè)置都可以提交表單.

          <button type="submit">提交表單</button>
          

          11.4.6 禁用表單

          通過(guò)為表單設(shè)置disabled或readonly都可以禁止表單,單readonly表單的數(shù)據(jù)可以提交到后端

          <input type="text" value="數(shù)據(jù)" readonly>
          

          11.4.7 PATTERN

          表單可以通過(guò)設(shè)置pattern屬性指定正則驗(yàn)證.

          屬性 說(shuō)明 pattern 正則表達(dá)式驗(yàn)證規(guī)則 oninvalid 輸入錯(cuò)誤時(shí)觸發(fā)的事件

          <form action="">
                  <label for="username">用戶名</label>
                  <input type="text" name="username" id="username" pattern="[a-z]{5,20}" oninvalid="validate('請(qǐng)輸入5~20位字母的用戶名')">
                  <button>提交表單</button>
              </form>
          
              <script>
                  function validate(message){
                      alert(message);
                  }
              </script>
          

          11.4.8 TEXTAREA

          文本域指可以輸入多行文本的表單,當(dāng)然更復(fù)雜的情況可以使用編輯器如ueditor , ckeditor等.

          屬性 說(shuō)明 cols 列字符數(shù)(一般使用css控制更好) rows 行數(shù)(一般使用css控制更好)

          <textarea cols="30" rows="3">請(qǐng)踩踩我......</textarea>
          

          11.4.9 SELECT

          下拉列表項(xiàng)可用于多個(gè)值中的選擇.

          屬性 說(shuō)明 multiple 支持多選 size 列表框高度 optgroup 選項(xiàng)組 selected 選中狀態(tài) option 選項(xiàng)值

          <form action="">
                  <select multiple size="10">
                      <option value="">選擇課程</option>
                      <optgroup label="后端">
                          <option value="">JAVA</option>
                          <option value="">PHP</option>
                          <option value="">LINUX</option>
                      </optgroup>
          
                      <optgroup label="前端">
                          <option value="">HTML</option>
                          <option value="">CSS</option>
                          <option value="">JAVASCRIPT</option>
                      </optgroup>
                  </select>
              </form>
          

          11.4.10 RADIO

          單選框指只能選擇一個(gè)選項(xiàng)的表單,如性別的選擇:男 , 女 , 保密 只能選擇一個(gè).

          屬性 說(shuō)明 checked 選中狀態(tài)

          <form action="">
                  <input type="radio" name="" id="boy" checked>
                  <label for="boy">男</label>
          
                  <input type="radio" name="" id="girl">
                  <label for="girl">女</label>
              </form>
          

          11.4.11 CHECKBOX

          復(fù)選框指允許選擇多個(gè)值的表單

          屬性 說(shuō)明 checked 選中狀態(tài)

          <form action="">
                  <input type="checkbox" name="JAVA" id="java">
                  <label for="java">JAVA</label>
          
                  <input type="checkbox" name="WEB" id="web">
                  <label for="web">WEB</label>
              </form>
          

          11.4.12 FILE

          文件上傳有很多方式,可以使用插件或者JS拖放上傳處理.Html本身也提供了默認(rèn)的上傳功能,只是上傳效果并不是很美觀.

          屬性 說(shuō)明 multiple 支持多選 accept 允許上傳類型.png , .psd 或者 image/png , image/gif

          <form action="" enctype="multipart/form-data">
                  <input type="file">
                  <input type="submit" value="上傳">
              </form>
          

          11.4.13 日期時(shí)間

          屬性 說(shuō)明 min 最小時(shí)間 max 最大時(shí)間 step 間隔: date缺省是1天 week缺省是1周 month缺省是1月

          a.日期選擇

          <h1>日期選擇</h1>
              <form action="">
                  <input type="date" step="5" min="2020-09-22" max="2025-01-15" name="datetime">
              </form>
          

          b.周選擇

          <h1>周選擇</h1>
              <input type="week" name="" id="">
          

          c.月份選擇

          <h1>月選擇</h1>
              <input type="month" name="" id="">
          

          d.日期與時(shí)間

          <h1>日期與時(shí)間</h1>
              <input type="datetime-local" name="" id="">
          

          11.4.14 DATALIST

          input表單的輸入值選項(xiàng)列表

          <form action="">
                  <label for="username">用戶名</label>
                  <input type="text" name="" id="usernmae" list="less">
                  <datalist id="less">
                      <option value="JAVA">后臺(tái)管理語(yǔ)言</option>
                      <option value="CSS">美化網(wǎng)站頁(yè)面</option>
                      <option value="MYSQL">掌握數(shù)據(jù)庫(kù)使用</option>
                  </datalist>
              </form>
          

          12、框架集

          frameset元素可定義一個(gè)框架集。它被用來(lái)組織多個(gè)窗口(框架),每個(gè)框架存有獨(dú)立的文檔,在其最簡(jiǎn)單的應(yīng)用中,frameset元素僅僅會(huì)規(guī)定在框架集中存在多少列或多少行,您必須使用cols或rows屬性。

          注意事項(xiàng):由于是分割原網(wǎng)頁(yè),所以我們不能在body中進(jìn)行編寫,在head中進(jìn)行分割。

          標(biāo)簽 說(shuō)明 frameset 框架集 frame 框架

          屬性 說(shuō)明 cols 定義框架集中列的數(shù)目和尺寸 rows 定義框架集中行的數(shù)目和尺寸 frame border 去除框架邊框 scrolling 去除滾動(dòng)條

          12.1 垂直框架

          <!DOCTYPE html>
          <html lang="en">
          <head>
              <meta charset="UTF-8">
              <title>Html垂直框架</title>
          
              <frameset cols="50%,*" >
                  <frame src="http://www.baidu.com" frameborder="0" scrolling="no"></frame>
                  <frame src="http://www.taobao.com" frameborder="0"  scrolling="no"></frame>
              </frameset>
          </head>
          <body>
              
          </body>
          </html>
          

          12.2 水平框架

          <!DOCTYPE html>
          <html lang="en">
          	<head>
          		<meta charset="UTF-8">
          		<title>Html水平框架</title>
          		<frameset rows="50%,*" >
          				<frame src="http://www.baidu.com" frameborder="0" scrolling="no"></frame>
                  <frame src="http://www.taobao.com" frameborder="0" scrolling="no"></frame>
          		</frameset>
          	</head>
          <body>
          </body>
          </html>

          12.3 混合框架

          <!DOCTYPE html>
          <html lang="en">
          <head>
              <meta charset="UTF-8">
              <title>Html混合框架</title>
          
              <frameset rows="20%,*" >
                  <frame src="http://www.baidu.com" frameborder="0" scrolling="no"></frame>
                  <frameset cols="20%,*">
                      <frame src="http://www.taobao.com" frameborder="0" scrolling="no"></frame>
                      <frame src="https://www.huya.com/" frameborder="0" scrolling="no"></frame>
                  </frameset>
                  
              </frameset>
          </head>
          <body>
              
          </body>
          </html>
          

          12.4 導(dǎo)航框架

          <!DOCTYPE html>
          <html lang="en">
          <head>
              <meta charset="UTF-8">
              <title>Html美女</title>
          </head>
          <body>
              
              <img src="../images/10.jpg" alt="">
          
          </body>
          </html>
          
          <!DOCTYPE html>
          <html lang="en">
          <head>
              <meta charset="UTF-8">
              <title>Html野獸</title>
          </head>
          <body>
              
          
              <img src="../images/timg.gif" alt="">
          
          </body>
          </html>
          
          <!DOCTYPE html>
          <html lang="en">
          <head>
              <meta charset="UTF-8">
              <title>Html動(dòng)物</title>
          </head>
          <body>
              
              <img src="../images/4.jpg" alt="">
          
          </body>
          </html>
          
          <!DOCTYPE html>
          <html lang="en">
          <head>
              <meta charset="UTF-8">
              <title>Html鏈接</title>
          </head>
          <body>
          
              <a href="Html美女.html" target="view">美女圖片</a>
              <a href="Html野獸.html" target="view">野獸圖片</a>
              <a href="Html動(dòng)物.html" target="view">動(dòng)物圖片</a>
              
          </body>
          </html>
          
          <!DOCTYPE html>
          <html lang="en">
          <head>
              <meta charset="UTF-8">
              <title>Html垂直框架</title>
          
              <frameset rows="20%,*" >
                  <frame src="http://www.baidu.com" frameborder="0" scrolling="no"></frame>
                  <frameset cols="20%,*">
                      <frame src="Html鏈接.html" frameborder="0" scrolling="no"></frame>
                      <frame src="https://www.huya.com/" frameborder="0" scrolling="no" name="view"></frame>
                  </frameset>
                  
              </frameset>
          </head>
          <body>
              
          </body>
          </html>
          

          13、內(nèi)聯(lián)框架

          iframe元素會(huì)創(chuàng)建包含另外一個(gè)文檔的內(nèi)聯(lián)框架。

          屬性 說(shuō)明 align 對(duì)齊方式,后期采用css的方式進(jìn)行設(shè)置 width 設(shè)置寬度 height 設(shè)置高度 src 設(shè)置iframe中顯示的文檔的URL name iframe的名稱 scrolling 是否顯示滾動(dòng)條 frameborder 設(shè)置iframe的邊框

          么是Canvas

          <canvas> 是HTML中的一個(gè)元素,它可被用來(lái)通過(guò) JavaScript(Canvas API 或 WebGL API)繪制圖形及圖形動(dòng)畫。

          Canvas API 提供了一個(gè)通過(guò) JavaScriptHTML<canvas> 元素來(lái)繪制圖形的方式。它可以用于動(dòng)畫、游戲畫面、數(shù)據(jù)可視化、圖片編輯以及實(shí)時(shí)視頻處理等方面。

          <canvas>標(biāo)簽本身沒(méi)有繪圖能力,它僅僅是圖形的容器。在HTML,一般通過(guò)Javascript語(yǔ)言來(lái)完成實(shí)際的操作。

          創(chuàng)建HTML頁(yè)面并添加繪圖容器

          本文通過(guò)Javascript操作Canvas制作一個(gè)簡(jiǎn)單的顯示當(dāng)前時(shí)間的動(dòng)畫時(shí)鐘,了解和學(xué)習(xí)簡(jiǎn)單的canvas用法,僅以拋磚引玉。

          首先創(chuàng)建一個(gè)HTML文件,為了方便管理,使用一個(gè)div標(biāo)簽包裹兩個(gè)canvas標(biāo)簽,并加上一些簡(jiǎn)單的css樣式。

          <!doctype html>
          <html lang="zh-cn">
          <head><title>Canvas繪制動(dòng)畫時(shí)鐘</title>
          <style>
          html,body{margin:0;padding:0}
          #clockWrap {
          	position: relative;
          }
          canvas {
          	position: absolute;
          }
          #clock-ui {
          	z-index: 2;
          }
          #clock-plate {
          	z-index: 1;
          }
          </style>
          </head>
          <body>
            <div id="clockWrap">
            <canvas id="clock-plate"></canvas>
            <canvas id="clock-ui"></canvas>
          </div>
          <script></script>
          </body></html>

          本示例中使用了兩個(gè)canvas標(biāo)簽(為什么使用兩個(gè),一個(gè)不是更簡(jiǎn)單嗎?),一個(gè)用于繪制鐘面,一個(gè)根據(jù)當(dāng)前時(shí)間實(shí)時(shí)顯示和更新時(shí)針、分針和秒針的動(dòng)態(tài)指向。好了,話不多說(shuō),開干。

          繪制鐘面刻度

          一個(gè)簡(jiǎn)單的時(shí)鐘,可以分為鐘面上的刻度和指針。其中刻度和12個(gè)數(shù)字是固定的,我們可以將它們繪制在當(dāng)作背景的canvas上(示例中id為clock-plate的canvas)。

          (1)要使用canvas,首先必須通過(guò)容器獲取渲染上下文:

          var $=function(id){return document.querySelector(id);}//這個(gè)函數(shù)只是為了方便獲取dom元素
          const canvasbg=$("#clock-plate"),
                canvas=$("#clock-ui"),
                ctx = canvasbg.getContext("2d"),//背景容器上下文
                ctxUI = canvas.getContext("2d");//指針容器上下文,后面代碼要用
          //定義畫布寬度和高度,時(shí)鐘圓直徑,并設(shè)置畫布大小
          const oW=1000,oH=800,cW=400,r=cW/2,oX=oW/2,oY=oH/2;
          canvas.width=oW;
          canvas.height=oH;
          canvasbg.width=oW;
          canvasbg.height=oH;

          (2)畫鐘的邊框,為了好看,這里畫兩個(gè)圈:

           //畫出時(shí)鐘外圓框
            ctx.lineWidth = 12;
          	ctx.beginPath();
          	ctx.arc(oX, oY, r+14, 0, 2 * Math.PI);
          	ctx.stroke();
          	ctx.closePath();
          	ctx.lineWidth = 8;
          	//畫出時(shí)鐘內(nèi)圓框(刻度圈)
          	ctx.beginPath();
          	ctx.arc(oX, oY, r, 0, 2 * Math.PI);
          	ctx.stroke();
          	ctx.closePath();
          	ctx.beginPath();

          邊框效果圖

          (3)繪制刻度線和數(shù)字,可以利用三角函數(shù)計(jì)算出每個(gè)刻度的坐標(biāo):

          利用三角函數(shù)計(jì)算刻度線的坐標(biāo)位置

          鐘面上有12個(gè)大格,從正上方12開始,它們的度數(shù)分別是270,300,330,0,30,60,90,120,150,180,210,240。然后利用JS的Math.sin和Math.cos分別計(jì)算出各大格的坐標(biāo)。注意:js中Math.sin()和Math.cos()的參數(shù)不是角度數(shù)弧度。可以使用Math.PI/180*角度來(lái)轉(zhuǎn)化,比如將30度轉(zhuǎn)換成弧度=Math.PI/180*30

          //繪制鐘表中心點(diǎn)
          	ctx.beginPath();
          	ctx.arc(oX, oY, 8, 0, 2 * Math.PI);//圓心
          	ctx.fill();
          	ctx.closePath();
          	//設(shè)置刻度線粗細(xì)度
          	ctx.lineWidth = 3;
          	//設(shè)置鐘面12個(gè)數(shù)字的字體、大小和對(duì)齊方式
          	ctx.font = "30px serif";
          	ctx.textAlign="center";
          	ctx.textBaseline="middle";
          	var kdx,kdy;
          	//繪制12個(gè)大刻度和12個(gè)數(shù)字
          	//為方便計(jì)算,先定義了0-11這12個(gè)刻度對(duì)應(yīng)的度數(shù),也可以直接定義對(duì)應(yīng)的弧度。
          	const hd=Math.PI/180,degr=[270,300,330,0,30,60,90,120,150,180,210,240];
          	for(var i=0;i<12;i++){
          		kdx=oX+Math.cos(hd*degr[i])*(r-3);
          		kdy=oY+Math.sin(hd*degr[i])*(r-3);
          		ctx.beginPath();
          		ctx.arc(kdx, kdy, 6, 0, 2 * Math.PI);//畫圓形大刻度
          		ctx.fill();
              //繪制刻度對(duì)應(yīng)的數(shù)字
          		ctx.strokeText(i==0? 12 : i,oX+Math.cos(hd*degr[i])*(r-24),oY+Math.sin(hd*degr[i])*(r-24));
          		ctx.closePath();
          	}
          	
          	//繪制小刻度
          	ctx.lineWidth = 2;
          	for(var i=0;i<60;i++){
          		if(i % 5 == 0) continue;//跳過(guò)與刻度重疊的刻度
          		x0=Math.cos(hd*i*6);
          		y0=Math.sin(hd*i*6);
          		ctx.beginPath();
          		ctx.moveTo(oX+x0*(r-10), oY+y0*(r-10)); 
          		ctx.lineTo(oX+x0*r, oY+y0*r); //畫短刻度線
          		ctx.stroke(); 
          		ctx.closePath();
          	}

          效果如圖:

          鐘面效果圖

          (4)根據(jù)當(dāng)前時(shí)間繪制指針

          習(xí)慣上,時(shí)針粗短,分針略粗而長(zhǎng),秒針細(xì)長(zhǎng)。為加大區(qū)別,示例中秒針細(xì)長(zhǎng)并且繪制成紅色。

          function drawHp(i){//繪制時(shí)針
          	const x0=Math.cos(hd*i*30),y0=Math.sin(hd*i*30);
          	drawPointer(oX,oY,oX+x0*(r-90),oY+y0*(r-90),10,"#000000");
          }
          function drawMp(i){//繪制分針
          	const x0=Math.cos(hd*i*6),y0=Math.sin(hd*i*6);
          	drawPointer(oX,oY,oX+x0*(r-60),oY+y0*(r-60),5,"#000000");
          }
          function drawSp(i){//繪制秒針
          	const x0=Math.cos(hd*i*6),y0=Math.sin(hd*i*6);
          	drawPointer(oX,oY,oX+x0*(r-20),oY+y0*(r-20),2,"#FF0000");
          }
          //抽取出繪制三種指針時(shí)共同的部分,注意指針繪制在渲染上下文ctxUI中
          function drawPointer(ox,oy,tx,ty,width,color){
          	ctxUI.strokeStyle = color;
          	ctxUI.lineCap = "round";
          	ctxUI.lineWidth = width;
          	ctxUI.beginPath();
          	ctxUI.moveTo(ox, oy);
          	ctxUI.lineTo(tx,ty);
          	ctxUI.stroke();
          	ctxUI.closePath();
          }

          現(xiàn)在已經(jīng)有了繪制三種指針的方法,參數(shù)是當(dāng)前時(shí)間的時(shí)、分和秒,將根據(jù)它們的值確定指針的坐標(biāo)。不過(guò),因?yàn)槭褂玫氖悄J(rèn)的convas坐標(biāo)體系,0值實(shí)際指向3的位置,需要小小的修正一下。

          window.requestAnimationFrame(function fn(){
          		var d = new Date();
          		ctxUI.clearRect(0,0,oW,oH);
          		//度數(shù)從0開始,而0在3刻度(15分/秒位置),修正為全值減15,如果小于0則修正回來(lái)
              var hour=d.getHours(),minute=d.getMinutes()-15,second=d.getSeconds()-15;
          		hour=hour>11? hour-15 : hour-3;
          		drawHp(hour>=0? hour : 12+hour);
          		drawMp(minute>=0? minute : 60+minute);
          		drawSp(second>=0? second : 60+second);
          		window.requestAnimationFrame(fn);
          });

          接下來(lái),調(diào)用window.requestAnimationFrame,在其中繪制并更新指標(biāo)的位置。看看效果如何:

          指針繪制情況與實(shí)際時(shí)間相符

          貌似效果有了,截圖時(shí)電腦上的時(shí)間是10時(shí)17分,指針繪制上,時(shí)針指向10時(shí),分針指向17。嗯,感覺(jué)有點(diǎn)別扭?對(duì)了,時(shí)針和分針怎么是端端正正地指向它們的整時(shí)整分刻度上呢?實(shí)際鐘表上時(shí)針和分針是展示動(dòng)態(tài)進(jìn)度的,此時(shí)時(shí)針應(yīng)該越過(guò)10時(shí)的位置才對(duì)。沒(méi)關(guān)系,我們?cè)诶L制時(shí)針和分針時(shí)別點(diǎn)東西,讓它的角度值加上分針和秒針的值試試。

          //修改后的繪制三種指針的方法
          function drawHp(i,f,m){//繪制時(shí)針,參數(shù):時(shí),分,秒
          	const x0=Math.cos(hd*(i+(f/60)+(m/600))*30),y0=Math.sin(hd*(i+(f/60)+(m/600))*30);
          	drawPointer(oX,oY,oX+x0*(r-90),oY+y0*(r-90),10,"#000000");
          }
          function drawMp(i,f){//繪制分針,參數(shù),分,秒
          	const x0=Math.cos(hd*(i+(f/60))*6),y0=Math.sin(hd*(i+(f/60))*6);
          	drawPointer(oX,oY,oX+x0*(r-60),oY+y0*(r-60),5,"#000000");
          }
          function drawSp(i){//繪制秒針
          	const x0=Math.cos(hd*i*6),y0=Math.sin(hd*i*6);
          	drawPointer(oX,oY,oX+x0*(r-20),oY+y0*(r-20),2,"#FF0000");
          }

          再來(lái)看看效果,嗯,立竿見(jiàn)影呀:

          指針指向更合理了

          到此為止,canvas繪制一個(gè)簡(jiǎn)易時(shí)鐘就完成了。下面繼續(xù)優(yōu)化一下。剛才使用requestAnimationFrame方法即時(shí)更新繪制情況。這個(gè)方法與刷新率有關(guān),看看mdn上面怎么說(shuō)的:

          window.requestAnimationFrame() 方法會(huì)告訴瀏覽器你希望執(zhí)行一個(gè)動(dòng)畫。它要求瀏覽器在下一次重繪之前,調(diào)用用戶提供的回調(diào)函數(shù)。

          對(duì)回調(diào)函數(shù)的調(diào)用頻率通常與顯示器的刷新率相匹配。雖然 75hz、120hz 和 144hz 也被廣泛使用,但是最常見(jiàn)的刷新率還是 60hz(每秒 60 個(gè)周期/幀)。為了提高性能和電池壽命,大多數(shù)瀏覽器都會(huì)暫停在后臺(tái)選項(xiàng)卡或者隱藏的 <iframe> 中運(yùn)行的 requestAnimationFrame()。

          本示例中,更新指針的位置并不需要很高的刷新頻率,可以通過(guò)節(jié)流進(jìn)行一下優(yōu)化:

          var fps = 5, fpsInterval = 1000 / fps,lastTime = new Date().getTime(); //記錄上次執(zhí)行的時(shí)間
          function runStep() {
              requestAnimationFrame(runStep);
              var d=new Date(),now = d.getTime()
              var elapsed = now - lastTime;
              if (elapsed > fpsInterval) {
          				ctxUI.clearRect(0,0,oW,oH);
                  lastTime = now - (elapsed % fpsInterval); 
          			//度數(shù)從0開始,而0在3刻度(15分/秒位置),修正為全值-15,如果小于0則用60減回
                  var hour=d.getHours(),minute=d.getMinutes()-15,second=d.getSeconds()-15;//console.log(d.getSeconds(),second);
                  hour=hour>11? hour-15 : hour-3;
                  drawHp(hour>=0? hour : 12+hour,minute+15,second+15);
                  drawMp(minute>=0? minute : 60+minute,second+15);
                  drawSp(second>=0? second : 60+second);
              }
          }
          runStep();

          當(dāng)然,實(shí)現(xiàn)時(shí)鐘的方法是很多,比如可以使用畫布的旋轉(zhuǎn)(rotate方法)來(lái)實(shí)現(xiàn)指針的動(dòng)態(tài)轉(zhuǎn)動(dòng)等等。

          完整HTML+JS源碼:

          雪時(shí)間軸個(gè)人博客模板,女生唯美簡(jiǎn)潔個(gè)人博客靜態(tài)頁(yè)面模板,藍(lán)色時(shí)間軸個(gè)人網(wǎng)頁(yè)模板,下雪空間個(gè)人模板代碼

          1、html頁(yè)面代碼

          <!doctype html>
          <html>
          <head>
          <meta charset="gb2312">
          <title>看雪時(shí)間軸個(gè)人博客模板 - bokequ.com</title>
          <meta name="keywords" content="藍(lán)色模板,個(gè)人網(wǎng)站模板,個(gè)人博客模板,博客模板,css3,html5,網(wǎng)站模板" />
          <meta name="description" content="這是一個(gè)有關(guān)看雪時(shí)間軸的css3 html5 網(wǎng)站模板" />
          <link href="css/styles.css" rel="stylesheet">
          <link href="css/animation.css" rel="stylesheet">
          <!-- 返回頂部調(diào)用 begin -->
          <link href="css/lrtk.css" rel="stylesheet" />
          <script type="text/javascript" src="js/jquery.js"></script>
          <script type="text/javascript" src="js/js.js"></script>
          <!-- 返回頂部調(diào)用 end-->
          <!--[if lt IE 9]>
          <script src="js/modernizr.js"></script>
          <![endif]-->
          </head>
          <body>
          <header> <img src="http://www.bokequ.com/winter/templets/xq/images/logo.png" alt="看雪個(gè)人空間" width="170" height="60">
            <h1><a href="http://www.bokequ.com/winter/">看雪時(shí)間軸個(gè)人博客模板</a></h1>
            <p>看雪,是一種唯美的心境。這個(gè)冬季,放下疲憊的自己,一起看雪吧</p>
          </header>
          <div class="b_nav"></div>
          <div id="nav">
            <ul>
             <li><a href="#">網(wǎng)站首頁(yè)</a></li>
              <li><a href="http://www.bokequ.com/blog/1/" target="_blank" title="個(gè)人博客模板">個(gè)人博客模板</a></li>
              <li><a href="#"  title="圖書推薦">圖書推薦</a></li>
              <li><a href="#" title="網(wǎng)站建設(shè)">網(wǎng)站建設(shè)</a></li>
              <li><a href="http://www.bokequ.com/category/web" target="_blank" title="HTML5 / CSS3">HTML5/CSS3</a></li>
              <li><a href="#" target="_blank" title="技術(shù)探討">技術(shù)探討</a></li>
              <li><a href="http://www.bokequ.com/wo/life/man/" target="_blank" title="慢生活">慢生活</a></li>
              <li><a href="http://www.bokequ.com/wo/newstalk/" target="_blank" title="碎言碎語(yǔ)">碎言碎語(yǔ)</a></li>
            </ul>
            <!--獲取當(dāng)前頁(yè)導(dǎo)航 高亮顯示標(biāo)題-->
          </div>
          <!--header end-->
          <div id="mainbody">
            <div class="info">
              <figure> <img src="images/art1.jpg"  alt="看雪,是一種唯美的心境">
                <figcaption><strong>看雪,是一種唯美的心境</strong>   喜歡雪,沒(méi)有理由,只是愛(ài)它的輕盈,卻不張揚(yáng);癡迷于它的典雅,卻不做作。純純的顏色,潔白如晶,如天使,似鵝毛,飄飄灑灑,漫天飛舞。它雖沒(méi)有華麗的外套,白色卻是最好的衣冠;它雖稱不上雍容華貴,素雅卻是最佳的裝扮。帶著它的雅致,邁著絕美的舞姿,隨著冬的到來(lái)而翩翩起舞,洋洋灑灑,一瀉千里。 </figcaption>
              </figure>
              <div class="card">
                <h1>關(guān)于我</h1>
                <p>網(wǎng)名:keyboard | 草戊水來(lái)</p>
                <p>職業(yè):Web前端設(shè)計(jì)師、網(wǎng)頁(yè)設(shè)計(jì)</p>
                <p>電話:18666888333</p>
                <p>Email:snow@qq.com</p>
                <ul class="linkmore">
                  <li><a href="#" class="talk" title="給我留言"></a></li>
                  <li><a href="#" class="address" title="聯(lián)系地址"></a></li>
                  <li><a href="#" class="email" title="給我寫信"></a></li>
                  <li><a href="#" class="photos" title="生活照片"></a></li>
                  <li><a href="#" class="heart" title="關(guān)注我"></a></li>
                </ul>
              </div>
            </div>
            <!--info end-->
            <div class="blank"></div>
            <div class="blogs">
              <ul class="bloglist">
                <li>
                  <div class="arrow_box">
                    <div class="ti"></div>
                    <!--三角形-->
                    <div class="ci"></div>
                    <!--圓形-->
                    <h2 class="title"><a href="http://www.bokequ.com/blog/12/1.html" target="_blank">雪,溫暖了整個(gè)冬天。</a></h2>
                    <ul class="textinfo">
                      <a target="_blank" href="http://www.bokequ.com/blog/12/1.html"><img src="images/11.jpg"></a>
                      <p>   冬天總是不如夏春秋一般柔軟多情,既然來(lái)了,就讓人記得刻苦銘心。人生如此般,雪一般的歲月,苦中作樂(lè),暫不說(shuō)這是那些文人雅客筆下描寫的那樣如詩(shī)如畫,卻也是每一個(gè)人的雪景中總有一處屬于自己建立起的一片天地。如癡如醉的自己,看不清別人,也看不清自己,倒也是一種境界,讓人有點(diǎn)糊涂,有點(diǎn)執(zhí)迷。 </p>
                    </ul>
                    <ul class="details">
                      <li class="likes"><a href="#">喜歡 10</a></li>
                      <li class="comments"><a href="#">評(píng)論 34</a></li>
                      <li class="icon-time"><a href="#">時(shí)間 2016-12-1</a></li>
                    </ul>
                  </div>
                  <!--arrow_box end-->
                </li>
                <li>
                  <div class="arrow_box">
                    <div class="ti"></div>
                    <!--三角形-->
                    <div class="ci"></div>
                    <!--圓形-->
                    <h2 class="title"><a href="http://www.bokequ.com/wo/" target="_blank">說(shuō)好陪我看第一場(chǎng)雪。雪下了,你在哪?</a></h2>
                    <ul class="textinfo">
                      <a href="#"><img src="images/s5.jpg"></a>
                      <p>   1、雪很美, 當(dāng)它落下來(lái)的那一刻,就注定要化成水。2、世界上沒(méi)有不融化的雪,也沒(méi)有永遠(yuǎn)不變的愛(ài)情,人心都是會(huì)變的。3、純潔的雪,洗濯了骯臟的世界,邂逅的只是安靜的大地。4、冬天下雪的時(shí)候他會(huì)背我走 可是我們分手了。5、冬天的早晨, 晴朗的陽(yáng)光, 潔凈安寧的雪, 一切美的就像我喜歡的她。6、當(dāng)赤道留住雪花。眼淚融掉細(xì)沙,你肯珍惜我嗎?</p>
                    </ul>
                    <ul class="details">
                      <li class="likes"><a href="#">喜歡 102</a></li>
                      <li class="comments"><a href="#">評(píng)論 58</a></li>
                      <li class="icon-time"><a href="#">時(shí)間 2016-12-2</a></li>
                    </ul>
                  </div>
                  <!--arrow_box end-->
                </li>
                <li>
                  <div class="arrow_box">
                    <div class="ti"></div>
                    <!--三角形-->
                    <div class="ci"></div>
                    <!--圓形-->
                    <h2 class="title"><a href="http://www.bokequ.com/wo/" target="_blank">風(fēng)勁吹,雪漫舞</a></h2>
                    <ul class="textinfo">
                      <a href="#"><img src="images/s3.jpg"></a>
                      <p>   雪花漫天卷地落下來(lái),猶如鵝毛一般,紛紛揚(yáng)揚(yáng)。輕輕地輕輕地落在房頂上,落在草地上,落在山峰上。一會(huì)兒,大地一片雪白,好象整個(gè)世界都是銀白色的,閃閃發(fā)光。雪落在地上,那么純潔,那么晶瑩,真使人不忍心踩上去...</p>
                    </ul>
                    <ul class="details">
                      <li class="likes"><a href="#">喜歡 15</a></li>
                      <li class="comments"><a href="#">評(píng)論 2</a></li>
                      <li class="icon-time"><a href="#">時(shí)間 2016-12-3</a></li>
                    </ul>
                  </div>
                  <!--arrow_box end-->
                </li>
                <li>
                  <div class="arrow_box">
                    <div class="ti"></div>
                    <!--三角形-->
                    <div class="ci"></div>
                    <!--圓形-->
                    <h2 class="title"><a href="http://www.bokequ.com/wo/" target="_blank">北京下雪了</a></h2>
                    <ul class="textinfo">
                      <a href="#"><img src="images/s4.jpg"></a>
                      <p>   雪中的北京,好美,下雪天,是不是應(yīng)該得到一個(gè)大大的擁抱,一杯喜歡的咖啡,牽手去踩踩雪,聽(tīng)著咯吱咯吱的聲音。每年下雪的時(shí)候,都是我最想家的時(shí)候,以前北京下雪總是沒(méi)有大連下的那么痛快,所以最冷的時(shí)候最懷念家鄉(xiāng)的大學(xué)和溫暖的被窩,原來(lái)寒冷真的會(huì)加重思鄉(xiāng)之情……小伙伴們,你們還好嗎?!</p>
                    </ul>
                    <ul class="details">
                      <li class="likes"><a href="#">喜歡 102</a></li>
                      <li class="comments"><a href="#">評(píng)論 58</a></li>
                      <li class="icon-time"><a href="#">時(shí)間 2016-12-4</a></li>
                    </ul>
                  </div>
                  <!--arrow_box end-->
                </li>
                <li>
                  <div class="arrow_box">
                    <div class="ti"></div>
                    <!--三角形-->
                    <div class="ci"></div>
                    <!--圓形-->
                    <h2 class="title"><a href="http://www.bokequ.com/wo/" target="_blank">看雪賞雪心情說(shuō)說(shuō)</a></h2>
                    <ul class="textinfo">
                      <a href="#"><img src="images/s1.jpg"></a>
                      <p>   踏上由雪鋪砌的小路,獨(dú)自漫步,踩上去聽(tīng)那咯吱咯吱的樂(lè)聲,真比那天籟之音還要醉人,難怪有詩(shī)這樣寫到“此曲只應(yīng)天上有,人間哪得幾回聞。”你瞧,遠(yuǎn)出那被雪覆蓋的枯枝,似開出了一朵朵白色的小花,真有點(diǎn)“忽如一夜春風(fēng)來(lái),千樹萬(wàn)樹梨花開”的味道,卻又好似玉雕的一般,晶瑩剔透。還有那房屋上,也都披上了厚厚的雪戎裝。</p>
                    </ul>
                    <ul class="details">
                      <li class="likes"><a href="#">喜歡 15</a></li>
                      <li class="comments"><a href="#">評(píng)論 2</a></li>
                      <li class="icon-time"><a href="#">時(shí)間 2016-12-5</a></li>
                    </ul>
                  </div>
                  <!--arrow_box end-->
                </li>
                <li>
                  <div class="arrow_box">
                    <div class="ti"></div>
                    <!--三角形-->
                    <div class="ci"></div>
                    <!--圓形-->
                    <h2 class="title"><a href="http://www.bokequ.com/wo/" target="_blank">因?yàn)閻?ài)你,更是因?yàn)槎?lt;/a></h2>
                    <ul class="textinfo">
                      <a href="#"><img src="images/12.jpg"></a>
                      <p>   外邊仍然飄著轉(zhuǎn)身急逝的雪花,多想在看看落滿操場(chǎng)的雪花,多想和你踏著,聽(tīng)著雪碎的聲音,如今只剩下慘淡的雪還在下,只能聽(tīng)見(jiàn)自己心碎的聲音還在顫抖。望著你離開的背影,我告訴自己要堅(jiān)強(qiáng),不哭,是因?yàn)閻?ài)你,更是因?yàn)槎恪?</p>
                    </ul>
                    <ul class="details">
                      <li class="likes"><a href="#">喜歡 15</a></li>
                      <li class="comments"><a href="#">評(píng)論 2</a></li>
                      <li class="icon-time"><a href="#">時(shí)間 2016-12-6</a></li>
                    </ul>
                  </div>
                  <!--arrow_box end-->
                </li>
                <li>
                  <div class="arrow_box">
                    <div class="ti"></div>
                    <!--三角形-->
                    <div class="ci"></div>
                    <!--圓形-->
                    <h2 class="title"><a href="http://www.bokequ.com/wo/" target="_blank">長(zhǎng)大后看雪,看的是心境</a></h2>
                    <ul class="textinfo">
                      <a href="#"><img src="images/art2.jpg"></a>
                      <p>   許多人看雪會(huì)看出許多往事,像小時(shí)候看雪,看的就是純凈,長(zhǎng)大后看雪,看的是心境。不同的人生階段看到的雪花固然不同,有看出驚艷的,有看出傷感的,有看出華麗的,有看出蒼白的,不論看到了什么樣的心境,雪還是雪,只是落在誰(shuí)的心上,就堆積成什么樣的形狀。我到真心認(rèn)為,雪就是雪,季節(jié)的使者,有它的時(shí)經(jīng)典散文摘抄:候,證明這個(gè)季節(jié)是狂歡的,沒(méi)它的時(shí)候,這個(gè)季節(jié)會(huì)顯得格外冷清。</p>
                    </ul>
                    <ul class="details">
                      <li class="likes"><a href="#">喜歡 15</a></li>
                      <li class="comments"><a href="#">評(píng)論 2</a></li>
                      <li class="icon-time"><a href="#">時(shí)間 2016-12-7</a></li>
                    </ul>
                  </div>
                  <!--arrow_box end-->
                </li>
                <li>
                  <div class="arrow_box">
                    <div class="ti"></div>
                    <!--三角形-->
                    <div class="ci"></div>
                    <!--圓形-->
                    <h2 class="title"><a href="http://www.bokequ.com/wo/" target="_blank">雪景清純美女圖片下載</a></h2>
                    <ul class="textinfo">
                      <a href="#"><img src="images/13.jpg"></a>
                      <p>  雪,帶著那冬季的清寒悄然飄落,雪花是多么美好,它純凈了整個(gè)世界,純凈了我們的心靈中的每一個(gè)角落。一起徒步看雪景也許最美的不是天長(zhǎng)地久,而是和你一起坐在長(zhǎng)椅上,看遠(yuǎn)處的雪景,天空很冷,我們卻很幸福!</p>
                    </ul>
                    <ul class="details">
                      <li class="likes"><a href="#">喜歡 15</a></li>
                      <li class="comments"><a href="#">評(píng)論 2</a></li>
                      <li class="icon-time"><a href="#">時(shí)間 2016-12-8</a></li>
                    </ul>
                  </div>
                  <!--arrow_box end-->
                </li>
                <div class="post-nav-right"><p><a target="_blank" href="http://www.bokequ.com/blog/12/1.html" >點(diǎn)擊閱讀更多</a></p></div> 
              </ul>
              <!--bloglist end-->
              <aside>
                <div class="search">
                  <form class="searchform" method="get" action="#">
                    <input type="text" name="s" value="Search" onFocus="this.value=''" onBlur="this.value='Search'">
                  </form>
                </div>
                <div class="viny">
                  <dl>
                    <dt class="art"><img src="images/13.jpg" alt="歌曲專輯"></dt>
                    <dd class="icon-song"><span></span>我很快樂(lè)</dd>
                    <dd class="icon-artist"><span></span>歌手:劉惜君</dd>
                    <dd class="icon-album"><span></span>專輯:《我很快樂(lè)》</dd>
                    <dd class="icon-like"><span></span><a href="#">喜歡</a></dd>
                    <dd class="music">
                      <audio src="http://www.bokequ.com/blog/12/images/kuaile.mp3" controls autoplay></audio>
                    </dd>
                    <!--也可以添加loop屬性 音頻加載到末尾時(shí),會(huì)重新播放-->
                  </dl>
                </div>
                <div class="tuijian">
                  <h2>推薦文章</h2>
                  <ol>
                    <li><span><strong>1</strong></span><a target="_blank" href="http://www.bokequ.com/blog/summer/biye.html">廣東省電子商務(wù)技師學(xué)院</a></li>
                    <li><span><strong>2</strong></span><a target="_blank" href="http://www.bokequ.com/shuo/">淺藍(lán)色小清新說(shuō)說(shuō)文章類織夢(mèng)CMS個(gè)人博客模板</a></li>
                    <li><span><strong>3</strong></span><a target="_blank" href="http://www.bokequ.com/blog/8/">花開花落—古典個(gè)人博客模板</a></li>
                    <li><span><strong>4</strong></span><a target="_blank" href="http://www.bokequ.com/winter/">心情日記_心情語(yǔ)錄隨筆個(gè)人博客模板</a></li>
                    <li><span><strong>5</strong></span><a target="_blank" href="http://www.bokequ.com/blog/sep/">九月.夢(mèng)見(jiàn)夏天結(jié)束的樣子個(gè)人博客</a></li>
                    <li><span><strong>6</strong></span><a target="_blank" href="http://www.bokequ.com/time/">小清新個(gè)人博客主頁(yè)模板 - 用照片記錄時(shí)光</a></li>
                    <li><span><strong>7</strong></span><a target="_blank" href="http://www.bokequ.com/blog/bozhao/index.html">廣州博兆集團(tuán)—五龍山莊拓展訓(xùn)練</a></li>
                    <li><span><strong>8</strong></span><a target="_blank" href="http://www.bokequ.com/wo/">個(gè)人生活點(diǎn)滴記錄博客</a></li>
                    <li><span><strong>9</strong></span><a target="_blank" href="http://www.bokequ.com/blog/22/index.html">畢業(yè)了,一起看看青春期那些糟心大片!</a></li>
                  </ol>
                </div>
                <div class="toppic">
                  <h2>圖文推薦</h2>
                  <ul>
                    <li><a href="#"><img src="images/k01.jpg">唯美雪景意境圖片,唯美雪景意境圖片壁紙!
                      <p>點(diǎn)擊閱讀更多...</p>
                      </a></li>
                    <li><a href="#"><img src="images/10.jpg">浪漫唯美雪景圖片_下雪浪漫唯美圖片下載
                      <p>點(diǎn)擊閱讀更多...</p>
                      </a></li>
                    <li><a href="#"><img src="images/k03.jpg">唯美人物雪景圖片:冬天要是有雪才完美。
                      <p>點(diǎn)擊閱讀更多...</p>
                      </a></li>
                    <li><a href="#"><img src="images/12.jpg">最美冬天雪景圖片大全。
                      <p>點(diǎn)擊閱讀更多...</p>
                      </a></li>
                    <li><a href="#"><img src="images/13.jpg">世上所謂幸福,就是一個(gè)笨蛋遇到一個(gè)傻瓜。
                      <p>點(diǎn)擊閱讀更多...</p>
                      </a></li>
                  </ul>
                </div>
                <div class="clicks">
                  <h2>熱門點(diǎn)擊</h2>
                  <ol>
                    <li><span><a href="#">慢生活</a></span><a href="http://www.bokequ.com/wo/share/">有一種思念,是淡淡的幸福,一個(gè)心情一行文字</a></li>
                    <li><span><a href="#">愛(ài)情美文</a></span><a href="http://www.bokequ.com/wo/share/">勵(lì)志人生-要做一個(gè)瀟灑的女人</a></li>
                    <li><span><a href="#">慢生活</a></span><a href="http://www.bokequ.com/wo/share/">女孩都有浪漫的小情懷——浪漫的求婚詞</a></li>
                    <li><span><a href="#">博客模板</a></span><a href="http://www.bokequ.com/wo/share/">Green綠色小清新的夏天-個(gè)人博客模板</a></li>
                    <li><span><a href="#">女生個(gè)人博客</a></span><a href="http://www.bokequ.com/wo/share/">女生清新個(gè)人博客網(wǎng)站模板</a></li>
                    <li><span><a href="#">Wedding</a></span><a href="http://www.bokequ.com/wo/share/">Wedding-婚禮主題、情人節(jié)網(wǎng)站模板</a></li>
                    <li><span><a href="#">三欄布局</a></span><a href="http://www.bokequ.com/wo/share/">Column 三欄布局 個(gè)人網(wǎng)站模板</a></li>
                    <li><span><a href="#">個(gè)人網(wǎng)站模板</a></span><a href="http://www.bokequ.com/wo/share/">時(shí)間煮雨-個(gè)人網(wǎng)站模板</a></li>
                    <li><span><a href="#">古典風(fēng)格</a></span><a href="http://www.bokequ.com/wo/share/">花氣襲人是酒香—個(gè)人網(wǎng)站模板</a></li>
                  </ol>
                </div>
                <div class="visitors">
                  <h2>最新評(píng)論</h2>
                  <dl>
                    <dt><img src="images/s8.jpg" alt="看雪個(gè)人博客模板">
                    <dt>
                    <dd>DanceSmile
                      <time>38分鐘前</time>
                    </dd>
                    <dd>在 <a href="http://www.yangqq.com/jstt/bj/2013-07-28/530.html" class="title">如果要學(xué)習(xí)web前端開發(fā),需要學(xué)習(xí)什么? </a>中評(píng)論:</dd>
                    <dd>文章非常詳細(xì),我很喜歡.前端的工程師很少,我記得幾年前yahoo花高薪招聘前端也招不到</dd>
                  </dl>
                  <dl>
                    <dt><img src="images/s7.jpg" alt="看雪個(gè)人博客模板">
                    <dt>
                    <dd>yisa
                      <time>2小時(shí)前</time>
                    </dd>
                    <dd>在 <a href="http://www.bokequ.com/blog/7/" class="title">>青春往事個(gè)人博客模板 - bokequ.com</a>中評(píng)論:</dd>
                    <dd>我要下載個(gè)人博客模板</dd>
                  </dl>
                  <dl>
                    <dt><img src="images/s6.jpg" alt="看雪個(gè)人博客模板">
                    <dt>
                    <dd>個(gè)人博客
                      <time>12月7日</time>
                    </dd>
                    <dd>在 <a href="http://www.bokequ.com/wo/" class="title">如果個(gè)人博客網(wǎng)站再?zèng)]有價(jià)值,你還會(huì)堅(jiān)持嗎? </a>中評(píng)論:</dd>
                    <dd>博客色彩豐富,很是好看</dd>
                  </dl>
                  <dl>
                    <dt><img src="images/s2.jpg" alt="看雪個(gè)人博客模板">
                    <dt>
                    <dd>小林博客
                      <time>12月7日</time>
                    </dd>
                    <dd>在 <a href="http://www.bokequ.com/wo/" class="title">如果個(gè)人博客網(wǎng)站再?zèng)]有價(jià)值,你還會(huì)堅(jiān)持嗎? </a>中評(píng)論:</dd>
                    <dd>博客色彩豐富,很是好看</dd>
                  </dl>
                  <dl>
                    <dt><img src="images/s5.jpg" alt="看雪個(gè)人博客模板">
                    <dt>
                    <dd>MAOLAI博客
                      <time>12月7日</time>
                    </dd>
                    <dd>在 <a href="http://www.bokequ.com/wo/" class="title">如果個(gè)人博客網(wǎng)站再?zèng)]有價(jià)值,你還會(huì)堅(jiān)持嗎? </a>中評(píng)論:</dd>
                    <dd>博客色彩豐富,很是好看</dd>
                  </dl>
                </div>
                <div class="flickr">
                  <h2>最近訪客</h2>
                  <ul>
                    <li><a href="#" rel="nofollw" title="夢(mèng)想霞個(gè)人博客"><img src="images/s5.jpg"></a></li>
                    <li><a target="_blank" href="http://www.xuanfengge.com/" rel="nofollw" title="軒楓閣"><img src="images/s2.jpg"></a></li>
                    <li><a target="_blank" href="http://www.onmpw.com/index.html" rel="nofollw" title="跡憶博客"><img src="images/03.jpg"></a></li>
                    <li><a target="_blank" href="http://m.bokequ.com/" rel="nofollw" title="草根站長(zhǎng)目錄"><img src="images/04.jpg"></a></li>
                    <li><a href="#" rel="nofollw" title="藝小昔個(gè)人博客"><img src="images/05.jpg"></a></li>
                    <li><a target="_blank" href="http://www.bokequ.com/wo/newstalk/" rel="nofollw" title="心情說(shuō)說(shuō)"><img src="images/06.jpg"></a></li>
                    <li><a target="_blank" href="http://www.bokequ.com/wo/comic/" rel="nofollw" title="動(dòng)漫資訊"><img src="images/s6.jpg"></a></li>
                    <li><a href="#" rel="nofollw" title="超神學(xué)院"><img src="images/08.jpg"></a></li>
                    <li><a target="_blank" href="http://www.bokequ.com/shuo/" rel="nofollw" title="唯美說(shuō)說(shuō)樂(lè)園"><img src="images/09.jpg"></a></li>
                  </ul>
                </div>
              </aside>
            </div>
            <!--blogs end-->
          </div>
          <!--mainbody end-->
          <footer>
            <div class="footer-bottom">
              <p>Copyright 2016 時(shí)間:大約在冬季 Design by <a href="http://www.bokequ.com">MAOLAI博客(bokequ.com)</a>  模板下載地址:更新中...</p>
            </div>
          </footer>
          <!-- jQuery仿騰訊回頂部和建議 代碼開始 -->
          <div id="tbox"> <a id="togbook" href="#"></a> <a id="gotop" href="javascript:void(0)"></a> </div>
          <!-- 代碼結(jié)束 -->
          </body>
          </html>

          2、css樣式

          @charset "gb2312";
          /* CSS Document */
          * { margin: 0; padding: 0 }
          body { font: 14px "宋體", "Arial Narrow", HELVETICA; color: #3F3E3C; line-height: 1.5; background:url(../images/bg1.jpg)}
          img { border: 0; vertical-align: middle }
          h1, h2, h3, h4, h5, h6 { font-weight: normal; }
          h1 { font: 24px "微軟雅黑", "Microsoft YaHei", Arial, Helvetica, sans-serif }
          p { word-wrap: break-word }
          ul, ol { list-style: none; }
          a { color: #111; text-decoration: none; transition: All 1s ease; -webkit-transition: All 1s ease; -moz-transition: All 1s ease; -ms-transition: All 1s ease; -o-transition: All 1s ease; }
          a:hover { color: #111; }
          /* -----------------------nav 一級(jí)導(dǎo)航----------------- */
          header {
          	padding:133px 0 0 0;
          	width:100%;
          	height:380px;
          	margin:auto;
          	background:url(../images/top.jpg) center 0 scroll no-repeat;}
          header img {
          	float:left;
          	margin:0 20px 0 66px;
          	-webkit-animation:'flipInX' 1s ease 1s backwards;
          	-moz-animation:'flipInX' 1s ease 1s backwards;
          	-ms-animation:'flipInX' 1s ease 1s backwards;
          	-o-animation:'flipInX' 1s ease 1s backwards;
          	animation:'flipInX' 1s ease 1s backwards;
          }
          header h1 {
          	font-size:16px;
          	font-weight:normal;
          	text-shadow:#fff 1px 1px 1px;
          }
          .b_nav{background:url(../images/menu_bg.png) 50% 0%;width:100%; margin-top:-160px;height:50px;}
          header h1 a {
          	color:#000
          }
          header h1 a:hover {
          	text-decoration:underline
          }
          header p {
          	margin:17px 0 0 0;
          	text-shadow:#000 1px 1px 1px;
          	color:#fff
          }
          #nav {
          	width:100%;
          	line-height:40px;
          	height:40px;
          	margin-top:-86px;
          }
          #nav ul {
          	list-style:none;
          	margin:auto;
          	width:1030px
          }
          #nav ul li {
          	float:left;
          	width:100px;
          	text-align:center;
          	text-shadow:#333 1px 1px 1px;
          }
          #nav ul li a {
          	display:block;
          	color:#FFF;
          	cursor:pointer;
          	font-weight:bold;
          }
          #nav ul li a:hover {
          	background:#6983d7;
          	color:#FFF;
          	font-weight:bold;
          	border-radius:50px 0
          }
          #nav ul li a#nav_current {
          	background:#6983d7;
          	color:#FFF;
          	font-weight:bold;
          	border-radius:50px 0
          }
          #mainbody { width: 100%;clear: both; overflow: hidden; }
          /* ---------------------info------------------------- */
          .info { width: 1000px; margin:50px auto; overflow: hidden; clear: both }
          /* 圖片向上翻轉(zhuǎn)的動(dòng)畫效果 */
          .info figure { display: inline-block; width: 630px; height: 250px; position: relative; float: left; }
          .info figcaption { padding: 20px; position: absolute; top: 20%; left: 0; background: rgba(153,153,153,.8); color: white; opacity: 0; -webkit-transition: opacity .75s ease-out; -moz-transition: opacity .75s ease-out; -o-transition: opacity .75s ease-out; transition: opacity .75s ease-out; }
          .info figure:hover figcaption { opacity: 1; } /* 用opacity 設(shè)置鼠標(biāo)放上去顯示文字的效果 */
          .info figcaption strong { display: block; line-height: 40px }
          /* card */
          .card { box-shadow: 0px 1px 0px rgba(255,255,255,.1), inset 0px 1px 1px rgba(0,0,0,.7); border-radius: 6px; background:#fff url(../images/quote-bg.png) no-repeat top right; width: 350px; float: right; height: 250px; overflow: hidden }
          .card h1 { padding: 10px }
          .card p:first-child { padding: 40px 0 0 40px } /* 結(jié)構(gòu)性偽類選擇符 選擇第一個(gè)p標(biāo)簽,并且設(shè)置上、左距離是40px*/
          .card p { padding: 0 0 0 40px; line-height: 28px; color: #111;}
          .linkmore { margin: 15px 0 0 15px }
          .linkmore li a { height: 50px; width: 50px; display: block; overflow: hidden; box-shadow: 0px 1px 0px rgba(255,255,255,.1), inset 0px 1px 1px rgba(0,0,0,.7); border-radius: 50%; float: left; margin: 0 6px; }
          .linkmore li a:hover { opacity: 0.5; -webkit-transform: rotate(30deg); -ms-transform: rotate(30deg); -moz-transform: rotate(30deg); -o-transform: rotate(30deg); transform: rotate(30deg); }
          .talk, .address, .email, .photos, .heart { background: url(../images/icons.png) no-repeat; }
          .talk { background-position: 13px 18px }
          .address { background-position: 12px -22px }
          .email { background-position: 12px -60px }
          .photos { background-position: 12px -137px }
          .heart { background-position: 13px -99px }
          /* --------------------博客列表-------------------- */
          .blogs { width: 1000px; margin: 0 auto 20px; }
          .bloglist {margin-top:-33px; width: 666px; float: left; }
          .bloglist>li { border-right: #fff 2px solid; padding: 20px 0; }
          .arrow_box { background: #fff; box-shadow: 0px 1px 0px rgba(255,255,255,.1), inset 0px 1px 1px rgba(0,0,0,.7); width: 630px; color: #b9b9b9; border-radius: 6px; position: relative }
          .ti { width: 0px; height: 0px; border-style: solid; border-width: 0px 0 20px 22px; border-color: transparent transparent transparent #fff; position: absolute; left: 630px; top: 20px; }/* 三角形 */
          .ci { width: 10px; height: 10px; border-radius: 50%; position: absolute; left: 658px; top: 16px; background: #fff; border: 2px solid #fff; } /* 圓形定義邊框色與背景一致 */
          .ci:hover { border: 2px solid #B9B9B9; }
          .arrow_box h2.title { padding: 0 0 0 20px; font: 16px/50px "微軟雅黑", "Microsoft YaHei", Arial, Helvetica, sans-serif }
          .arrow_box h2 a:hover { padding-left: 20px }
          .textinfo { overflow: hidden; }
          .arrow_box img { width:200px; padding: 4px; float: left; -webkit-transition: All 1s ease; -moz-transition: All 1s ease; -ms-transition: All 1s ease; -o-transition: All 1s ease; border-radius: 4px; margin: 0 20px 20px; }
          .arrow_box img:hover { opacity: 0.6; }
          .arrow_box p {color:#111; line-height: 24px; padding: 0 20px 20px }
          .details { background:#fafafa; border-radius: 0 0 6px 6px; padding: 0 10px }
          .details li { line-height: 26px; display: inline; font-size:14px; margin-right: 10px; }
          .details li a { color: #3F3E3C }
          .details li a:hover { color: #933 }
          .icon-time, .likes, .comments { background: url(../images/icons.png) no-repeat }
          .icon-time { background-position: 0 -208px; padding: 0 0 0 18px; }
          .likes, .comments { float: right; padding: 0 0 0 14px; }
          .likes { background-position: 0 -240px; }
          .comments { background-position: 0 -220px; }
          .post-nav-right{height:68px}
          .post-nav-right p{text-align:center;line-height:60px;font-size:16px;}
          .post-nav-right a{
              padding: 10px 10px;
              color: #222;
              background: #fff;
              border-radius: 3px;}
          /*-------------------aside側(cè)邊欄--------------------------*/
          aside { width: 310px; float: right; margin:-12px 0; }
          aside h2{ font-weight:bold;font-size: 16px; margin-bottom: 10px;color: #222 }
          aside div { box-shadow: 0px 1px 0px rgba(255,255,255,.1), inset 0px 1px 1px rgba(0,0,0,.7); border-radius: 6px; padding: 15px; background: #fff; margin-bottom: 20px; overflow: hidden; }
          .tuijian li, .clicks li { white-space: nowrap; text-overflow: ellipsis; overflow: hidden }
          .tuijian li a:hover { padding-left: 10px }
          .tuijian li span:before { content: "0"; }/* 數(shù)字列表前面統(tǒng)一加0  */
          .tuijian li span { margin-right: 10px; font-size: 14px; font-family: "微軟雅黑"; }
          .tuijian li:nth-child(-n+3) span { width: 39px; color: #999 } /* 選擇從第3個(gè)開始倒數(shù)也就是第三個(gè)前面的 */
          .tuijian li:nth-child(-n+3) strong { font-size: 24px; font-weight: normal; }
          .tuijian li:first-child span { color: #f8490b; } /* 選擇第一個(gè) */
          .tuijian li:nth-child(n+3) { line-height: 24px } /* 選擇從第3個(gè)開始往后數(shù) */
          .tuijian li:nth-child(4) { margin: 5px 0 0 0 } /* 選擇第四個(gè) */
          /* 圖文推薦 */
          .toppic li{margin:10px 0;}
          .toppic li img { width:100px; float: left; margin-right: 10px; }
          .toppic ul li:nth-child(2) { margin: 15px 0; }
          .toppic ul li a { display: block; width: 100%; clear: both; overflow: hidden }
          .toppic li p { color: #B5783E; padding-left: 110px; margin-top: 5px; }
          .toppic li:first-child p { background-position: 90px -263px; }
          .toppic li:nth-child(2) p { background-position: 90px -283px; }
          .toppic li:last-child p { background-position: 90px -301px; }
          /* 熱門點(diǎn)擊 */
          .clicks li { line-height: 24px; }
          .clicks li span:before { content: "【"; }
          .clicks li span:after { content: "】"; }
          .clicks li span a { padding: 0 5px; color: #366 }
          .clicks li a:hover { text-decoration: underline }
          /* search */
          .searchform { overflow: hidden; padding: 10px; }
          .searchform input { background:#fdfdfd url(../images/icons.png) no-repeat 3px -318px; border: 1px solid #111; width: 220px; line-height: 30px; color: #b9b9b9; padding-left: 30px; }
          /* music */
          .viny dl dd { color: #b9b9b9; line-height: 24px; }
          .art { background: url(../images/vinyl.png) no-repeat left; width: 130px; float: left; background-size: 120px; }
          .viny .art img { width: 90px; height: 90px; margin-left: 11px }
          .viny dd span { width: 12px; height: 24px; margin-right: 7px; float: left; display: block; }
          .icon-song span, .icon-artist span, .icon-album span, .icon-like span { background: url(../images/icons.png) no-repeat }
          .icon-song span { background-position: -33px -344px }
          .icon-artist span { background-position: -16px -344px }
          .icon-album span { background-position: 0 -344px }
          .icon-like span { background-position: -1px -299px; }
          .icon-like a { color: #B5783E }
          .icon-like a:hover { color: #FFF; text-decoration: underline }
          .music audio { width: 100%; padding-top: 10px }
          /* 最新評(píng)論 */
          .visitors dl { display: block; overflow: hidden; margin-bottom: 12px }
          .visitors dd { line-height: 22px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden }
          .visitors dd:last-child { color: #6A9150; }
          .visitors time { color: #066; margin-left: 10px }
          .visitors dt { float: left; }
          .visitors dt img { width: 67px; height: 67px; margin-right: 10px; }
          /* 最近訪客 */
          .flickr ul li { margin: 0 11px 11px 0; float: left; background: #000; }
          .flickr ul li img { width: 67px; height: 67px; border: #111 solid 1px; }
          .flickr ul li img:hover { opacity: 0.6 }
          /* --------------------------footer----------------------- */
          .footer-bottom {margin-top:38px;overflow: hidden; }
          .footer-bottom p { font-size:14px;text-align:center;color:#fff; width: 1000px; margin: 0 auto; padding: 10px 0; }

          看雪時(shí)間軸個(gè)人博客模板代碼演示http://www.bokequ.com/blog/12/


          主站蜘蛛池模板: 亚洲区精品久久一区二区三区 | 精品一区二区三区四区在线播放 | 熟妇人妻一区二区三区四区| 波多野结衣一区视频在线| 在线成人综合色一区| 亚洲片一区二区三区| 日韩一区二区久久久久久| 亚洲综合无码一区二区痴汉| 秋霞鲁丝片一区二区三区| 亚洲A∨无码一区二区三区| 免费无码一区二区三区蜜桃大| 精品国产亚洲一区二区在线观看 | 久久精品午夜一区二区福利| 精品一区二区三区免费| 国产精品高清一区二区三区不卡| 国产精品乱码一区二区三| 香蕉久久AⅤ一区二区三区 | 成人区人妻精品一区二区三区 | 精品视频一区二区三三区四区| 亚洲av无码片vr一区二区三区| 丰满岳乱妇一区二区三区| 国产探花在线精品一区二区| 五十路熟女人妻一区二区 | 一区二区视频在线播放| 国产激情一区二区三区在线观看| 亚洲一区二区三区国产精品| 国产一区二区三区内射高清| 亚洲一区二区三区影院| 99偷拍视频精品一区二区| 三上悠亚精品一区二区久久| 另类国产精品一区二区| 日本一区午夜艳熟免费| 国产一区二区好的精华液| 人妻少妇一区二区三区| 日本精品一区二区三本中文| 人妻体内射精一区二区三四| 久久国产香蕉一区精品| 后入内射国产一区二区| 精品无码国产一区二区三区51安| 亚洲国产美国国产综合一区二区| 亚洲国产精品一区二区第一页免|