網(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ǔ)法：


六、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è)位置就是所謂的路徑

路徑分為：

相對(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ì)路徑】
絕對(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ò) JavaScript 和 HTML 的 <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/

在線咨詢

上一篇：前端培訓(xùn)學(xué)費(fèi)一般多少？需要多長(zhǎng)時(shí)間？
下一篇：Web前端開發(fā)基礎(chǔ)知識(shí)，設(shè)置網(wǎng)頁(yè)背景圖，如何在網(wǎng)頁(yè)中插入圖片

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

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

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

、Html概述

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

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

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

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

1、！DOCTYPE

2、html

3、head

4、meta

5、body

四、Html文檔規(guī)范

五、Html注釋

六、html基本屬性

1.bgcolor

2.路徑

3.background

七、Html標(biāo)簽

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

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

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

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

5、圖片標(biāo)簽

6、audio

7、video

8、超鏈接

9、列表

1.有序列表

2、無(wú)序列表

3、描述列表

10、表格

10.1 基本使用

10.2 單元格合并

11、表單

11.1 基本使用

11.2 GET&POST

11.3 LABEL

11.4 INPUT

11.4.1 基本示例

11.4.2 調(diào)用攝像頭

11.4.3 其他類型

11.4.4 HIDDEN

11.4.5 SUBMIT

11.4.6 禁用表單

11.4.7 PATTERN

11.4.8 TEXTAREA

11.4.9 SELECT

11.4.10 RADIO

11.4.11 CHECKBOX

11.4.12 FILE

11.4.13 日期時(shí)間

11.4.14 DATALIST

12、框架集

12.1 垂直框架

12.3 混合框架

12.4 導(dǎo)航框架

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

么是Canvas

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

繪制鐘面刻度

您的項(xiàng)目需求