HTML5+CSS3
HTML
1. 瀏覽器內(nèi)核
- 五大瀏覽器四大內(nèi)核
- 瀏覽器：IE(edge), 火狐， Safari, chrome, Opera
- 內(nèi)核： Trident, Gecko, webkit, chromium/Blink, blink
注1: 提到Chrome瀏覽器，一般人會(huì)認(rèn)為使用的Webkit內(nèi)核(移動(dòng)設(shè)備多)，這種說(shuō)法不完全確。Chrome發(fā)布于2008年，使用的渲染內(nèi)核是Chromium，它是fork自Webkit，但把Webkit梳理得更有條理可讀性更高，效率提升明顯。2013年，由于Webkit2和Chromium在沙箱設(shè)計(jì)上的沖突，谷歌聯(lián)手Opera自研和發(fā)布了Blink引擎，逐步脫離了Webkit的影響。所以，可以這么認(rèn)為：Chromium擴(kuò)展自Webkit止于Webkit2，其后Chrome切換到了Blink引擎。另外，Chrome的JS引擎使用的V8引擎，應(yīng)該算是最著名和優(yōu)秀的開(kāi)源JS引擎，大名鼎鼎的Node.js就是選用V8作為底層架構(gòu)。_
注2: Opera在2013年V12.16之前使用的是Opera Software公司開(kāi)發(fā)的Presto引擎，之后連同谷歌研發(fā)和選擇Blink作為Opera瀏覽器的排版內(nèi)核_
2. web 標(biāo)準(zhǔn)
結(jié)構(gòu)（html）, 表現(xiàn)（css）, 行為（JavaScript）
3. 工具
3.1 vscode
- vscode 插件
- vscode-icons 各種漂亮的圖標(biāo)
- vscode-fileheader 頭部注釋 ctrl+alt+i
- Visual Studio IntelliCode 智能提示
- Regex Previewer 實(shí)時(shí)預(yù)覽正則
- Prettier - Code formatter 格式化代碼ctrl+shift+p
- Path Intellisense 智能路徑
- Path Autocomplete 自動(dòng)感知目錄
- open in browser 啟動(dòng)瀏覽器
- JavaScript (ES6) code snippets ES6智能提示
- HTML Snippets 智能提示HTML標(biāo)簽及含義
- HTML CSS Support 智能提示CSS類(lèi)名及ID
- Highlight Matching Tag 高亮顯示HTML標(biāo)簽
- Guides 代碼參考線(xiàn)
- GitLens — Git supercharged 代碼參考線(xiàn)
- ESLint JS語(yǔ)法糾錯(cuò)
- CSScomb CSS書(shū)寫(xiě)順序 Ctrl + Shift + P
- Color Highlight 直觀的看見(jiàn)css定義的顏色
- Bracket Pair Colorizer 成對(duì)的彩色括號(hào)
- Auto Rename Tag 自動(dòng)修改成對(duì)HTML標(biāo)簽
- Auto Close Tag 自動(dòng)開(kāi)/閉HTML/XML標(biāo)簽
- Vetur Vetur —— 語(yǔ)法高亮、智能感知、Emmet等
包含格式化功能， Alt+Shift+F （格式化全文），Ctrl+K Ctrl+F（格式化選中代碼，兩個(gè)Ctrl需要同時(shí)按著）
3.2 sublime
-
sublime初始安裝
- 以管理員運(yùn)行sublime,按Ctrl+esc調(diào)出sublime text的console
粘貼 import urllib.request,os,hashlib; h = ‘6f4c264a24d933ce70df5dedcf1dcaee’ + ‘ebe013ee18cced0ef93d5f746d80ef60’; pf = ‘Package Control.sublime-package’; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( ‘http://packagecontrol.io/’ + pf.replace(’ ', ‘%20’)).read(); dh = hashlib.sha256(by).hexdigest(); print(‘Error validating download (got %s instead of %s), please try manual install’ % (dh, h)) if dh != h else open(os.path.join( ipp, pf), ‘wb’ ).write(by)
-
命令面板簡(jiǎn)單操作
- 重啟再preferrnces中最下面由各package Control就是安裝成功
- ctrl + shift + p調(diào)出命令窗口， 輸入install package
- 刪除插件remove，選擇Package: Remove package選項(xiàng)回車(chē)
-
激活
- 點(diǎn)擊Help–>Enter License
- 然后就會(huì)溫馨提示升級(jí)注冊(cè)碼，點(diǎn)擊取消
-
插件
- 插件emmet 快速編寫(xiě)html/css
- HTML5 插件
- SublimeCodeIntel代碼提示
-
快捷鍵與設(shè)置
- 分屏 alt + shift + 1,2,3,4,5,8,9(單屏，2豎屏，3豎屏，4豎屏， 2橫屏，3橫屏， 分4屏)
- 取消右邊代碼縮略圖 view - hideMiniMap
- ctrl + enter 下一行插入
- ctrl + shift + enter上一行插入
- shift + ctrl + [ 折疊代碼塊
- shift + ctrl + ] 打開(kāi)代碼塊
- ctrl + k + 0 展開(kāi)所有的代碼塊
- ctrl + alt + ↑↓ 添加多行光標(biāo)，同時(shí)編輯多行
- ctrl + shift + L 選中代碼同時(shí)編輯
- ctrl + f 搜索
- ctrl + g 輸入 :xx(冒號(hào)與所在的行)
-
自定義快捷鍵
ctrl + shift + p 輸入key，選擇preferences: key Bindings,找到快捷鍵的代碼，復(fù)制放到右邊，該快捷鍵就行- ctrl + down 復(fù)制到下一行
- alt + up 向上移動(dòng)代碼
- alt + down 向下移動(dòng)代碼
- ctrl + d 刪除整行
-
問(wèn)題
- There are no packages available for installation
解決:打開(kāi)Sublime Text,然后點(diǎn)擊Preferences->Browse Packages…,進(jìn)入Sublime Text的packages的目錄,然后將文件channel_v3.json(網(wǎng)盤(pán)有)拷貝到目錄文件User旁邊,接著修改Package Control的用戶(hù)配置，點(diǎn)擊Preferences->Package Settings->Package Control->Settings – User，新增或者修改”channels”的配置信息，其路徑為channel_v3.json文件的路徑：
- There are no packages available for installation
4. HTML
4.1 HTML基本結(jié)構(gòu)
<!DOCTYPE HTML><!--這句是聲明,告訴瀏覽器請(qǐng)使用H5標(biāo)準(zhǔn)來(lái)解析這個(gè)網(wǎng)頁(yè)--><!--整個(gè)網(wǎng)頁(yè),相當(dāng)于整個(gè)人一樣,en：英文 zh-CN： 中文--> <HTML lang = "en"><!--網(wǎng)頁(yè)的頭,這里的信息是對(duì)整個(gè)網(wǎng)頁(yè)的說(shuō)明,就像一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)自我介紹--><head><!--網(wǎng)頁(yè)使用的字符集,相當(dāng)于你是哪里人gb2312簡(jiǎn)體中文BIG5繁體中文GBK包含全部的中文，是GB2312的擴(kuò)展，加入對(duì)繁體字的支持，兼容GB2312UTF-8基本包含全世界多有國(guó)家需要用到字符--><meta charset = "UTF-8"><!--網(wǎng)頁(yè)的標(biāo)題,名字--><title>我是標(biāo)題</title></head><!--網(wǎng)頁(yè)的身體,網(wǎng)頁(yè)所有的精華所在,內(nèi)容都是寫(xiě)在這--><body><center>文字內(nèi)容居中</center><button>我是一個(gè)按鈕</button></body> </HTML>- HTML是超文本標(biāo)記語(yǔ)言(Hyper Text Markup Language)用來(lái)描述網(wǎng)頁(yè)的一種語(yǔ)言
- HTML不是編程語(yǔ)言，而是一種標(biāo)記語(yǔ)言
4.2 XHTML
- XHTML是更嚴(yán)格更純凈的HTML代碼
- XHTML指可擴(kuò)展超文本標(biāo)記語(yǔ)言(Extensible HyperText Markup Language)
- XHTML的目標(biāo)是取代HTML
- XHTML與HTML4.01幾乎相同
- XHTML是作為一種XML應(yīng)用被重心定義的HTML
- XHTML是一個(gè)w3c的標(biāo)準(zhǔn)
- XHTML得到所有瀏覽器的支持
4.3 HTML頭部
<head></head>標(biāo)簽包含所有的頭部標(biāo)簽
- head區(qū)域標(biāo)簽
-
<title>
-
網(wǎng)站名(產(chǎn)品名) - 網(wǎng)站介紹
-
小米商城 - 小米9 Pro、小米MIX Alpha、Redmi Note 8，小米電視官方網(wǎng)站
京東(JD.COM)-正品低價(jià)、品質(zhì)保障、配送及時(shí)、輕松購(gòu)物！
-
定義瀏覽器工具欄的標(biāo)題
-
在網(wǎng)頁(yè)添加到收藏夾時(shí),顯示在收藏夾中的標(biāo)題
-
顯示在搜索引擎結(jié)果頁(yè)面標(biāo)題
-
-
<style>
- 定義HTML樣式引用地址
- @import指令: @import url(css1.css); 必須放在其他CSS的前面,鏈接的雙引號(hào)可選
-
<meta>
- 被用于頁(yè)面的描述,關(guān)鍵詞,文檔的作者,最后修改的時(shí)間和其他元素
- 為搜索引擎定義關(guān)鍵字 6-8個(gè)關(guān)鍵字
- <meta name = “keywords” content = “HTML,CSS,XML,XHML,JavaScript/”>
- 為網(wǎng)頁(yè)定義描述內(nèi)容,不超過(guò)120個(gè)漢字
- <meta name = “description” content = “Free Web tutorials on HTML, CSS, XML”>
- 定義網(wǎng)頁(yè)的作者
- <meta name = “author” content = “userName”>
-
<link> 鏈接外部樣式表
- rel(relation) = “icon” 規(guī)定文檔與被鏈接文檔之間的關(guān)系,這個(gè)是圖片關(guān)系,可自定義,一般stylesheet
- alternate stylesheet僅當(dāng)擁護(hù)自己選擇,文檔才會(huì)使用候選樣式表渲染
- 候選樣式表在瀏覽器–>查看–> 頁(yè)面樣式–>就會(huì)有選項(xiàng),我沒(méi)有找到
- title = “Default”,一旦rel的stylesheet的link元素設(shè)置了title就是首選樣式表,它要優(yōu)于候選樣式表,顯示文檔默認(rèn)使用,如果有一組則會(huì)觸發(fā)一個(gè),不設(shè)置標(biāo)題則為永久樣式表
- sizes = "xx * xx"規(guī)定鏈接的尺寸
- href = “… .cn” : 鏈接地址或路徑
- type = “text/css”/“text/JavaScript”: 規(guī)定被鏈接的類(lèi)型
- charset = "utf-8"規(guī)定被鏈接文檔的字符編碼方式(HTML5不支持)
- media,它的值是一個(gè)或多個(gè)多媒體描述符(media descriptor),指明媒體的類(lèi)型和具有的功能,多個(gè)多媒體類(lèi)型與逗號(hào)隔開(kāi)
- <link charset = “utf-8” rel = “stylesheet” type = “text/css” href = “…/CSS/頁(yè)面CSS.css”>
- rel(relation) = “icon” 規(guī)定文檔與被鏈接文檔之間的關(guān)系,這個(gè)是圖片關(guān)系,可自定義,一般stylesheet
-
<script>
- async 規(guī)定異步執(zhí)行腳本（僅適用于外部腳本）
- defer 延遲腳本
- <script type = “text/javascript”>
- <script charset=“utf-8” src=“https://www.baidu.com/” async = “async”></script>
-
<base>
- 為頁(yè)面上所有鏈接規(guī)定默認(rèn)地址或默認(rèn)目標(biāo)(target)
- <base href = “www.baidu.com” target="_blank _self _parent _top">
-
4.4 排版標(biāo)簽
h$(1-6) ,p , hr, br ,div ,space
4.4.1 標(biāo)題標(biāo)簽
h1 - h6文字逐漸變小，但是字體加粗了；一般用于標(biāo)題，h1文字最大，一般用于主標(biāo)題
**注：**01標(biāo)題demo.html里面有示例
4.4.2 段落標(biāo)簽
<p> 內(nèi)容區(qū)域 </p> 文章分段，屬于雙標(biāo)簽
4.4.3 水平線(xiàn)標(biāo)簽
<hr /> 屬于單標(biāo)簽
4.4.4 換行標(biāo)簽
<br /> 屬于單標(biāo)簽
**注意：**換行標(biāo)簽與段落標(biāo)簽的區(qū)別，換行標(biāo)簽，另起一行，上下行間隔小；段落標(biāo)簽，另起一段，上下?lián)Q大一些
4.4.5 div和span標(biāo)簽
div和span詩(shī)沒(méi)有語(yǔ)義的，div屬于塊元素；span屬于行內(nèi)元素（內(nèi)聯(lián)元素）
4.5 HTML格式化
<b></b> <strong></strong> 文字加粗(XHTML推薦strong)
<i></i> <em></em> 文字傾斜（XHTML推薦em）
<s></s> <del></del> 文字加刪除線(xiàn)，不贊成使用s,使用del代替
<u><\u> <ins><\ins> 為名字加下劃線(xiàn)，不贊成使用u，使用樣式ins代替
注意： <b>只是單純的加粗；<strong>除了加粗還有強(qiáng)調(diào)語(yǔ)句
| <b> | 定義粗文本 | <code> | 定義計(jì)算機(jī)代碼 | <abbr> | 定義縮寫(xiě) |
| <big> | 定義粗文本 | <kdb> | 定義鍵盤(pán)碼 | <acronym> | 定義首字母縮寫(xiě) |
| <em> | 定義著重文字 | <samp> | 定義計(jì)算機(jī)代碼樣本 | <address> | 定義地址 |
| <i> | 定義傾斜文字 | <tt> | 定義計(jì)算機(jī)代碼 | <bdo> | 定義文字方向 |
| <small> | 定義小號(hào)文字 | <var> | 定義變量 | <blockquote> | 定義長(zhǎng)的引用 |
| <strong> | 定義加重語(yǔ)句 | <pre> | 定義預(yù)格式文本 | <q> | 定義短的引用 |
| <sub> | 定義下標(biāo)字 | <cite> | 定義引用引證 | ||
| <sup> | 定義上標(biāo)字 | <dfn> | 定義一個(gè)定義項(xiàng)目 | ||
| <ins> | 插入字 | ||||
| <del> | 定義刪除字 |
注：01標(biāo)題demo.html里面有pre的示例與解釋
4.6 標(biāo)簽屬性
<標(biāo)簽名 屬性1 = “屬性值1” 屬性2 = “屬性值2”…>內(nèi)容</標(biāo)簽名>
<p width = "20px" height = "30px" border ="1">I</p>4.7 HTML圖像
語(yǔ)法： <image src = “url” />
| src | URL | 圖片路徑 |
| alt | 文本 | 圖像不能顯示時(shí)替換的文本 |
| title | 文本 | 鼠標(biāo)懸浮圖片顯示的信息 |
| width | 像素(XHTML不支持百分比) | 設(shè)置圖片的寬度 |
| height | 像素(XHTML不支持百分比) | 是指圖片的高度 |
| border | 像素 | 設(shè)置圖片邊框 |
4.8 HTML鏈接
語(yǔ)法：<a href = “跳轉(zhuǎn)目標(biāo)” target = “目標(biāo)窗口彈出的方式”>Link text</a>
- 通過(guò)a標(biāo)簽在HTML中創(chuàng)建鏈接,有兩種方式
- 方式一: 通過(guò)href屬性-創(chuàng)建指向另一個(gè)文檔的鏈接
- targer:窗口彈出方式
- -blank: 新頁(yè)面打開(kāi)
- -self: 在原窗口打開(kāi)(默認(rèn))
- -parent: 父級(jí)窗口打開(kāi),如果,沒(méi)有父級(jí)窗口就和_self一樣
- -top: 將會(huì)清除所有包含子框架,并將文檔整入整個(gè)瀏覽器中
- 方式二: 通過(guò)name屬性-創(chuàng)建文檔內(nèi)的書(shū)簽(跳)
4.8.1 鏈接與target
- <a>
- href屬性: 創(chuàng)建指向另一個(gè)文檔鏈接(#空鏈接)/路徑，
- name: 創(chuàng)建文檔內(nèi)標(biāo)簽
<a href = “url” target = “_blank”>Link text</a>
<a href = "https://www.baidu.com/">百度</a>4.8.2 name || id屬性
name(id)屬性規(guī)定錨: 使用錨我們可以創(chuàng)建直接跳至該命名的錨的鏈接,這樣就無(wú)須滾動(dòng)了,比如商場(chǎng)向下滾動(dòng),會(huì)有個(gè)回到頂部的箭頭
<a name = “tips”>錨(顯示頁(yè)面上的文本)
<a name = “#tips”>回到頂部
注意: 請(qǐng)始終將正斜杠添加到子文件夾。假如這樣書(shū)寫(xiě)鏈接：href=“http://www.w3school.com.cn/html”，就會(huì)向服務(wù)器產(chǎn)生兩次 HTTP 請(qǐng)求。這是因?yàn)榉?wù)器會(huì)添加正斜杠到這個(gè)地址，然后創(chuàng)建一個(gè)新的請(qǐng)求，就像這樣：href=“http://www.w3school.com.cn/html/”
4.9 注釋
<!--Header--> 內(nèi)容區(qū) <!--End Header-->4.10 路徑
路徑分為相對(duì)路徑和絕對(duì)路徑
相對(duì)路徑: 相對(duì)當(dāng)前的文件的路徑， …/上一級(jí)
絕對(duì)路徑：從盤(pán)符開(kāi)始詳細(xì)的指定文件
4.11 HTML表格
| <table> | 定義表格 |
| <tr> | 定義表格行 |
| <th> | 定義表格表頭,內(nèi)容居中加粗 |
| <td> | 定義表格單元 |
| <caption> | 定義表格標(biāo)題，在表格上面內(nèi)容相對(duì)于居中 |
| <colgroup> | 定義表格列的組 |
| <col> | 用于表格的屬性 |
| <thead> | 定義表格的頁(yè)眉 |
| <tbody> | 定義表格的主體 |
| <tfoot> | 定義表格的頁(yè)腳,一般總結(jié) |
- <colgroup span = “6” width = “100px”>
- <colgroup span = “1” width = “200px”>
- <col width = “100px”>
- <col width = “100px”>
- <col width = “100px”>
- <col width = “100px”>
- <col width = “100px”>
- <col width = “100px”>
- <col width = “200px”>
- 屬性:
- width = “100px”
- border = “1px”
- cellspacing = “0”
- cellpadding = “0”
- align = “l(fā)eft/center/right”
- colspan = “7”
- rowspan = “4”
- border-collapse: collapse; 在table里面設(shè)置這個(gè)合并單元格
<span style="color = “red;”>注： 02表格demo01/02/03有表格示例
4.12 HTML列表
4.12.1 無(wú)序列表
標(biāo)簽: <ul> <li>
屬性:type=“dicel(實(shí)心圓) || circle(空心圓) || square(方塊)”
注意:ul嵌套最外層默認(rèn)是實(shí)心圓,然后嵌套是空心圓,然后一直是實(shí)心方塊,ol嵌套不受影響
示例：03無(wú)序列表demo01.html
4.12.2 有序列表
標(biāo)簽 <ol> <li>
屬性reversed: 倒序
屬性strat = “value”: 從value開(kāi)始
屬性type = “value”: 順序類(lèi)型
示例：04有序列表demo01.html
4.12.3 自定義列表
標(biāo)簽 <dl> <dt> <dd>
示例：05自定義列表demo01.html
注意:去掉列表前面的符號(hào),可以使用CSS屬性(list-style : none)
4.13 HTML表單
<form method = “post(表單提交數(shù)據(jù)) || get(表單獲取數(shù)據(jù))”>
action屬性: 提交表單時(shí)執(zhí)行的動(dòng)作,通常會(huì)提交到web服務(wù)器的網(wǎng)頁(yè)
method屬性: 規(guī)定在提交表單時(shí)所用的 HTTP 方法,(get,post)
name屬性: 如果要正確地被提交，每個(gè)輸入字段必須設(shè)置一個(gè) name 屬性
- get與post區(qū)別:
- get請(qǐng)求通常表示獲取數(shù)據(jù)
- post請(qǐng)求通常表示提交數(shù)據(jù)
- get請(qǐng)求發(fā)送的數(shù)據(jù)都寫(xiě)在地址欄上,用戶(hù)可見(jiàn)
- post請(qǐng)求發(fā)送的數(shù)據(jù)用戶(hù)不可見(jiàn)注
- get請(qǐng)求不能提交大量數(shù)據(jù),但是post可以,因此不要混用
注: post請(qǐng)求在隱藏起來(lái)了,上方鏈接欄沒(méi)有,需要F12(右擊檢查)–>netWork–>Name–>第一個(gè)www.baidu.com點(diǎn)擊–>Headers–>最下面的Form Date就顯示了提交的信息
- <form>
- <input> 輸入,單標(biāo)簽
- type 屬性
- "text"文本輸入框
- "password"密碼輸入框
- “button” 按鈕
- “submit” 提交按鈕
- “reset” 重置按鈕
- "“file” 文件框
- "radio"單選框
- “checkbox” 復(fù)選框
- “image” 圖像形式的按鈕組，必須有src
- “email” 限制用戶(hù)輸入必須為Email類(lèi)型(H5)
- “url” 限制用戶(hù)輸入必須為url類(lèi)型(H5)
- "date"限制用戶(hù)輸入必須為time類(lèi)型(H5)
- "month"限制用戶(hù)輸入必須為月類(lèi)型(H5)
- "week"限制用戶(hù)輸入必須為周類(lèi)型(H5)
- "number"限制用戶(hù)輸入必須為數(shù)字類(lèi)型(H5)
- “tel” 限制用戶(hù)輸入必須為手機(jī)號(hào)碼類(lèi)型(H5)
- “search” 搜索框(H5)
- "color"生成顏色表單(H5)
- name 屬性(自定義名稱(chēng))，用于區(qū)分表單，后臺(tái)使用
- value 在按鈕上顯示文字或者輸入框的內(nèi)容
- checked 默認(rèn)選擇，單選按鈕和復(fù)選按鈕有
- size input默認(rèn)在頁(yè)面中顯示的長(zhǎng)度
- maxlength允許控件輸入最多的字符
- required: required; 表單的屬性不能為空,必填(H5)
- enctype: multipart/form-data; 將表單數(shù)據(jù)編寫(xiě)成二進(jìn)制形式,用戶(hù)上傳圖片之類(lèi)
- placeholder: 提示文本(占位符); 表單的提示信息,存在默認(rèn)值將不顯示(H5)
- autofocus: autofocus; 自動(dòng)聚焦屬性,頁(yè)面加載完成自動(dòng)聚焦到表單(H5)
- autocomplete當(dāng)用戶(hù)在字段開(kāi)始鍵入時(shí),瀏覽器基于之前鍵入過(guò)的值,應(yīng)該顯示出在字段中填寫(xiě)的選項(xiàng),需要在表單內(nèi)同時(shí)加上name屬性,同時(shí)提交成功(H5)
- off
- on(默認(rèn)打開(kāi))
- multiple: multiple可以多選文件提交(H5)
- type 屬性
- <label>: 點(diǎn)擊文本就會(huì)觸發(fā)表單,比input改進(jìn)
- for
- id
- <fieldset>: 包含一組相關(guān)的表單元素,并使用邊框包起來(lái)
- <textarea>: 文本域
- cols: 寬度2
- rows: 高度 1
- resize:none; 不可拖動(dòng)
- <legend>: 定義一個(gè)<fieldset>標(biāo)題
- <select>: 定義下拉列表
-
<optgroup>: 定義下拉列表標(biāo)題(不可選)
- label: 禁用這一組不可選<optgroup label = “”>
-
<option>:定義下拉列表標(biāo)題的子元素(可選)
-
selected: 打開(kāi)默認(rèn)顯示這一個(gè)子元素,一般顯示第一個(gè)
-
disabled: 不可選
-
-
- <input> 輸入,單標(biāo)簽
**實(shí)例:**06表單demo01
4.14 HTML框架
4.14.1 結(jié)構(gòu)框架
- <frameset>框架結(jié)構(gòu)標(biāo)簽
- <frame>框架標(biāo)簽
- <noframes>不支持框架的瀏覽器
可以拖動(dòng)邊框來(lái)改變大小。避免這種情況發(fā)生，可以在 <frame> 標(biāo)簽中加入：noresize=“noresize”。
不能將 <body> 標(biāo)簽與 <frameset> 標(biāo)簽同時(shí)使用！不過(guò)，假如你添加包含一段文本的 <noframes>標(biāo)簽，就必須將這段文字嵌套于 <body> 標(biāo)簽內(nèi)
注意:07結(jié)構(gòu)框架demo01
4.14.2 內(nèi)聯(lián)框架
- <iframe>用于在網(wǎng)頁(yè)內(nèi)顯示網(wǎng)頁(yè)
- width: 寬度
- height: 高度
- frameborder =“0”;設(shè)置框架邊框?yàn)?
- name與target 內(nèi)聯(lián)跳轉(zhuǎn)鏈接
- iframe可用作鏈接目標(biāo)
- 鏈接的target屬性必須引用iframe的name屬性
- 語(yǔ)法: <iframe src = “URL” frameborder=“0” width=“200” height=“200”></iframe>
注意:08內(nèi)聯(lián)框架demo01,里面有一點(diǎn)注意事項(xiàng),建議看一下
5. CSS
5.1 CSS概念
CSS(Cascading Style Sheet):通常稱(chēng)為CSS樣式表"層疊樣式表"或"級(jí)聯(lián)樣式表",是一組格式設(shè)置規(guī)則,核心優(yōu)勢(shì)是可以為文檔中某種類(lèi)型的元素全部應(yīng)用相同的規(guī)則
5.2 CSS書(shū)寫(xiě)位置
- 外部樣式
- <link rel=“stylesheet” type=“text/css” href=“mystyle.css” />
- style type=“text/css”> @import url(mystyle.css);</style>
- 注意@import外接樣式必須第一行
- 內(nèi)部樣式(內(nèi)嵌樣式表)
- <style type=“text/css”></style>
- HTML5中type="text/css"可以省略
- style標(biāo)簽可以放在任何一個(gè)地方,建議放在head里面,title之下
- <style type=“text/css”></style>
- 行內(nèi)樣式
- <p style=“color: sienna; margin-left: 20px”></p>
5.3 CSS選擇器
- CSS選擇器
- * 通用選擇器: 會(huì)匹配頁(yè)面所有的元素,降低頁(yè)面的響應(yīng)速度,不建議隨便使用
- div 標(biāo)簽選擇器(派生選擇器)
- # id選擇器
- . 類(lèi)選擇器,可以多寫(xiě)
- [] 屬性選擇器(CSS2)
- E[att] 屬性選擇器 --> E標(biāo)簽(元素), att 標(biāo)簽行內(nèi)塊里面的的屬性
- E[att = “val”] 選擇器具有att屬性且屬性值等于val的E元素
- E[att |= “val”] 選擇元素有att屬性,值以val或val-開(kāi)頭的元素
- E[att ~= “val”] 選擇元素有att屬性,其中以空格分隔val,例:att=“one val"或者"val one”
- E[att ^= “val”] 匹配具有att屬性,且值以val開(kāi)頭的E元素
- E[att $= “val”] 匹配具有att屬性,且值以val結(jié)尾的E元素
- E[att *= “val”] 匹配具有att屬性,且值中含有val的E元素
- E[att $= “val” i] 匹配元素不區(qū)分大小寫(xiě),在結(jié)束方括號(hào)前加i個(gè)
注意: 類(lèi)選擇器名是可以重復(fù)的,ID選擇器的名字不能重復(fù)
- CSS 優(yōu)先級(jí)與權(quán)重值,最高權(quán)重,在屬性值的后面添加!important
- 行內(nèi)樣式(1000) > ID選擇器(100) > 類(lèi)選擇器(10) = 屬性選擇器(10) = 偽類(lèi)選擇器(10) > 偽元素 = 標(biāo)簽選擇器(1) > 通用選擇器(0)
- 選擇器選擇的范圍越小越精確,優(yōu)先級(jí)越高
**實(shí)例:**09基本選擇器demo01.html
5.4 選擇符
- 后代選擇符: 父類(lèi) 子類(lèi){};
- 例: h1 em{} --> h1標(biāo)簽下的所有em標(biāo)簽,沒(méi)有距離可言,對(duì)孫子元素及以下都起作用
- 子元素選擇符: 父類(lèi)>子類(lèi){};
- 例: h1>em{} --> h1標(biāo)簽第一層級(jí)子元素em的所有標(biāo)簽,對(duì)孫子及以下不起作用
- 兄弟選擇符:ul + ol {}; 同一級(jí)必須相鄰元素,生效的是后面的弟弟元素ol
- 相同標(biāo)簽第一個(gè)不會(huì)生效,后面全生效
- 同胞連接符: h1 ~ h2{ } h1后面的所有h2元素全生效,只限于同級(jí)
5.5 偽類(lèi)選擇符
- : root 選擇根元素
- html文檔中所有元素的根元素的html元素
- : empty 空選擇標(biāo)簽
- 沒(méi)有任何子代標(biāo)簽,文本節(jié)點(diǎn),空格,換行符,里面可以是注釋,對(duì)img,input,textarea也生效
- : only-child 唯一子代標(biāo)簽(可以是后代),選擇的那個(gè)后代元素必須是父類(lèi)獨(dú)生子
- p span:only-child{} -->p標(biāo)簽里面的只能有一個(gè)span標(biāo)簽,其他標(biāo)簽都不行,span必須我是獨(dú)生子
- only-of-type 表示父元素有很多子元素,而且在子元素里面其中有一個(gè)是唯一的
- : first-child 選擇父元素(同胞)中第一個(gè)子元素,不可以指定類(lèi)型
- : last-child 選擇父元素(同胞)中最后一個(gè)子元素,不可以指定類(lèi)型
- :first-child:last-child{} === only-child{}
- : first-of-type 選擇父元素中第一個(gè)相同的子元素,可以指定類(lèi)型
- 例 span: first-of-type 指定父(同胞)元素下的第一個(gè)span元素
- :last-of-type 選擇父元素中最后一個(gè)相同的子元素,可以指定類(lèi)型
- :first-of-type:last-of-type{} === :only-of-type{}
- :nth-child(n可以使數(shù)字,公式,關(guān)鍵字:even(偶數(shù)) odd(奇數(shù)))
- :first-child == :nth-child(1)
- : nth-last-child(n) 從一組同胞元素的最后一個(gè)開(kāi)始往前算
- :nth-child(1):nth-last-child(1) === :only-child
- :nth-of-type() 從前開(kāi)始選擇同胞元素
- :nth-last-of-type() 從后向前的同胞元素中選擇
- :nth-of-type(1):nth-last-of-type(1) === :only-of-type
5.5 動(dòng)態(tài)偽類(lèi)
超鏈接偽類(lèi)
- :link 未訪(fǎng)問(wèn)鏈接,和所有的超鏈接
- :visited 已訪(fǎng)問(wèn)的超鏈接
用戶(hù)操作偽類(lèi)
- : focus 獲取當(dāng)前輸入焦點(diǎn)元素,如表單元素,可編輯內(nèi)容的元素
- : hover 當(dāng)鼠標(biāo)指針懸浮在元素上
- : active 當(dāng)用戶(hù)輸入激活的元素,按下的時(shí)刻
順序: link --> visited --> focus --> hover --> active
5.6 UI狀態(tài)偽類(lèi)
-
:enabled 啟用的用戶(hù)界面元素(表單元素),接收輸入元素
-
:disabled 禁用用戶(hù)界面元素,不接受輸入元素
-
:checked 用戶(hù)或文檔默認(rèn)選中的單選按鈕或復(fù)選框
-
:indeterminate 沒(méi)有選中的單選框或者復(fù)選框,這個(gè)狀態(tài)只能由DOM腳本設(shè)定,不能用戶(hù)設(shè)定
-
:default 默認(rèn)選中單選按鈕,復(fù)選框或選項(xiàng)
-
:valid 滿(mǎn)足所有數(shù)據(jù)的有效性語(yǔ)義的輸入框
-
:invalid 不滿(mǎn)足所有數(shù)據(jù)有效性語(yǔ)義的輸入框
-
:in-range 輸入的值在最小值與最大值之間的輸入框
-
:out-of-range 輸入的值小于空間允許的最小值或大于空間允許的最大值的輸入框
-
:required 必須輸入值的輸入框
-
:optional 可選輸入值的輸入框
-
:read-write 用戶(hù)編輯輸入框
-
:read-only 不能由用戶(hù)編輯的輸入框
5.7:target偽類(lèi)
URL中有個(gè)片段標(biāo)識(shí)偽類(lèi),它所指向的是文檔片段稱(chēng)為目標(biāo)(target).URL片段標(biāo)識(shí)符指向的目標(biāo)元素可以使用:target偽類(lèi)裝飾
片段標(biāo)識(shí)符: https://www.baidu.com/#target-pseudo
這個(gè)url中的target-pseudo部分就是片段標(biāo)識(shí)符,由#符號(hào)標(biāo)記
借助這個(gè)元素可以可以顯示文檔中任何目標(biāo)元素或者為不同的目標(biāo)元素定義不同的樣式; 例如: a:target{color: red},對(duì)id = "target-pseudo"也會(huì)生效
偽類(lèi)定義的樣式在兩種請(qǐng)款下不會(huì)應(yīng)用
- 頁(yè)面的URL中沒(méi)有片段標(biāo)識(shí)符
- 頁(yè)面的URL中有片段標(biāo)識(shí)符,但是文檔中沒(méi)有相匹配的元素
5.8 :lang偽類(lèi)
使文本選擇語(yǔ)言選擇符,可以使用:lang()偽類(lèi),在匹配方式上,:lang()與偽類(lèi)與 |= 屬性選擇符類(lèi)似;偽類(lèi)選擇符與屬性選擇符之間的主要區(qū)別是語(yǔ)言信息有多個(gè)來(lái)源,有時(shí)可能來(lái)自元素本身之外.對(duì)屬性選擇符而言元素自身必須有l(wèi)ang屬性才能匹配,而:lang偽類(lèi)能匹配設(shè)定語(yǔ)言的元素后代
在HTMl中語(yǔ)言可以通過(guò)lang屬性判斷,也可以通過(guò)meta元素和協(xié)議(HTTP)判斷.XML使用xml:lang屬性,還有可能有文檔語(yǔ)言專(zhuān)用方法
:lang偽類(lèi)可以使用各種信息,而 |= 屬性選擇符只能用于標(biāo)記中有l(wèi)ang屬性元素,因此偽類(lèi)比屬性選擇符更可靠
*:lang(fr){font-style: italic; } *[lang |= "fr"]{font-style: italic; }5.9 否定偽類(lèi)
:not(選擇符),否定可以連寫(xiě)
*.link:not(li):not(p){/*class屬性包含link這個(gè)詞,但不是li或p的所有元素*/ }5.10 偽元素選擇符
在文檔中插入虛構(gòu)的元素,偽類(lèi) ’ : ’ ;偽元素’ :: ’
::first-letter和::first-line只能用于塊級(jí)元素上
1. 裝飾首字母
::first-letter{ color: red;}
常用于首字母大寫(xiě),或者首字母下沉
第一種: <!--每個(gè)p元素的首字母比其余內(nèi)容大兩倍,不過(guò)最好應(yīng)用第一段 --> p:first-of-type::first-letter{font-size: 200%;}第二種: <!--::first-letter樣式之應(yīng)用于元素的內(nèi)容里,<p-first-letter>元素不會(huì)出現(xiàn)在文檔的源代碼里面,也不會(huì)出現(xiàn)在DOM中,而是由用戶(hù)動(dòng)態(tài)構(gòu)建,目的是把::frist-letter樣式應(yīng)用到文本中--> <p><p-first-letter>T</p-first-letter>his is a p element, with a styled first <p>2. 裝飾首行
::first-line
常用于裝飾首行文本
第一種: <!--這個(gè)樣式應(yīng)用到每個(gè)p的第一行文本--> p::first-line {color: red; } 第二種: <!----> <p><p-first-line>T</p-first-line>his is a p element, with a styled first <p>3. 創(chuàng)建前置和后置內(nèi)容元素
前置 ::before
后置 ::after
/*在h2元素前面添加HELLO并且為紅色*/ h2::before{content: "HELLO"color: red; }- before與after必須有content屬性,會(huì)創(chuàng)建一個(gè)元素,屬于行內(nèi)元素
- 作用在字體圖標(biāo)可以content: '\ea50’和’口’都可以,一般ea50
- 可以用于清除浮動(dòng)
5.11 CSS背景
background: url() no-repeat 5px center;/后面兩個(gè)元素是背景定位/
-
background 背景
- color: #234; 背景顏色
- image: url(https://www.baidu.com/image/); 背景圖片
- image:url(file:///C:/Users/a4244/Desktop/MD/59.png);背景圖
- repeat:背景圖片重復(fù)
- repeat-x(水平)
- repeat-y(縱向)
- no-repeat(不平鋪);
- position: 背景定位
- center
- top
- bottom
- right
- left
- 50% 50%
- 50px 50px
- attachment: 固定的背景圖像
- scroll(默認(rèn)值,隨內(nèi)容一起滾)
- fix(頁(yè)面滾背景不滾)
- inherit(繼承父元素)
- rgba(255,255,255, .5) (背景半透明)
科普:背景圖片與插入圖片的區(qū)別
1.插入突變用的最多,比如產(chǎn)品展示,移動(dòng)位置只能靠盒子模型padding margin
2.背景圖片我們一半用于小圖標(biāo)背景或者超大背景圖片,背景圖片只能通過(guò)background-position
5.12 CSS字體
font: italic bold 10px/35px arial, sans-serif,“微軟雅黑”(斜體字 加粗 字體大小/行高 默認(rèn)字體,備用字體,“微軟雅黑”); font-size;font-family屬性必須寫(xiě),其他可選
- font 字體
-
family 定義字體系列
- arial,sans-serif,“宋體”,“微軟雅黑”(如果沒(méi)有就會(huì)一直向后找,如果都沒(méi)有就會(huì)默認(rèn))
-
style 字體風(fēng)格
- normal(標(biāo)準(zhǔn))
- italic(斜體)
- oblique(傾斜)
- none(關(guān)閉所有風(fēng)格)
-
variant 字體變形
- normal(默認(rèn)值,瀏覽器會(huì)顯示一個(gè)標(biāo)準(zhǔn)字體)
- small-caps(瀏覽器會(huì)顯示小型大寫(xiě)字母的字體)
- inherit(繼承父類(lèi))
-
weight 文本加粗
- normal(默認(rèn)值,定義標(biāo)準(zhǔn)字符)
- bold (定義粗體)
- bolder (定義更粗的字符)
- lighter (定義更細(xì)的字符)
- 100-900,400默認(rèn)值,700(bold)
-
size 字體大小,默認(rèn)16px,瀏覽器各不相同,最好自定義
- xx-small,x-small,small,medium(默認(rèn)),large,x-large,xx-large(字體尺寸從小到大)
- smaller (比父元素更小)
- larger (比父元素更大)
- length(一個(gè)固定的值或者百分比)
- inherit (繼承父類(lèi))
-
font-kerning字距
- auto 用戶(hù)自動(dòng)調(diào)整
- normal 正常
- none 忽略
-
@font-face 自定義字體
惰性加載字體,指定文本渲染時(shí)才會(huì)加載
把下載字體包,解壓,把里面的font文件夾放到網(wǎng)頁(yè)文件夾的fonts里面
<style>@font-face {/*聲明字體引用字體*/font-family: "icomoon"; /*icomoon官網(wǎng)的名字,可自定義*/src: url('fonts/icomoon.eot?7kkyc2');src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),url('fonts/icomoon.ttf?7kkyc2') format('truetype'),url('fonts/icomoon.woff?7kkyc2') format('woff'),url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');font-weight: normal;font-style: normal;/*傾斜字體變正常*/}span {font-family: "icomoon";}/*或者*/span::after{content: '口';font-family: "icomoon";}/*或者*/span::after{content: '\ea50';/*右邊小口左邊的字碼*/font-family: "icomoon";} </style> <body><!--打開(kāi)下載字體文件夾中的demo.html,選中需要的,點(diǎn)擊下面的右下角的小口,點(diǎn)擊復(fù)制粘貼到span,就可以啦--><span>口</span> </body>追加字體圖標(biāo),在網(wǎng)站上點(diǎn)擊import icons(導(dǎo)入icons),選中下載的文件夾中的下來(lái)的selection.jsonselection.json就可以
-
CSSUnicode字體
在CSS中設(shè)置字體名稱(chēng),直接寫(xiě)中文是可以的,但是在文件編碼(GB2312,UTF-8等)不匹配時(shí)會(huì)產(chǎn)生亂碼的錯(cuò)誤,XP系統(tǒng)不支持類(lèi)似的字體中文
解決:
方案一:用英文代替, 比如: font-family: “Microsoft Yahei”
方案二: 在CSS中直接使用Unicode編碼來(lái)寫(xiě)字體名稱(chēng)可以避免這些錯(cuò)誤,使用Unicode寫(xiě)中文字體名稱(chēng),瀏覽器會(huì)正確的解析
-
| 宋體 | SimSun | \5B8B\4F53 |
| 新宋體 | NSimSun | \65B0\5B8B\4F53 |
| 黑體 | SimHei | \9ED1\4F53 |
| 微軟雅黑 | Microsoft YaHei | \5FAE\8F6F\96C5\9ED1 |
| 楷體_GB2312 | KaiTi_GB2312 | \6977\4f53_GB2312 |
| 隸書(shū) | LiSu | \96B6\4e66 |
| 幼圓 | YouYuan | \5E7C\5706 |
| 華文細(xì)黑 | STXihei | \534E\6587\7EC6\9ED1 |
| 細(xì)明體 | MingLiU | \7EC6\660E\4F53 |
| 新細(xì)明體 | PMingLiU | \65B0\7EC6\660E\4F53 |
| <em></em> | 傾斜 | 添加傾斜 | font-style: italic |
| <i></i> | 取消傾斜 | font-style: normal | |
| <strong></strong> | 加粗 | 添加加粗 | font-weigth: 700(bold) |
| <b></b> | 取消加粗 | font-weigth: 400(normal) | |
| <u></u> | 下劃線(xiàn) | 添加下劃線(xiàn) | text-decoration: underline |
| <ins></ins> | 刪除下劃線(xiàn) | text-decoration: none | |
| <s></s> | 刪除線(xiàn) | 添加刪除線(xiàn) | text-decoration : line-through |
| <i></i> | 取消刪除線(xiàn) | text-decoration : none |
5.13 CSS文本
- text 文本
- indent: 5em(可以負(fù)值,百分比,像素值); 首行縮進(jìn)
- 1px = 16em,一個(gè)em就是一個(gè)字的距離
- align: 文本對(duì)齊
- left(左對(duì)齊)
- right(右對(duì)齊)
- center(居中對(duì)齊)
- justify(兩端對(duì)齊)
- inherit(看父元素)
- spacing: 字符間距
- normal (默認(rèn)值,和0一樣)
- length(可正可負(fù))
- inherit (看父元素)
- transform 處理文本大小寫(xiě)
- none(默認(rèn))
- uppercase(全轉(zhuǎn)為大寫(xiě))
- lowercase(全轉(zhuǎn)為小寫(xiě))
- capitalize(首字母大寫(xiě))
- decoration 文本裝飾,可以多個(gè)屬性值一起寫(xiě)
- none(關(guān)閉所有裝飾)
- underline(文本加下劃線(xiàn))
- overline(文本頂端加下劃線(xiàn))
- line-through(文本中間畫(huà)貫穿線(xiàn))
- blink (文本閃爍)
- indent: 5em(可以負(fù)值,百分比,像素值); 首行縮進(jìn)
- direction: 文本方向
- ltr (默認(rèn).文本方向從左到右)
- rtl (文本方向從右到左)
- inherit (繼承父類(lèi))
- white-space(處理空白字符)
- pre-line(合并空白符,保留換行符,允許自動(dòng)換行)
- normal (合并空白符,忽略換行符,允許自動(dòng)換行)
- nowrap (合并空白符,忽略換行符,不允許自動(dòng)換行)
- pre (保留空白符,保留換行符,不允許自動(dòng)換行)
- pre-wrap(保留空白符,保留換行符,允許自動(dòng)換行)
- a 鏈接狀態(tài)(按照這個(gè)順序不能換)
- a:link {color:#FF0000;} (未被訪(fǎng)問(wèn)的鏈接)
- a:visited {color:#00FF00;}(已被訪(fǎng)問(wèn)的鏈接)
- a:hover {color:#FF00FF;} (鼠標(biāo)指針移動(dòng)到鏈接上)
- a:active {color:#0000FF;} (正在被點(diǎn)擊的鏈接)
- line-height (行高,行間距)
- color (文本顏色)
5.14 CSS盒子模型
- 盒子邊距
- margin: (top,right,bottom,left)盒子的外邊距,會(huì)重疊合并(盒子塌陷)
- padding: (top,right,bottom,left)盒子邊框內(nèi)邊距,會(huì)撐開(kāi)盒子(子盒子沒(méi)有寬度,不會(huì)撐開(kāi))
- 盒子邊框
- border-style:(border-top/right/bottom/left-style)邊框樣式
- none(無(wú)邊框)
- hidden(與 “none” 相同。不過(guò)應(yīng)用于表時(shí)除外，對(duì)于表，hidden 用于解決邊框沖突)
- dotted(點(diǎn)狀邊框,很細(xì),密密麻麻的點(diǎn),有的瀏覽器直接實(shí)現(xiàn)實(shí)現(xiàn))
- dashed(定義虛線(xiàn),有的瀏覽器也會(huì)顯示實(shí)線(xiàn))
- solid(實(shí)現(xiàn))
- double(雙線(xiàn))
- groove(定義 3D 凹槽邊框。其效果取決于 border-color 的值)
- ridge(定義 3D 壟狀邊框。其效果取決于 border-color 的值)
- inset(定義 3D inset 邊框。其效果取決于 border-color 的值。)
- outset(定義 3D outset 邊框。其效果取決于 border-color 的值)
- dotted solid double dashed(上 右 下 左)
- dotted solid double(上 左右 下)
- dotted solid(上下 左右)
- dotted(上下左右)
- border-width: (border-top/right/bottom/left-width)邊框?qū)挾?
- thin(細(xì)邊框)
- medium(默認(rèn)中等邊框)
- thick(定義粗邊框)
- length(自定義邊框?qū)挾?
- inherit(繼承父類(lèi))
- border-color: (border-top/right/bottom/left-color)邊框顏色
- transparent(默認(rèn)值,邊框透明)
- inherit(繼承父類(lèi))
- border-radius: 50%(圓) || 1px (圓角邊框)(CSS3)
- 圓角矩形,按照下面的順序?qū)?border-radius: 左上 右上 右下 左下;
- border-top-left-radius 左上角圓弧
- border-top-right-radius右上角圓弧
- border-bottom-right-radius 右下角圓弧
- border-bottom-left-radius 左下角圓弧
- border-collapse
- collapse: 表格邊框合并是1+1=2,變粗,然后使用這方法相鄰邊框合并在一起
- separate: 表格邊框合并是1+1=2
- inherit
- box-shadow盒子陰影(按照這順序可以連寫(xiě))(CSS3)
- h-shadow(必須,水平x軸陰影位置,允許負(fù)值)
- v-shadow(必須,垂直y軸陰影的位置,允許負(fù)值)
- blur(可選,模糊陰影,數(shù)值越大越模糊)
- spread(可選,陰影大小)
- color(可選,陰影的顏色)
- inset(默認(rèn)外部陰影,修改為內(nèi)部陰影;注意外部陰影不能寫(xiě))
- border-style:(border-top/right/bottom/left-style)邊框樣式
box-shadow:0 2px 4px rgba(0,0,0,.2);
科普1:盒子居中
盒子水平居中要滿(mǎn)足兩個(gè)條件1.必須指定寬度;2.然后給左右兩個(gè)外布局設(shè)置為auto
寫(xiě)法一: margin-left: auto; margin-right: auto;
寫(xiě)法二: margin: auto;因?yàn)樯舷耡uto是沒(méi)有用的
寫(xiě)法三: margin: 0 auto;
科普2:邊距
行內(nèi)元素上下外邊距設(shè)置沒(méi)用,低版本IE設(shè)置內(nèi)邊距也沒(méi)用,為了兼容性盡量寫(xiě)左右內(nèi)外邊距,不要寫(xiě)上下
5.15 盒子塌陷解決辦法
- overflow: 內(nèi)容溢出元素框時(shí),發(fā)生的事情
- visible(默認(rèn)值。內(nèi)容不會(huì)被修剪，會(huì)呈現(xiàn)在元素框之外)
- hidden (內(nèi)容會(huì)被修剪，并且其余內(nèi)容是不可見(jiàn)的)
- scroll (一直顯示滾動(dòng)條，超出部分滾動(dòng)可見(jiàn))
- auto (當(dāng)超出元素框后，顯示滾動(dòng)條，超出部分滾動(dòng)可見(jiàn))
- inherit(規(guī)定應(yīng)該從父元素繼承 overflow 屬性的值。)
5.16 標(biāo)簽顯示模式(display)
-
塊級(jí)元素 (block-level)
- 特點(diǎn): 寬度默認(rèn)獨(dú)占一行(100%)
- div,p,h1-h6,ul,li,ol,form,table等
-
行內(nèi)元素 (inline-level)
- 特點(diǎn): 寬高無(wú)效,默認(rèn)內(nèi)容的寬高,所有內(nèi)容排在一排
- a,strong,b,em,i,del,s
-
行內(nèi)塊 (lnline-block)
- 行內(nèi)元素只能放行內(nèi)元素,(float,絕對(duì)定位,固定定位都會(huì)把標(biāo)簽轉(zhuǎn)為行內(nèi)塊)
- 既能設(shè)置寬高大小,又能排在一排顯示
- img,input,td
-
模式轉(zhuǎn)換
- 塊轉(zhuǎn)行內(nèi): display:inline
- 行內(nèi)轉(zhuǎn)塊: display: block
- 塊與行內(nèi) 轉(zhuǎn)成行內(nèi)塊: display: inline-block
5.17 盒子布局的三種機(jī)制
網(wǎng)頁(yè)布局的核心-就是用css布局
css提供三種機(jī)制來(lái)設(shè)置盒子的擺放,分別是普通流(標(biāo)準(zhǔn)流),浮動(dòng)和定位
-
普通流(標(biāo)準(zhǔn)流);
-
塊級(jí)元素會(huì)獨(dú)占一行,從上向下順序排列
- 常用元素: div, hr, p, h1-h6, ul , ol ,dl ,form, table
-
行內(nèi)元素會(huì)按照順序,從左到右順序排列.碰到父元素就會(huì)換行
- 常用元素: span, a, i, em等
-
-
浮動(dòng)
- 讓盒子從普通流中浮起來(lái),主要作用是讓多個(gè)盒子一行顯示
-
定位
- 將盒子定在瀏覽器的某一個(gè)位置–css離不開(kāi)定位,特別是后面的js特效
5.18 浮動(dòng)
float: left(左浮動(dòng)123) || left(右浮動(dòng)321)||none無(wú)浮動(dòng)
- 浮動(dòng)元素重疊問(wèn)題
- 浮動(dòng)不會(huì)覆蓋文字內(nèi)容
- 浮動(dòng)不會(huì)覆蓋圖片內(nèi)容
- 浮動(dòng)不會(huì)覆蓋表單內(nèi)容
- 任何元素都可以浮動(dòng),無(wú)論它本身是什么元素.浮動(dòng)起來(lái)就是塊級(jí)框(和行內(nèi)塊相似)
- 浮動(dòng)只會(huì)影響當(dāng)前或者后面的標(biāo)準(zhǔn)流盒子,不會(huì)影響到前面的標(biāo)準(zhǔn)流
5.19 清除浮動(dòng)
? 很多情況下,父盒子不方便給高度,但是子盒子浮動(dòng)就不占位置,最后父級(jí)盒子高度為0,就會(huì)影響到下面的盒子
? 清除浮動(dòng)主要是為了解決父級(jí)元素因?yàn)樽蛹?jí)浮動(dòng)引起內(nèi)部高度為0的問(wèn)題,清除浮動(dòng)后,父級(jí)就會(huì)根據(jù)浮動(dòng)的子盒子自動(dòng)檢測(cè)高度,父級(jí)就有了高度,就不會(huì)影響下面的標(biāo)準(zhǔn)流了
語(yǔ)法: 選擇器 { clear: left/ right/ both}/清除左側(cè) /右側(cè) / 左右兩側(cè)的浮動(dòng)/
- 清除浮動(dòng)有四種方法
方法一:額外標(biāo)簽法
w3c推薦的做法: 通過(guò)浮動(dòng)元素,末尾添加一個(gè)空標(biāo)簽,例如<div style = “clear:both”></div>
優(yōu)點(diǎn): 通俗易懂,書(shū)寫(xiě)方便
缺點(diǎn): 添加許多無(wú)意義的標(biāo)簽,結(jié)構(gòu)差
示例10: 清除浮動(dòng)之額外標(biāo)簽法demo01.html
方法二: 父級(jí)添加overflow屬性的方法
可以給父級(jí)添加: overflow: hidden | auto | scroll都可以實(shí)現(xiàn)
優(yōu)點(diǎn): 代碼簡(jiǎn)潔
缺點(diǎn): 內(nèi)容增多時(shí)候容易造成不會(huì)換行導(dǎo)致內(nèi)容被隱藏掉,無(wú)法顯示需要溢出的元素
示例11: 清除浮動(dòng)之overflow demo01.html
方法三: 使用after為元素清除浮動(dòng)優(yōu)點(diǎn): 符合閉合浮動(dòng)思想
缺點(diǎn): 由于IE6,7不支持: after,使用zoom:1觸發(fā)hasLayout(百度,淘寶,網(wǎng)易等都有)
示例12: 清除浮動(dòng)之單偽元素demo01.html
方法四: 雙為元素清除浮動(dòng)
.clearfix:before, .clearfix:after {display: table;content: ""; } .clearfix:after{clear: both; } .clearfix{*zoom: 1; }優(yōu)點(diǎn): 代碼更簡(jiǎn)潔,語(yǔ)義化正確
缺點(diǎn): 由于IE6,7不支持: after,使用zoom:1觸發(fā)hasLayout(騰訊,小米等都有)
示例13: 清除浮動(dòng)之雙偽元素demo01.html
5.20 絕對(duì)定位
口訣: 子絕父相
- position:位置
- relative : 相對(duì)定位的元素,對(duì)象不可層疊,absolute開(kāi)始相對(duì)它定位 ,本體移走,位置保留
- left
- right
- top
- bottom
- absolute: 絕對(duì)定位,可以相對(duì)absolute,relative,fixed定位,但是第一個(gè)必須是relative,fixed,瀏覽器窗口,本體移走,位置不保留
- left
- right
- top
- bottom
- fixed: 固定定位，相對(duì)于瀏覽器窗口進(jìn)行定位
- static: 默認(rèn)值。靜態(tài)定位，元素出現(xiàn)在正常的流中
- inherit: 規(guī)定應(yīng)該從父元素繼承 position 屬性的值
- relative : 相對(duì)定位的元素,對(duì)象不可層疊,absolute開(kāi)始相對(duì)它定位 ,本體移走,位置保留
5.21 絕對(duì)定位盒子居中
div {position: absolute;left: 50%;top: 50%;margin-left: -100px;margin-top: -100px;height: 200px;width: 200px;border: 1px solid #ff0000;} /*或者*/ div{position: absolute;left: 50%;top: 50%;height: 200px;width: 200px;border: 1px solid #ff0000;transform: translate(-50%, -50%); }5.22 堆疊順序(z-index)
? 在使用定位布局時(shí),可能會(huì)出現(xiàn)盒子重疊情況,加了定位盒子,默認(rèn)后來(lái)者區(qū)上,后面的盒子會(huì)壓住前面的盒子,應(yīng)用z-index層疊等級(jí)屬性可以調(diào)整盒子的堆疊順序
- 屬性值: 正數(shù)負(fù)數(shù)或0,默認(rèn)值0,數(shù)值越大盒子越上
- 如果屬性值相同后來(lái)者區(qū)上
- 數(shù)字后面不能加單位
**注意: **z-index只能應(yīng)用于相對(duì)定位, 絕對(duì)定位和固定定位的元素,其他標(biāo)準(zhǔn)流,浮動(dòng),靜態(tài)定位無(wú)效
6. CSS高級(jí)
6.1 元素顯示與隱藏
6.1.1 diaplay 顯示
- block : 塊對(duì)象的默認(rèn)值,同時(shí)還有顯示元素
- inline : 轉(zhuǎn)為行內(nèi)塊(內(nèi)聯(lián)對(duì)象)
- inline-block: 轉(zhuǎn)為行內(nèi)塊對(duì)象
- none: 隱藏對(duì)象,不保留位置。與visibility: hidden(保留位置)不同
- 還有表格操作元素,查手冊(cè)
6.1.2 visiblity 可見(jiàn)性
- visible: 顯示
- hidde: 隱藏(保留位置); 清除浮動(dòng)
- inherit: 繼承父級(jí)
- collapse: 隱藏表格的行和列
6.1.3 overflow 溢出
- visible: 不剪輯溢出內(nèi)容,內(nèi)容也不添加滾動(dòng)條
- hidden: 不顯示超出的部分,超出的部分隱藏
- scroll: 不管內(nèi)容超出與否,都添加滾動(dòng)條
- auto: 超出自動(dòng)顯示滾動(dòng)條,不超出不顯示滾動(dòng)條
6.2 用戶(hù)界面樣式
6.2.1 鼠標(biāo)樣式 cursor
- default: 小白(默認(rèn))
- pointer: 小手
- move: 移動(dòng)
- text: 文本
- not-allowed: 禁止
6.2.2 輪廓線(xiàn) outline
輪廓線(xiàn): 文本輸入框選中會(huì)出現(xiàn)藍(lán)色的邊框的外圍,可起到凸起元素的作用
outline: outlone-color | outline-style | outline-width
但是一般不關(guān)心可以設(shè)置多少,平時(shí)一般去掉,直接寫(xiě)法: outline: 0;或者outline: none;
<input type = “text” style = “outline: 0;” />
6.2.3 防止拖拽文本域 resize
< textarea style = “resize: none;”></textarea> /防止拖拽/
6.3 垂直對(duì)齊 vertical-align
vertical-align垂直對(duì)齊,他只針對(duì)行內(nèi)元素或者行內(nèi)塊元素有效果,塊元素沒(méi)用
行高指基線(xiàn)與基線(xiàn)的距離
vertical-align: baseline(基線(xiàn)對(duì)齊,默認(rèn)) | top(頂線(xiàn)對(duì)齊) | midde(中線(xiàn)對(duì)齊) | bottom(底線(xiàn)對(duì)齊)
6.3.1 去除圖片低側(cè)空白縫隙
父盒子由圖片撐開(kāi),圖片下面會(huì)有空白縫隙,因?yàn)閳D片或者表單等行內(nèi)塊元素,它的底線(xiàn)會(huì)和父級(jí)盒子的基線(xiàn)對(duì)齊,就是圖片低側(cè)會(huì)有的空白縫隙
解決方案1 : 給img添加vertiacl-align:middle| top | midde都可以,讓圖片不要和基線(xiàn)對(duì)齊
解決方案2: 給img添加 diaplay: block; 把圖片轉(zhuǎn)換為塊級(jí)元素,就不會(huì)生效
6.4 溢出文字解決
- while-space(文本顯示方式)
- normal;(默認(rèn)處理,文字會(huì)自動(dòng)換行)
- nowrap; (強(qiáng)制在同一行顯示,直到文本結(jié)束或br)
- pre 保留格式
- pre-wrap: 保留空白符序列,但是正常的進(jìn)行換行
- pre-line: 合并空白,保留換行
- overflow
- hidden;(隱藏)
- text-overflow
- clip (文本溢出不顯示省略號(hào),簡(jiǎn)單的裁切)
- ellipsis(文本溢出顯示省略號(hào)標(biāo)記)
6.5 CSS精靈技術(shù)
6.5.1 精靈技術(shù)產(chǎn)生背景
? 圖所示為網(wǎng)頁(yè)的請(qǐng)求原理圖，當(dāng)用戶(hù)訪(fǎng)問(wèn)一個(gè)網(wǎng)站時(shí)，需要向服務(wù)器發(fā)送請(qǐng)求，網(wǎng)頁(yè)上的每張圖像都要經(jīng)過(guò)一次請(qǐng)求才能展現(xiàn)給用戶(hù)。
然而，一個(gè)網(wǎng)頁(yè)中往往會(huì)應(yīng)用很多小的背景圖像作為修飾，當(dāng)網(wǎng)頁(yè)中的圖像過(guò)多時(shí)，服務(wù)器就會(huì)頻繁地接受和發(fā)送請(qǐng)求，這將大大降低頁(yè)面的加載速度。為了有效地減少服務(wù)器接受和發(fā)送請(qǐng)求的次數(shù)，提高頁(yè)面的加載速度，出現(xiàn)了CSS精靈技術(shù)（也稱(chēng)CSS Sprites、CSS雪碧）。
6.5.2 精靈技術(shù)本質(zhì)
? CSS精靈是一種處理網(wǎng)頁(yè)背景圖像的方式。它將一個(gè)頁(yè)面涉及到的所有零星背景圖像都集中到一張大圖中去，然后將大圖應(yīng)用于網(wǎng)頁(yè)，這樣，當(dāng)用戶(hù)訪(fǎng)問(wèn)該頁(yè)面時(shí)，只需向服務(wù)發(fā)送一次請(qǐng)求，網(wǎng)頁(yè)中的背景圖像即可全部展示出來(lái)。通常情況下，這個(gè)由很多小的背景圖像合成的大圖被稱(chēng)為精靈圖（雪碧圖），如下圖所示為王者榮耀網(wǎng)站中的一個(gè)精靈圖
6.6 滑動(dòng)門(mén)技術(shù)
? 為了各種特殊形狀的背景能夠自適應(yīng)元素中文本內(nèi)容的多少,出現(xiàn)了CSS滑動(dòng)門(mén)技術(shù).它從新的角度構(gòu)建頁(yè)面,使各種形狀的背景能夠自動(dòng)拉伸,以適應(yīng)元素內(nèi)部的文本內(nèi)容,可用性很強(qiáng),常見(jiàn)于各種導(dǎo)航欄的滑動(dòng)門(mén)
核心技術(shù)
? 核心技術(shù)就是利用css精靈(主要是背景位置)和盒子padding撐開(kāi),以便于能使用不同字?jǐn)?shù)的導(dǎo)航欄.一般經(jīng)典布局是:
精靈圖:
<style>/*a設(shè)置左側(cè)(背景)門(mén)*/a {/*需要用文字撐開(kāi)內(nèi)容,所以用行內(nèi)塊元素*/display: inline-block;height: 33px;background: url(file:///C:/Users/a4244/Desktop/MD/60.png) no-repeat;padding-left: 15px;}/*span設(shè)置右(背景)邊門(mén)*/a span {display: inline-block;height: 33px;background: url(file:///C:/Users/a4244/Desktop/MD/60.png) no-repeat right;padding-right: 15px;}a:hover,a:hover span {background-image: url(file:///C:/Users/a4244/Desktop/MD/61.png);}</style> </head> <body><a href="#"><span>導(dǎo)航欄內(nèi)容</span></a> </body>6.7 margin負(fù)值
6.7.1 解決邊框1+1=2
利用margin去掉盒子與盒子合并的1+1 = 2的問(wèn)題
div {/*浮動(dòng)的盒子是緊貼在一起的*/float: left;width: 200px;height: 300px;border: 1px solid #ccc;margin-left: -1px;margin-top: -1px;}/*鼠標(biāo)經(jīng)過(guò)div 的意思 p:hover */div:hover {/*我要讓當(dāng)前鼠標(biāo)經(jīng)過(guò)的這個(gè)div 升到最高處來(lái)就好了*//*定位的盒子是最高層的 */border: 1px solid #f40;/*我們只要保證當(dāng)前的這個(gè)盒子 是定位 就會(huì)壓住 標(biāo)準(zhǔn)流和浮動(dòng)盒子*/position: relative;/*我們只能用相對(duì)定位 它是占位置的*/} div {position: relative;/*浮動(dòng)的盒子是緊貼在一起的*/float: left;width: 200px;height: 300px;border: 1px solid #ccc;margin-left: -1px;margin-top: -1px;}/*鼠標(biāo)經(jīng)過(guò)div 的意思 p:hover */div:hover {/*我要讓當(dāng)前鼠標(biāo)經(jīng)過(guò)的這個(gè)div 升到最高處來(lái)就好了*//*定位的盒子是最高層的 */border: 1px solid #f40;/*都是定位的盒子，我們通過(guò)z-index 來(lái)實(shí)現(xiàn)層級(jí)關(guān)系*/z-index: 1;}6.7.2 制作三角
? 用CSS邊框可以模擬三角結(jié)果,寬度高度都為0,我們4個(gè)邊框都要寫(xiě),只保留邊框的顏色,其余不能省略,都改為transparent(透明色)就好
? 為了照顧兼容性,低版本瀏覽器,加上font-size: 0; line-height: 0;
6.8 引入icon
在網(wǎng)站的鏈接后面添加favicon.ico
/*https://www.jd.com/favicon.ico*/ /*在head之間引入*/ <link rel = "shortcut icon" href = "favicon.ico" type = "image/x-icon"> /*或者*/ <link rel = "icon" href = "favicon.ico">## ７. HTML5
7.1 HTML5 簡(jiǎn)介
? 萬(wàn)維網(wǎng)的核心語(yǔ)言，標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言下的一個(gè)應(yīng)用超文本標(biāo)記語(yǔ)言(HTML)的第五次重大修改.作為新的HTML語(yǔ)言,具有新的元素,屬性和行為
? HTML5它有更大的技術(shù)集,允許多樣化和強(qiáng)大的網(wǎng)站和應(yīng)用程序
? 增加了新特性: 語(yǔ)義特性, 本地存儲(chǔ)特性, 設(shè)備兼容特性, 連接特性, 網(wǎng)頁(yè)多媒體特性, 三維, 圖形及特效特性, 性能與集成特性, CSS3特性
? XHTML是一種增強(qiáng)了的HTML,它的可擴(kuò)展性和靈活性將適應(yīng)未來(lái)網(wǎng)絡(luò)應(yīng)用更多的需求
7.2 H5新增語(yǔ)義化標(biāo)簽
| <header> | 頭部標(biāo)簽 | <nav> | 導(dǎo)航欄標(biāo)簽 | <article> | 內(nèi)容標(biāo)簽 |
| <section> | 塊級(jí)標(biāo)簽 | <aside> | 側(cè)邊欄標(biāo)簽 | <footer> | 尾部標(biāo)簽 |
| <audio> | 音頻標(biāo)簽 | <video> | 視頻標(biāo)簽 | <footer> | 尾部標(biāo)簽 |
注意: 這些語(yǔ)義化標(biāo)簽主要是針對(duì)搜索引擎的; 一個(gè)頁(yè)面可以多次使用; 在IE9中需要把他們轉(zhuǎn)換為塊級(jí)元素
7.3 autio音頻標(biāo)簽
語(yǔ)法: <autio src=“autio.mp3” controls = “controls”></autio>
- 屬性
- autoplay: autoplay; 如果出現(xiàn)該屬性,則音頻就緒后會(huì)馬上播放(谷歌禁用)
- controls: controls; 如果出現(xiàn)該屬性,則向用戶(hù)顯示控件,比如播放按鈕
- loop: loop; 如果出現(xiàn)該屬性,則每當(dāng)音頻結(jié)束時(shí)重新開(kāi)始播放
- src: url; 要播放的音頻URL
7.4 video視頻標(biāo)簽
語(yǔ)法: <video src=“video.mp4” controls = “controls”></video>
- video屬性
- autoplay: autoplay; 視頻就緒自動(dòng)播放
- controls: xontrols; 向用戶(hù)顯示播放界面(不使用)
- width: pixels(像素); 設(shè)置播放器的寬度
- height: pixels(像素); 設(shè)置播放器的高度
- loop: loop; 播放完繼續(xù)播放該視頻,循環(huán)
- preload: 規(guī)定是否預(yù)加載視頻(如果有了autoplay就會(huì)忽略該屬性)
- auto(預(yù)先加載視頻)
- none(不應(yīng)加載視頻)
- src: url; 視頻url地址
- poster: imgurl; 加載等待畫(huà)面圖片
- muted: muted; 靜音播放
| Ogg | NO | 3.5+ | 10.5+ | 5.0+ | NO |
| MPEG 4 | 9.0+ | No | No | 5.0+ | 3.0+ |
| Ogg | NO | 4.0+ | 10.6+ | 6.0+ | NO |
8 CSS3
8.1 2D轉(zhuǎn)換
轉(zhuǎn)換(transform): 實(shí)現(xiàn)元素位移,旋轉(zhuǎn),縮放等效果(變形)
- 移動(dòng): translate
- 旋轉(zhuǎn): rotate
- 變形: scale
- 綜合寫(xiě)法transfrom: translate(150px,150px) rotate(180deg) scale(1.2)…等
1. 移動(dòng): translate
/*語(yǔ)法: 百分比單位相對(duì)于自身元素的translate:(50%,50%)*/ transform: translate(x, y) /*或者*/ transform: translateX(x); transform: translateY(y);優(yōu)點(diǎn): 不會(huì)影響其他元素的位置,對(duì)行內(nèi)標(biāo)簽沒(méi)有效果
2.旋轉(zhuǎn): rotate
transform: rotate(度數(shù));- rotate里面跟度數(shù),單位deg,如rotate(45deg)
- 角度為正時(shí),順時(shí)針; 負(fù)時(shí),為逆時(shí)針
- 默認(rèn)旋轉(zhuǎn)的中心點(diǎn)是元素的中心點(diǎn)
3.旋轉(zhuǎn)的中心點(diǎn): transform-origin
transform-origin: x y; /*x,y(默認(rèn)中心點(diǎn)50%,50%), 還可以給x,y設(shè)置像素,方位名詞: top, bottom, left, center*/4. 縮放: scale
/*語(yǔ)法: transform: scale(x,y)*/ transform: scale(1,1): 放大一倍,相當(dāng)于沒(méi)有放大 transform: scale(2,2): 放大兩倍 transform: scale(2) == transform: scale(2,2) transform: scale(0.5,0.5): 縮小一半 /*可以設(shè)置中心點(diǎn)縮放,默認(rèn)就是中心點(diǎn),而且不會(huì)影響其他盒子*/8.2 過(guò)渡動(dòng)畫(huà)CSS3
過(guò)渡（transition)是CSS3中具有顛覆性的特征之一，我們可以在不使用 Flash 動(dòng)畫(huà)或 JavaScript 的情況下，當(dāng)元素從一種樣式變換為另一種樣式時(shí)為元素添加效果。
過(guò)渡動(dòng)畫(huà)： 是從一個(gè)狀態(tài) 漸漸的過(guò)渡到另外一個(gè)狀態(tài)
可以讓我們頁(yè)面更好看，更動(dòng)感十足，雖然 低版本瀏覽器不支持（ie9以下版本） 但是不會(huì)影響頁(yè)面布局。
我們現(xiàn)在經(jīng)常和 :hover 一起 搭配使用。
語(yǔ)法格式:
transition: 要過(guò)渡的屬性 花費(fèi)時(shí)間 運(yùn)動(dòng)曲線(xiàn) 何時(shí)開(kāi)始;| transition | 簡(jiǎn)寫(xiě)屬性，用于在一個(gè)屬性中設(shè)置四個(gè)過(guò)渡屬性。 | 3 |
| transition-property | 規(guī)定應(yīng)用過(guò)渡的 CSS 屬性的名稱(chēng)。 | 3 |
| transition-duration | 定義過(guò)渡效果花費(fèi)的時(shí)間。默認(rèn)是 0。 | 3 |
| transition-timing-function | 規(guī)定過(guò)渡效果的時(shí)間曲線(xiàn)。默認(rèn)是 “ease”。 | 3 |
| transition-delay | 規(guī)定過(guò)渡效果何時(shí)開(kāi)始。默認(rèn)是 0。 | 3 |
- 屬性
? 屬性就是你想要變化的 css 屬性， 寬度高度 背景顏色 內(nèi)外邊距都可以 。如果想要所有的屬性都變化過(guò)渡， 寫(xiě)一個(gè)all 就可以。
-
花費(fèi)時(shí)間
transition-duration 花費(fèi)時(shí)間 單位是 秒（必須寫(xiě)單位） s ms 比如 0.5s 這個(gè)s單位必須寫(xiě) ms 毫秒
-
運(yùn)動(dòng)曲線(xiàn) ease(默認(rèn))
運(yùn)動(dòng)曲線(xiàn)示意圖：
-
何時(shí)開(kāi)始
默認(rèn)是 0s 鼠標(biāo)觸發(fā)就立即開(kāi)始 可以設(shè)置 延遲觸發(fā)時(shí)間
案例：
div {width: 200px;height: 100px;background-color: pink;/* transition: 要過(guò)渡的屬性 花費(fèi)時(shí)間 運(yùn)動(dòng)曲線(xiàn) 何時(shí)開(kāi)始; *//*transition: width 0.6s ease 0s, height 0.3s ease-in 1s, background-color 1s ease 0s;*//* transtion 過(guò)渡的意思 這句話(huà)寫(xiě)到div里面而不是 hover里面 */ /*二選一*/transition: all 0.6s; /* 所有屬性都變化用all 就可以了 后面?zhèn)z個(gè)屬性可以省略 */} div:hover { /* 鼠標(biāo)經(jīng)過(guò)盒子，我們的寬度變?yōu)?00 */width: 600px;height: 300px;background-color: purple; }8.3 動(dòng)畫(huà)
動(dòng)畫(huà)(animation): 可通過(guò)設(shè)置多個(gè)節(jié)點(diǎn)來(lái)精確控制一個(gè)或一組動(dòng)畫(huà),用用來(lái)實(shí)現(xiàn)復(fù)雜的動(dòng)畫(huà)效果
相比于過(guò)渡,動(dòng)畫(huà)實(shí)現(xiàn)跟多變化,更多控制,連續(xù)自動(dòng)播放等效果
制作動(dòng)畫(huà): 先定義動(dòng)畫(huà),然后使用(調(diào)用)動(dòng)畫(huà)
- 動(dòng)畫(huà)序列
- 0%是動(dòng)畫(huà)的開(kāi)始,100%是動(dòng)畫(huà)完成,這樣的規(guī)則就是動(dòng)畫(huà)序列
- 在@keyframes中規(guī)定某項(xiàng)CSS樣式,就能創(chuàng)建由當(dāng)前樣式逐漸改為新樣式的動(dòng)畫(huà)效果
- 動(dòng)畫(huà)是使元素從一種樣式逐漸變化為另一種樣式的效果,您可以改變?nèi)我舛嗟臉邮饺我舛嗟拇螖?shù)
- 請(qǐng)用百分比來(lái)規(guī)定變化發(fā)生的時(shí)間,或用關(guān)鍵詞"from"和"to",等同于0%和100%
- 動(dòng)畫(huà)屬性
- @keyframes 規(guī)定動(dòng)畫(huà)
- animation 所有動(dòng)畫(huà)屬性的簡(jiǎn)寫(xiě)屬性,除animation-play-state屬性
- animation-name 規(guī)定@keyframes動(dòng)畫(huà)名稱(chēng)(必須的)
- animation-duration 規(guī)定動(dòng)畫(huà)完成一個(gè)周期多花費(fèi)的秒或毫秒,默認(rèn)是0(必須的)
- animation-timing-function 規(guī)定動(dòng)畫(huà)運(yùn)動(dòng)曲線(xiàn)
- linear 動(dòng)畫(huà)從頭到尾的速度相同,勻速
- ease 默認(rèn). 動(dòng)畫(huà)以低速開(kāi)始,然后加快,在結(jié)束前變慢
- ease-in 動(dòng)畫(huà)低速開(kāi)始
- ease-out 動(dòng)畫(huà)低速結(jié)束
- ease-in-out 動(dòng)畫(huà)以低速開(kāi)始低速結(jié)束
- steps() 指定了時(shí)間函數(shù)中的間隔數(shù)量
- animation-delay 規(guī)定動(dòng)畫(huà)何時(shí)開(kāi)始,默認(rèn)是0
- animation-iteration-count 規(guī)定動(dòng)畫(huà)播放的次數(shù),默認(rèn)是1,還有infinite
- animation-direction 規(guī)定動(dòng)畫(huà)是否在下一周期逆向播放,默認(rèn)是"normal",alternate逆向播放
- animation-play-state 規(guī)定動(dòng)畫(huà)是否正在運(yùn)行或暫停,默認(rèn)是"running"還有"paused"
- animation-fill-mode 規(guī)定動(dòng)畫(huà)后的結(jié)束狀態(tài),保持forwards,回到起始backwards
- 簡(jiǎn)寫(xiě): animation: 動(dòng)畫(huà)名稱(chēng) 持續(xù)時(shí)間 運(yùn)動(dòng)曲線(xiàn) 何時(shí)開(kāi)始 播放次數(shù) 是否反方向 動(dòng)畫(huà)起始或者結(jié)束狀態(tài),第二個(gè)動(dòng)畫(huà);
8.4 3D轉(zhuǎn)換
- 3D位移: translate3d(x, y, z)
- 3D旋轉(zhuǎn): rotate3d(x, y, z)
- 透視: perspective
- 3D呈現(xiàn): transfrom-style
1. 3D移動(dòng): translate3d
translform: translateX(100px); 僅在X軸上移動(dòng)
translform: translateY(100px); 僅在Y軸上移動(dòng)
translform: translateZ(100px); 僅在Z軸上移動(dòng)
translform: translateX(100px) translateY(100px) translateZ(100px);
translform: translate3d(x,y,z); 分別指定x, y, z軸移動(dòng)方向的距離
2. 透視: perspective
perspective: 200px;
透視的屬性一般寫(xiě)在被觀察的父盒子的身上
3. 3D旋轉(zhuǎn): rotate3d
transform: rotateX(45deg): 沿著x軸的正方向旋轉(zhuǎn)45度
transform: rotateY(45deg): 沿著y軸的正方向旋轉(zhuǎn)45度
transform: rotateZ(45deg): 沿著z軸的正方向旋轉(zhuǎn)45度
transform: rotate3d(x, y, z, deg);沿著自定義軸旋轉(zhuǎn)deg為角度
4. 3D呈現(xiàn): transfrom-style
- 控制子盒子是否開(kāi)啟三維立體環(huán)境
- transfrom-style: flat子元素不開(kāi)啟3d立體空間,默認(rèn)的
- transfrom-style: preserce-3d; 子元素開(kāi)啟立體空間
- 代碼寫(xiě)給父級(jí),但是影響的卻是子盒子
8.5 漸變
1 線(xiàn)性漸變
background: linear-gradient(起始方向,顏色1,顏色2,...); background: -webkit-linear-gradient(left, red, blue); background: -webkit-linear-gradient(left top, red, blue); 要加私有前綴,不然不顯示8.5 瀏覽器私有前綴
瀏覽器私有前綴是為了兼容老版本,比較新的就不用添加
- -moz-: 代表火狐(firefox)
- -ms-: IE
- -webkit-: safari, chrome
- -o-: Opera
9 移動(dòng)端
視口(viewport):瀏覽期限是頁(yè)面的屏幕區(qū)域,視口可以分: 布局視口, 視覺(jué)視口, 理想視口*
- 布局視口(layout viewport)
一般移動(dòng)設(shè)備的瀏覽器都默認(rèn)設(shè)置了一個(gè)布局視口，用于解決早期的PC端頁(yè)面在手機(jī)上顯示的問(wèn)題。
iOS, Android基本都將這個(gè)視口分辨率設(shè)置為 980px，所以PC上的網(wǎng)頁(yè)大多都能在手機(jī)上呈現(xiàn)，只不過(guò)元素看上去很小，一般默認(rèn)可以通過(guò)手動(dòng)縮放網(wǎng)頁(yè),手機(jī)顯示電腦網(wǎng)頁(yè)
- 視覺(jué)視口(visual viewport)
字面意思，它是用戶(hù)正在看到的網(wǎng)站的區(qū)域。注意：是網(wǎng)站的區(qū)域。
我們可以通過(guò)縮放去操作視覺(jué)視口，但不會(huì)影響布局視口，布局視口仍保持原來(lái)的寬度。
-
理想視口(ideal viewport)
為了使網(wǎng)站在移動(dòng)端有最理想的瀏覽和閱讀寬度而設(shè)定理想視口，對(duì)設(shè)備來(lái)講，是最理想的視口尺寸
需要手動(dòng)添寫(xiě)meta視口標(biāo)簽通知瀏覽器操作
meta視口標(biāo)簽的主要目的：布局視口的寬度應(yīng)該與理想視口的寬度一致，簡(jiǎn)單理解就是設(shè)備有多寬，我們布局的視口就多寬
總結(jié)：我們開(kāi)發(fā)最終會(huì)用理想視口，而理想視口就是將布局視口的寬度修改為視覺(jué)視口
9.1 視口標(biāo)簽meta
<meta name = “viewport” content = “width=device-width, use-scalable = no, initial-scale = 1.0, maximum-scale = 1.0, minimum-scale = 1.0”>
content = width = device-width(設(shè)備的寬度)
use-scalable = no (不允許用戶(hù)放大(no,0))
initial-scale = 1.0(初始縮放)
maximum-scale = 1.0(最大縮放比)
minimum-scale = 1.0(最小縮放比)
9.2 二倍圖
圖片縮放
設(shè)定圖片大小為100px*100px,手機(jī)一般是2:1 img{width: 50px; height: 50px}
背景圖縮放background-size
- background-size: 背景圖寬度 背景圖片高度;
- cover: 等比例拉伸,背景放大至完全覆蓋,可能有些部分顯示不全
- contain: 等比例拉伸,當(dāng)寬度或高度鋪滿(mǎn)盒子就不會(huì)在拉伸,可能有部分空白區(qū)域
- 精靈圖二倍縮放
- 先把精靈圖縮小至原來(lái)的兩倍,然后量坐標(biāo)與大小
- background-size也要縮放
9.3 移動(dòng)端主流方案
單獨(dú)制作移動(dòng)端頁(yè)面(主流)
- 流式布局(百分比布局); flex彈性布局; less+rem+媒體查詢(xún)布局; 混合布局
- 通常情況下,網(wǎng)址域名前面加m(mobile)可以打開(kāi)移動(dòng)端.通過(guò)判斷設(shè)備打開(kāi),則跳轉(zhuǎn)移動(dòng)端頁(yè)面,例:m.taobao.com
響應(yīng)式頁(yè)面兼容移動(dòng)端(其次)
- 媒體查詢(xún); bootstarp
- 判斷屏幕寬度來(lái)改變樣式,以適應(yīng)不同終端,制作麻煩,花大量的精力調(diào)兼容性問(wèn)題
移動(dòng)端瀏覽器基本以webkit內(nèi)核為主,因此只要考慮webkit的兼容性問(wèn)題,可以使用H5,CSS3
移動(dòng)端CSS初始化文件: normalize.css
-
Normalize.css
- 保護(hù)了有價(jià)值的默認(rèn)值
- 修復(fù)了瀏覽器的bug
- 是模塊化
- 擁有詳細(xì)的文檔
- 官網(wǎng):http://necolas.github.io/normalize.css/
-
CSS3的盒子模型: box-sizing
- box-sizing: content-box; 傳統(tǒng)模式
- box-sizing: border-box; CSS3模式
- 傳統(tǒng)盒子模型: 盒子寬度 = width + border + padding;
- CSS3盒子模型: 盒子的寬度 = CSS中設(shè)置的寬度,里面包含border和padding,也就是說(shuō)不會(huì)撐大盒子
特殊樣式
CSS3盒子模型
box-sizing: border-box;
-webkit-box-sizing: border-box;
點(diǎn)擊高亮我們需要清除: 設(shè)置為transparent;
-webkit-tap-heighlight-color: transparent;
在移動(dòng)端ios默認(rèn)外觀加上這個(gè)屬性才能給按鈕和輸入框自定義樣式
-webkit-appearance: none;
禁用長(zhǎng)按頁(yè)面時(shí)的彈出菜單
img,a{-webkit-touch-callout: none;}
10 fiex布局
傳統(tǒng)布局: 兼容性好, 布局繁瑣,局限性,不能在移動(dòng)端很好的布局
fiex布局: 操作方便,布局簡(jiǎn)單,移動(dòng)端應(yīng)用廣泛,pc支持較差,IE不支持
布局原理: 通過(guò)給父盒子添加flex屬性,來(lái)控制子盒子的位置和排列方式
flexible Box的縮寫(xiě)(彈性布局),用來(lái)為盒轉(zhuǎn)模型提供最大的靈活性,任何一個(gè)容器都可以指定為flex布局
- 當(dāng)我們?yōu)楦负凶釉O(shè)為flex布局后,子元素的float,clear,vertical-align屬性會(huì)失效
- 伸縮布局 = 彈性布局 = 伸縮盒布局 = 彈性盒布局 = flex布局
- 采用flex布局的元素,稱(chēng)為Flex容器(flex container),簡(jiǎn)稱(chēng)"容器",他的所有子元素自動(dòng)成為容器成員,稱(chēng)為Flex項(xiàng)目(flex item),簡(jiǎn)稱(chēng)"項(xiàng)目"
- div就是flex父容器,大的叫容器,小的叫項(xiàng)目
- span就是自容器flex項(xiàng)目
- 自容器可以橫向排列也可以縱向排列
10.1 flex的父類(lèi)屬性
給父元素: display: flex;
- flex-direction: 設(shè)置主軸的方向
- flex布局中,分為主軸和側(cè)軸兩個(gè)方向或者叫行和列,或者X,Y軸,子元素是根據(jù)主軸排列的
- 主軸默認(rèn)方向就是x軸的方向,水平向右;側(cè)軸方向是y軸的方向,水平向下
- 主軸和側(cè)軸是可以變換的,就可flex-direction設(shè)置誰(shuí)是主軸,剩下的就是側(cè)軸
- 屬性:
- row: 默認(rèn)從左到右
- row-reverse 從右到左
- column 從上到下
- column-reverse 從下到上
- justify-content: 設(shè)置主軸上的子元素排列方式
- 使用這個(gè)元素之前一定要確定主軸是哪個(gè)
- 屬性:
- flex-start: 默認(rèn)值,從頭開(kāi)始,如果主軸是x軸,則從左向右
- flex-end: 尾部開(kāi)始排列
- center: 主軸區(qū)中對(duì)齊(如果主軸是x軸則水平區(qū)中)
- space-around: 平分剩余空間
- space-between: 先兩邊貼邊,再平分剩余空間(重要)
- flex-wrap: 設(shè)置子元素排列方式
- 默認(rèn)的情款下,盒子都排在一條軸上,flex布局默認(rèn)不換行
- 屬性值:
- nowrap: 默認(rèn)值,不換行
- wrap換行
- align-content: 設(shè)置側(cè)軸上的子元素的排列方式(多行),單行無(wú)效果
- 屬性:
- flex-start 在側(cè)軸的頭部開(kāi)始排列
- flex-end 在側(cè)軸的尾部開(kāi)始排列
- center 在側(cè)軸的中間顯示
- stretch 設(shè)置子項(xiàng)元素高度平分父元素高度
- space-around 子項(xiàng)在側(cè)軸平分剩余空間
- space-between 子項(xiàng)在側(cè)軸先分布在兩頭.在平分剩余空間
- 屬性:
- align-items: 設(shè)置側(cè)軸上的子元素排列方式(單行)
- 該屬性是控制側(cè)軸(默認(rèn)y軸),上的排列順序,在子項(xiàng)為單向的時(shí)候使用
- 屬性:
- flex-start 默認(rèn)值 從上到下
- flex-end 從下到上
- center 擠在一起區(qū)中(垂直區(qū)中)
- stretch 拉伸
- flew-flow: 復(fù)合屬性,相當(dāng)于同時(shí)設(shè)置了flex-direction和flex-wrap簡(jiǎn)寫(xiě)
- flexflow: row wrap;
10.2 flex的子項(xiàng)屬性
flex屬性定義了子項(xiàng)目分配剩余控件,用flex來(lái)表示占多少份數(shù)
flex: number;默認(rèn)是0
align-self屬性允許單個(gè)項(xiàng)目與其他項(xiàng)目不一樣的對(duì)齊方式.可以覆蓋align-items屬性,默認(rèn)值為auto,標(biāo)識(shí)繼承父元素的align-items屬性,如果沒(méi)有父元素,則等同于stretch
span:nth-child(2){align-self: flex-end;}
order屬性定義項(xiàng)目的排列順序
數(shù)值越小,排列越靠前面,默認(rèn)為0
11 rem適配布局
11.1 rem基礎(chǔ)
rem(root em)是相對(duì)單位, 類(lèi)似于em,em是父元素字體大小,不同的是rem的基準(zhǔn)是相對(duì)于html元素的字體大小
優(yōu)點(diǎn):可以通過(guò)修改html里面的文字大小來(lái)改變頁(yè)面中元素的大小可以實(shí)現(xiàn)整體控制
例如: 根元素html設(shè)置font-size: 12px;非根元素設(shè)置width:2rem;則換成px表示就是24px;
11.2 媒體查詢(xún)
媒體查詢(xún)(Media Query)是CSS3的語(yǔ)法
- 使用@media查詢(xún),可以針對(duì)不同的媒體類(lèi)型定義不同的樣式
- @media可以針對(duì)不同的屏幕尺寸設(shè)置不同的樣式
- 當(dāng)你重置瀏覽器大小的過(guò)程中,頁(yè)面也會(huì)根據(jù)瀏覽器的寬度和高度重新渲染頁(yè)面
- 目前針對(duì)很多蘋(píng)果手機(jī),android手機(jī),平板等設(shè)備都用得到多媒體查詢(xún)
語(yǔ)法: media mediatype and|no|only (media feature){CSS-Code;}
- 用@media開(kāi)頭 注意@符號(hào)
- mediatype媒體類(lèi)型
- all 用于所有的設(shè)備
- print 用于打印機(jī)和打印預(yù)覽
- scree 用于電腦屏幕,平板電腦,智能手機(jī)
- 關(guān)鍵字 and not only
- and可以將多個(gè)多媒體特性連接在一起,相當(dāng)于且的意思
- not: 排除某個(gè)媒體類(lèi)型,相當(dāng)于非得意思,可以省略
- only: 指定某個(gè)特定的媒體查詢(xún)類(lèi)型,可以省略
- media featrue 媒體特性 必須由小括號(hào)包含
- width:定義輸出設(shè)備中頁(yè)面可見(jiàn)區(qū)域的寬度
- min-width: 定義輸出設(shè)備中頁(yè)面最小可見(jiàn)區(qū)域?qū)挾?/li>
- max-width: 定義輸出設(shè)備中頁(yè)面最大可見(jiàn)區(qū)域?qū)挾?/li>
10.3 媒體查詢(xún)引入css
語(yǔ)法: <link rel = “stylesheet” media = “mediatype and|not|only (media feature)” href = “mystyle.css”>
11 less
less(Leaner Style Sheets): 一門(mén)擴(kuò)展語(yǔ)言,也是CSS的預(yù)處理器,作為CSS的一種形式的擴(kuò)展,他并沒(méi)有減少CSS的功能,而是在現(xiàn)有的CSS的語(yǔ)法上,為CSS加入了程序式語(yǔ)言特性,在CSS的語(yǔ)法基礎(chǔ)上,引入了Mixin(混入),運(yùn)算一級(jí)函數(shù)等功能,大大簡(jiǎn)化了CSS的編寫(xiě),并且降低了CSS的維護(hù)成本
常見(jiàn)的CSS預(yù)處理器: Sass, Less, Stylus
11.1 less安裝
- 安裝nodejs,可以選擇版本(8.0)
- 檢查是否安裝成功,使用cmd,node-v查看版本號(hào)
- 基于nodejs在線(xiàn)安裝Less,使用cmd,"npm install -g less
- 檢查是否安裝成功,使用cmd命令, "lessc -v"查看版本就可以啦
less使用: 新建less后綴的文件,在這個(gè)less文件里面書(shū)寫(xiě)less語(yǔ)句
- less變量
- less編譯
- less嵌套
- less運(yùn)算
11.2 less變量
@變量名: 值;
變量名規(guī)范: 必須以@作為前綴, 不能包含特殊字符, 不能以數(shù)字開(kāi)頭, 大小寫(xiě)敏感
//新建一個(gè)my.less文件 @color: pink; //定義一個(gè)粉色變量 @font14: 14px; //定義字體為14號(hào)字體 body {background-color: @color;font-size: @font14; } div {background-color: @color; }11.3 less編譯
本質(zhì)上,less包含一套自定義的語(yǔ)法及一個(gè)解析器, 用戶(hù)根據(jù)這些語(yǔ)法定義自己的樣式規(guī)則,這些規(guī)則最終會(huì)通過(guò)解析器,編譯生成對(duì)應(yīng)的CSS文件,所以less文件需要編譯生成CSS文件,這樣html才能使用
Easey LESS插件用來(lái)把less文件編譯成為CSS文件,只要保存就會(huì)自動(dòng)生成CSS文件,然后引入生成的CSS文件
11.4 嵌套
偽類(lèi),偽元素,或者交集選擇器需要在前面加&符號(hào),然后寫(xiě)偽元素, 偽類(lèi)和交集選擇器
/*less文件*/ .header {width: 200px;height: 200px;background-color: pink;a {color: red;&:hover {color: green;}} }/*less文件生成的CSS文件*/ .header {width: 200px;height: 200px;background-color: pink; } .header a {color: red; } .header a:hover {color: green; } <!--HTML結(jié)構(gòu)--> <header><a herf = "#"></a> </header>11.5 less運(yùn)算
運(yùn)算符有: + - * /
- 運(yùn)算符左右必須加空格
- 運(yùn)算的順序和數(shù)學(xué)一樣
- 兩個(gè)數(shù)參與運(yùn)算, 如果一個(gè)有單位,則最后的結(jié)果的以這個(gè)單位為準(zhǔn)
- 如果兩個(gè)都有單位,而且不一樣,最后的結(jié)果以第一個(gè)單位為準(zhǔn)
11.6 rem適配方案
- 讓一些不能等比自適應(yīng)元素,達(dá)到當(dāng)設(shè)備尺寸發(fā)生改變的時(shí)候,等比例適配當(dāng)前的元素
- 使用媒體查詢(xún)根據(jù)不同設(shè)備按比例設(shè)置html的字體大小,然后頁(yè)面元素使用rem做單位的尺寸
技術(shù)方案一: less, 媒體查詢(xún), rem
- 動(dòng)態(tài)設(shè)置htmlfont-size大小
- 假設(shè)設(shè)計(jì)稿是750px
- 于是我們就可以把設(shè)計(jì)稿劃分為15等分(20等份,等分不一),每份html大小就是50px
- 在320px設(shè)備的時(shí)候,字體大小就是320/15就是21.33
- 頁(yè)面元素大小除以不同的html字體大小會(huì)發(fā)現(xiàn)他們的比例還是不相同的
- 比如750px的設(shè)計(jì)稿,在10010像素的頁(yè)面元素750屏幕下,就是100/50轉(zhuǎn)換為rem,就是2rem2rem比例是1:1
- 320屏幕下,html字體大小為21.33,則2rem = 42.66px,此時(shí)寬和高都是42.66,但是寬和高比例還是1:1
- 元素取值方法
- 頁(yè)面元素rem值 = 頁(yè)面元素值(px) / (屏幕寬度 / 劃分的份數(shù))
- 屏幕寬度 / 劃分的份數(shù) = html font-size的大小
- 或者: 頁(yè)面元素的rem值 = 頁(yè)面元素值(px) / html font-size字體大小
技術(shù)方案二: flexible.js, rem
CSS規(guī)范
1. CSS屬性書(shū)寫(xiě)順序
- 遵循以下順序
- 布局定位(顯示)屬性: display, position, float, clear, visibility, overflow
- 自身屬性: width, height, margin, padding, border, background(透明背景CSS3除外)
- 文本屬性: color, font, text-decoration, text-align, vertical-align, white-space, break-word
- 其他屬性(CSS3): content, currsor, border-radius, box-shadow, text-shadow, background: linear-gradient …
2. CSS布局流程
? 為了提高網(wǎng)頁(yè)制作的效率,布局時(shí)通常有以下的布局流程,具體如下:
- 必須確定頁(yè)面版心(可視區(qū)),我們測(cè)量可以得知
- 分析頁(yè)面中的行模塊,以及每個(gè)行模塊中的列模塊.其實(shí)頁(yè)面布局就是一行一行羅列出來(lái)的
- 制作HTML結(jié)構(gòu),我們還是遵循,先有結(jié)構(gòu)后有樣式的原則,結(jié)構(gòu)永遠(yuǎn)最重要
- 然后開(kāi)始運(yùn)行盒子模型的原理,通過(guò)DIV+CSS布局來(lái)控制網(wǎng)頁(yè)的各個(gè)模塊
3. CSS文件名
主要的 master.css 模塊 module.css 基本共用 base.css 布局、版面 layout.css 主題 themes.css 專(zhuān)欄 columns.css 文字 font.css 表單 forms.css 補(bǔ)丁 mend.css 打印 print.css 公共樣式: common.css4. 常用的CSS命名
頭：header 內(nèi)容：content/container 尾：footer 導(dǎo)航：nav 側(cè)欄：sidebar 欄目：column 頁(yè)面外圍控制整體佈局寬度：wrapper 左右中：left right center 登錄條：loginbar 標(biāo)志：logo 廣告：banner 頁(yè)面主體：main 熱點(diǎn)：hot 新聞：news 下載：download 子導(dǎo)航：subnav 菜單：menu 標(biāo)簽：tags 子菜單：submenu 搜索：search 友情鏈接：friendlink 頁(yè)腳：footer 版權(quán)：copyright 滾動(dòng)：scroll 內(nèi)容：content 文章列表：list 提示信息：msg 小技巧：tips 欄目標(biāo)題：title 加入：joinus 指南：guide 服務(wù)：service 注冊(cè)：regsiter 狀態(tài)：status 投票：vote 合作伙伴：partner 關(guān)于: about 賬戶(hù): account 箭頭圖標(biāo): arrow 文章: article 邊欄: aside 音頻: audio 頭像: avatar 背景: bg,background 欄（工具類(lèi)): bar 品牌化: branding 分類(lèi): category 面包屑: crumb,breadcrumbs 按鈕: btn,button 標(biāo)題，說(shuō)明: caption 圖表: chart 清除浮動(dòng): clearfix 關(guān)閉: close 列: col,column 評(píng)論: comment 社區(qū): community 容器: container 內(nèi)容: content 版權(quán): copyright 當(dāng)前態(tài)，選中態(tài): current 默認(rèn): default 描述: description 細(xì)節(jié): details 不可用: disabled 文章，博文: entry 錯(cuò)誤: error 偶數(shù)，常用于多行列表或表格中: even 失敗（提示): fail 專(zhuān)題: feature 收起: fewer 用于表單的輸入?yún)^(qū)域: field 圖: figure 篩選: filter 第一個(gè)，常用于列表中: first 隱藏: hide 頁(yè)腳: footer 論壇: forum 畫(huà)廊: gallery 模塊，清除浮動(dòng): group 頁(yè)頭: header 幫助: help 高亮: hightlight 主頁(yè): home 圖標(biāo): icon 信息: info,information 最后一個(gè),常用語(yǔ)列表: last 鏈接: links 登錄: login 退出: logout 標(biāo)志: logo 主題: main 菜單: menu 作者、更新時(shí)間等信息欄，一般位于標(biāo)題之下: meta 模塊: module 更多（展開(kāi)): more 消息: msg,message 導(dǎo)航: nav,navigation 下一頁(yè): next 小塊: nub 奇數(shù)，常用于多行列表或表格中: odd 鼠標(biāo)離開(kāi): off 鼠標(biāo)移過(guò): on 輸出: output 分頁(yè): pagination 彈窗: pop,popup 預(yù)覽: preview 上一頁(yè): previous 主要: primary 進(jìn)度條: progress 促銷(xiāo): promotion 推薦: rcommd,recommendations 注冊(cè): reg,register 頂部導(dǎo)航: shortcut 保存: save 搜索: search 次要: secondary 區(qū)塊: section 已選: selected 分享: share 顯示: show 邊欄，側(cè)欄: sidebar 排序: sort 幻燈片，圖片切換: slide 次級(jí)的，子級(jí)的: sub 提交: submit 訂閱: subscribe 副標(biāo)題: subtitle 成功（提示): success 摘要: summary 標(biāo)簽: tab 表格: table 文本: txt,text 縮略圖: thumbnail 時(shí)間: time 提: tips 標(biāo)題: title 視頻: video 容器，包，一般用于最外層: wrap 容器，包，一般用于最外層: wrapper5. id命名
1. 頁(yè)面結(jié)構(gòu)
容器: container 頁(yè)頭：header 內(nèi)容：content/container 頁(yè)面主體：main 頁(yè)尾：footer 導(dǎo)航：nav 側(cè)欄：sidebar 欄目：column 頁(yè)面外圍控制整體佈局寬度：wrapper 左右中：left right center2. 導(dǎo)航
導(dǎo)航：nav 主導(dǎo)航：mainnav 子導(dǎo)航：subnav 頂導(dǎo)航：topnav 邊導(dǎo)航：sidebar 左導(dǎo)航：leftsidebar 右導(dǎo)航：rightsidebar 菜單：menu 子菜單：submenu 標(biāo)題: title 摘要: summary3. 功能
標(biāo)志：logo 廣告：banner 登陸：login 登錄條：loginbar 注冊(cè)：register 搜索：search 功能區(qū)：shop 標(biāo)題：title 加入：joinus 狀態(tài)：status 按鈕：btn 滾動(dòng)：scroll 標(biāo)籤頁(yè)：tab 文章列表：list 提示信息：msg 當(dāng)前的: current 小技巧：tips 圖標(biāo): icon 注釋：note 指南：guild 服務(wù)：service 熱點(diǎn)：hot 新聞：news 下載：download 投票：vote 合作伙伴：partner 友情鏈接：link 版權(quán)：copyright按鈕: btn,button 標(biāo)題，說(shuō)明: caption 圖表: chart 清除浮動(dòng): clearfix 關(guān)閉: close 列: col,column 評(píng)論: comment 社區(qū): community 容器: container 內(nèi)容: content 版權(quán): copyright 當(dāng)前態(tài)，選中態(tài): current 默認(rèn): default 描述: description 細(xì)節(jié): details 不可用: disabled 文章，博文: entry 錯(cuò)誤: error 偶數(shù)，常用于多行列表或表格中: even 失敗（提示): fail 專(zhuān)題: feature 收起: fewer 用于表單的輸入?yún)^(qū)域: field 圖: figure 篩選: filter 第一個(gè)，常用于列表中: first 隱藏: hide 頁(yè)腳: footer 論壇: forum 畫(huà)廊: gallery 模塊，清除浮動(dòng): group 頁(yè)頭: header 幫助: help 高亮: hightlight 主頁(yè): home 圖標(biāo): icon 信息: info,information 最后一個(gè),常用語(yǔ)列表: last 鏈接: links 登錄: login 退出: logout 標(biāo)志: logo 主題: main 菜單: menu 作者、更新時(shí)間等信息欄，一般位于標(biāo)題之下: meta 模塊: module 更多（展開(kāi)): more 消息: msg,message 導(dǎo)航: nav,navigation 下一頁(yè): next 小塊: nub 奇數(shù)，常用于多行列表或表格中: odd 鼠標(biāo)離開(kāi): off 鼠標(biāo)移過(guò): on 輸出: output 分頁(yè): pagination 彈窗: pop,popup 預(yù)覽: preview 上一頁(yè): previous 主要: primary 進(jìn)度條: progress 促銷(xiāo): promotion 推薦: rcommd,recommendations 注冊(cè): reg,register 頂部導(dǎo)航: shortcut 保存: save 搜索: search 次要: secondary 區(qū)塊: section 已選: selected 分享: share 顯示: show 邊欄，側(cè)欄: sidebar 排序: sort 幻燈片，圖片切換: slide 次級(jí)的，子級(jí)的: sub 提交: submit 訂閱: subscribe 副標(biāo)題: subtitle 成功（提示): success 摘要: summary 標(biāo)簽: tab 表格: table 文本: txt,text 縮略圖: thumbnail 時(shí)間: time 提: tips 標(biāo)題: title 視頻: video 容器，包，一般用于最外層: wrap 容器，包，一般用于最外層: wrapper ```### 5. id命名**1. 頁(yè)面結(jié)構(gòu)**```tes 容器: container 頁(yè)頭：header 內(nèi)容：content/container 頁(yè)面主體：main 頁(yè)尾：footer 導(dǎo)航：nav 側(cè)欄：sidebar 欄目：column 頁(yè)面外圍控制整體佈局寬度：wrapper 左右中：left right center ```**2. 導(dǎo)航**```tes 導(dǎo)航：nav 主導(dǎo)航：mainnav 子導(dǎo)航：subnav 頂導(dǎo)航：topnav 邊導(dǎo)航：sidebar 左導(dǎo)航：leftsidebar 右導(dǎo)航：rightsidebar 菜單：menu 子菜單：submenu 標(biāo)題: title 摘要: summary ```**3. 功能**```tes 標(biāo)志：logo 廣告：banner 登陸：login 登錄條：loginbar 注冊(cè)：register 搜索：search 功能區(qū)：shop 標(biāo)題：title 加入：joinus 狀態(tài)：status 按鈕：btn 滾動(dòng)：scroll 標(biāo)籤頁(yè)：tab 文章列表：list 提示信息：msg 當(dāng)前的: current 小技巧：tips 圖標(biāo): icon 注釋：note 指南：guild 服務(wù)：service 熱點(diǎn)：hot 新聞：news 下載：download 投票：vote 合作伙伴：partner 友情鏈接：link 版權(quán)：copyright ```總結(jié)
以上是生活随笔為你收集整理的HTML5+CSS3的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： “运行”窗口命令大全
- 下一篇： 2017年html5行业报告,云适配发布