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)簽分為 :成對(duì)標(biāo)簽和自閉合標(biāo)簽【空標(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>
只有一個(gè)標(biāo)簽,用斜杠結(jié)束,斜杠也可以省略
語(yǔ)法:
<br/>
注意事項(xiàng):
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
</head>
<body>
</body>
</html>
!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>
html是html文檔的整體,也就是表示一個(gè)網(wǎng)頁(yè)。
html中的lang="en"是定義該文件語(yǔ)言是英文
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)簽。
meta是html語(yǔ)言head標(biāo)簽中的一個(gè)輔助性標(biāo)簽,該標(biāo)簽不包含任何內(nèi)容,但是該標(biāo)簽的屬性定義了與文檔相關(guān)聯(lián)的名稱,比如:編碼
<meta charset="utf-8"></meta>
body也是html的第一層子元素,我們頁(yè)面中顯示的所有內(nèi)容全部都是編寫在該標(biāo)簽體中。
html制定了文檔的編寫規(guī)范,必須遵守。
所有的標(biāo)簽必須小寫
所有的屬性必須用雙引號(hào)括起來(lái)
html文檔代碼中可以插入注釋,注釋是對(duì)代碼的說(shuō)明和解釋,注釋的內(nèi)容不會(huì)顯示在頁(yè)面上。
注釋的語(yǔ)法:
<!-- 注釋的內(nèi)容 -->
注:屬性是標(biāo)簽的輔助作用。
屬性 描述 bgcolor 設(shè)置網(wǎng)頁(yè)的背景顏色 background 設(shè)置網(wǎng)頁(yè)的背景圖片
設(shè)置網(wǎng)頁(yè)的背景顏色
<!DOCTYPE html>
<html lang="en">
<head>
<title>html的屬性</title>
</head>
<body bacolor="pink">
</body>
</html>
我們?cè)陂_發(fā)網(wǎng)頁(yè)時(shí),需要經(jīng)常的插入圖片、視頻、文件等一些操作,但是我們需要指定文件所在的位置,這個(gè)位置就是所謂的路徑
路徑分為:
設(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ì)路徑
網(wǎng)頁(yè)的組成:文字、圖片、視頻、超鏈接、列表、表格、表單等組成。
標(biāo)簽 描述 hn 設(shè)置文字標(biāo)題【n:取值范圍 1~6】 center 居中對(duì)齊 hr 水平線 屬性(width:寬度 color:顏色 size:粗細(xì)) br 換行 p 段落
標(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>
標(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>
在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è)置圖片大小,容易失真
在Html中,聲音由標(biāo)簽定義。
標(biāo)簽 描述 audio 聲音標(biāo)簽
屬性 描述 src 指定聲音地址
<audio src="nice.mp3">對(duì)不起,您的瀏覽器不支持</audio>
在Html中,視頻由video標(biāo)簽定義
標(biāo)簽 描述 video 視頻標(biāo)簽
屬性 描述 src 指定視頻地址
<video src="美女.mp4">對(duì)不起,您的瀏覽器不支持</video>
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 在講【常用】
超鏈接分類:
列表的使用與word等軟件的列表概念相似,只不過(guò)是應(yīng)用在網(wǎng)頁(yè)展示中。
有序列表是指有數(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>
無(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>
描述列表指每個(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>
表格在網(wǎng)頁(yè)開發(fā)中使用頻率非常高,尤其是數(shù)據(jù)展示的時(shí)候。
標(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>
屬性 說(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>
表單是一個(gè)包含表單元素的區(qū)域。
表單元素是允許用戶在表單中輸入內(nèi)容,比如:文本域(textarea)、下拉列表(select)、單選框(radio)、復(fù)選框(checkbox)等等。
表單需要使用表單標(biāo)簽來(lái)設(shè)置:
<!-- 表單 -->
<form>
input元素
</form>
屬性 說(shuō)明 action 后臺(tái)地址 method 提交方式GET或POST
GET和POST區(qū)別:
1.GET
2.POST
<form action="后端接口" method="POST">
<input type="text">
<input type="password">
</form>
使用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屬性了。
文本框用于輸入單行文本使用,下面是常用屬性與示例。
屬性 說(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
<form action="后端接口" method="POST">
<label for="username">用戶名</label>
<input type="text" name="username" id="username" placeholder="請(qǐng)輸入用戶名" maxlength="5" size="50" required>
</form>
當(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>
通過(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 自定義按鈕
隱藏表單用于提交后臺(tái)數(shù)據(jù),但在前臺(tái)內(nèi)容不顯示所以在其上做用樣式定義也沒(méi)有意義.
<input type="hidden" name="id" value="1">
創(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>
通過(guò)為表單設(shè)置disabled或readonly都可以禁止表單,單readonly表單的數(shù)據(jù)可以提交到后端
<input type="text" value="數(shù)據(jù)" readonly>
表單可以通過(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>
文本域指可以輸入多行文本的表單,當(dāng)然更復(fù)雜的情況可以使用編輯器如ueditor , ckeditor等.
屬性 說(shuō)明 cols 列字符數(shù)(一般使用css控制更好) rows 行數(shù)(一般使用css控制更好)
<textarea cols="30" rows="3">請(qǐng)踩踩我......</textarea>
下拉列表項(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>
單選框指只能選擇一個(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>
復(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>
文件上傳有很多方式,可以使用插件或者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>
屬性 說(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="">
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>
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)條
<!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>
<!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>
<!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>
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> 是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í)際的操作。
本文通過(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/
*請(qǐng)認(rèn)真填寫需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。