DIV+CSS系统学习：转载
第一部分 HTML
第一章 職業(yè)規(guī)劃和前景
-
職業(yè)方向規(guī)劃定位：
- web前端開(kāi)發(fā)工程師
- web網(wǎng)站架構(gòu)師
- 自己創(chuàng)業(yè)
- 轉(zhuǎn)崗管理或其他
-
web前端開(kāi)發(fā)的前景展望：
- 未來(lái)IT行業(yè)企業(yè)需求最多的人才
- 結(jié)合最新的html5搶占移動(dòng)端的市場(chǎng)
- 自己創(chuàng)業(yè)做老板
- 隨著互聯(lián)網(wǎng)的普及web開(kāi)發(fā)成為企業(yè)的寵兒和核心
-
web職業(yè)發(fā)展目標(biāo)：
-
第一、梳理知識(shí)架構(gòu)
- 負(fù)責(zé)內(nèi)容的HTML
- 負(fù)責(zé)外觀的css（層疊樣式表）
- 負(fù)責(zé)行為的js
- ps切圖
-
第二、分解目標(biāo)（起步階段、提升階段、成型階段）
-
起步階段：
- 基本知識(shí)的掌握
- 常用工具的掌握
- 溝通技巧的掌握（圍繞客戶的需求）
- 良好的開(kāi)發(fā)習(xí)慣（加注釋、對(duì)齊方式）
-
提升階段：
- 熟悉掌握HTML基本標(biāo)簽和屬性
- 熟練掌握css的基本語(yǔ)法和使用
- 瀏覽器兼容和w3c標(biāo)準(zhǔn)的掌握
- 結(jié)合html+css+js開(kāi)始系統(tǒng)項(xiàng)目的開(kāi)發(fā)
-
成型階段：
- 精通DIV+CCS布局
- 精通css樣式表控制html標(biāo)簽
- 熟悉運(yùn)用js制作動(dòng)態(tài)網(wǎng)站的效果
- 能獨(dú)立開(kāi)發(fā)完成網(wǎng)站
-
-
第二章 html基本結(jié)構(gòu)
-
認(rèn)識(shí)HTML：
- html不是一種編程語(yǔ)言，是一種標(biāo)志語(yǔ)言
- 標(biāo)記語(yǔ)言是由一套標(biāo)識(shí)標(biāo)簽組成的
- html使用標(biāo)簽來(lái)描述網(wǎng)頁(yè)
-
html結(jié)構(gòu)：
| ? | <html> <head></head> <body></body> </html> |
- 不成對(duì)出現(xiàn)的標(biāo)簽
<br>?<hr>?<meta>?<img>?<input..>?<option..>?<link>
-
HTML 基本標(biāo)簽的講解：
- <html>?<head>?<body>標(biāo)簽
- <h1>—-<h6>僅僅用于標(biāo)題文本，不要為了產(chǎn)生粗體文本使用它們
- <p>標(biāo)簽 段落標(biāo)簽
-
<strong><b>標(biāo)簽
-
都會(huì)讓文字產(chǎn)生加粗效果
- <strong>用于強(qiáng)調(diào)文本，強(qiáng)度更深，表示重要文本—>用于SEO優(yōu)化
- <b>只是視覺(jué)加粗效果—>單純?yōu)榱水a(chǎn)生加粗
- <em>?<i>標(biāo)簽
- em用于強(qiáng)調(diào)文本
- i只是視覺(jué)斜體效果
- <strong>比<em>強(qiáng)調(diào)更強(qiáng)
- 特殊符號(hào)：
- —->空格
- > —>大于號(hào)
- <；—>小于號(hào)
- "；—>引號(hào)
- ©–>版權(quán)號(hào)
第三章 html基本標(biāo)簽
-
HTMl基本標(biāo)簽：
- span標(biāo)簽
- 對(duì)被用來(lái)組合文檔中的行內(nèi)元素
- 注意：span沒(méi)有固定的格式表現(xiàn)，當(dāng)對(duì)它應(yīng)用樣式時(shí)，才會(huì)產(chǎn)生視覺(jué)上的變化
- <pre>標(biāo)簽
- 文字的格式按源碼的排版來(lái)顯示，我們稱之為預(yù)處理格式
-
<a>標(biāo)簽—>他有一個(gè)必不可少的屬性 href
- target屬性：
- _self(在原來(lái)頁(yè)面打開(kāi))
- _blank（新窗口打開(kāi)）
- _top（打開(kāi)時(shí)忽略所有的框架）
- _parent（在父窗口中打開(kāi)）
-
創(chuàng)建錨點(diǎn)和錨鏈接
- 錨點(diǎn)也是一種超鏈接，是頁(yè)面內(nèi)進(jìn)行跳轉(zhuǎn)的超鏈接
- 第一步：創(chuàng)建錨點(diǎn)?<a name="錨點(diǎn)名稱"></a>
- 第二步：使用創(chuàng)建好的錨點(diǎn)名稱?<a href="#錨點(diǎn)名稱">內(nèi)容</a>
- 錨點(diǎn)也是一種超鏈接，是頁(yè)面內(nèi)進(jìn)行跳轉(zhuǎn)的超鏈接
- marquee標(biāo)簽
- 可以創(chuàng)建一個(gè)內(nèi)容滾動(dòng)效果
- span標(biāo)簽
| ? | <marquee direction="down" loop="4" οnmοuseοver=this.stop() οnmοuseοut=this.start()></marquee> |
- direction?表示滾動(dòng)方向，取值有（left,right,up,down,默認(rèn)left）
- loop表示滾動(dòng)循環(huán)的次數(shù)，默認(rèn)為無(wú)限循環(huán)
| ? | οnmοuseοver=this.stop() οnmοuseοver=this.start() scrollamout="1"(滾動(dòng)速度) |
- 表示當(dāng)鼠標(biāo)移上區(qū)域的時(shí)候停止?jié)L動(dòng)，鼠標(biāo)移開(kāi)繼續(xù)滾動(dòng)
第四章 img圖片標(biāo)簽與路徑
-
圖片標(biāo)簽與路徑：
- 常見(jiàn)圖片格式?jpg?png?gif
- Gif?（只支持全透明）
- Jpeg?/jpg
- Png?半/全透明都支持
-
圖片標(biāo)簽寫(xiě)法 ：
- <img src="" alt="" width="" height="" />
-
圖片四要素：
- src=""?圖片路徑
- alt=""?圖片含義
- width=""?圖片寬度 和圖片大小保持一致
- height=""?圖片高度 和圖片大小保持一致
- title=""
-
路徑知識(shí)：
-
相對(duì)路徑、絕對(duì)路徑：
- 相對(duì)路徑：(Relative Path) 相對(duì)于該文件的路徑；
- 絕對(duì)路徑：(Absolute Path) 從磁盤(pán)出發(fā)的路徑；
-
<img src="" …… align="" />?align屬性–設(shè)置圖片與后面文字的位置關(guān)系
值–top、bottom、middle、absmiddle、left、right
-
-
在靜態(tài)頁(yè)面中：
-
/開(kāi)頭表示根目錄；
-
./表示當(dāng)前目錄；（斜畫(huà)線前面一個(gè)點(diǎn)）
-
../上級(jí)目錄；（斜畫(huà)線前面兩個(gè)點(diǎn)）
-
直接用文件名不帶/也表示同一目錄
- 這些都是相對(duì)于當(dāng)前文件的位置來(lái)說(shuō)的，如果用絕對(duì)路徑的話就是寫(xiě)全了。
-
第五章 三種列表的講解
- 三種列表的知識(shí)講解：
- <ul>無(wú)序列表
- 無(wú)序列表是一個(gè)沒(méi)有順序項(xiàng)目的列表，此列表項(xiàng)默認(rèn)粗體圓點(diǎn)進(jìn)行標(biāo)識(shí)
- <ul>無(wú)序列表
| ? | <ul> <li></li> <li></li> <li></li> </ul> |
- 有序列表
- 有序列表也是一列項(xiàng)目，只是列表項(xiàng)目使用的是數(shù)字進(jìn)行標(biāo)記。 有序列表始于?<ol>?標(biāo)簽。每個(gè)列表項(xiàng)始于?<li>標(biāo)簽。
| ? | <ol> <li>內(nèi)容一</li> <li>內(nèi)容二</li> <li>內(nèi)容三</li> </ol> |
-
列表符號(hào)
-
無(wú)序列表-列表符號(hào):
- type="circle"?空心圓?type=“disc”?實(shí)心圓 默認(rèn)值?type="square"?方塊符
-
有序列表-列表符號(hào)
- type="A"?A B C D
- type="a"?a b c d
- type="1"?1 2 3 4 默認(rèn)值type=”I” I II III type=”i” i ii iii
-
列表嵌套
-
無(wú)序列表-嵌套
-
| ? | <ul> <li>柚子 <ul> <li>沙田柚</li> <li>蜜柚</li> </ul> </li> <li>荔枝</li> <li>蘋(píng)果</li></ul> |
- 有序列表-嵌套
| ? | <ol> <li>茶 <ul> <li>紅茶</li> <li>綠茶</li> </ul> </li> <li>果汁</li> <li>牛奶</li></ol> |
- 定義列表
- 定義列表不僅僅是一列項(xiàng)目，而是項(xiàng)目及其注釋的組合。定義列表以?<dl>?標(biāo)簽開(kāi)始。每個(gè)定義列表項(xiàng)以?<dt>開(kāi)始。每個(gè)自定義列表項(xiàng)的定義以?<dd>?開(kāi)始。
| ? | <dl> <dt>pc網(wǎng)頁(yè)制作</dt> <dd>學(xué)習(xí)DIV+CSS JS JQ 項(xiàng)目實(shí)戰(zhàn)</dd> <dt>手機(jī)網(wǎng)頁(yè)制作</dt> <dd>手機(jī)網(wǎng)頁(yè)制作實(shí)戰(zhàn)</dd> </dl> |
-
dd是對(duì)dt的解釋
- < dl>< /dl>用來(lái)創(chuàng)建一個(gè)普通的列表,
- < dt>< /dt>用來(lái)創(chuàng)建列表中的上層項(xiàng)目，
- < dd>< /dd>用來(lái)創(chuàng)建列表中最下層項(xiàng)目，
- < dt>< /dt>和< dd>< /dd>都必須放在< dl>< /dl>標(biāo)志對(duì)之間。
| ? | <dl> <dt>中國(guó)城市</dt> <dd>北京 </dd> <dd>上海 </dd> <dd>廣州 </dd> <dt>美國(guó)城市</dt> <dd>華盛頓 </dd> <dd>芝加哥 </dd> <dd>紐約 </dd> </dl> |
- dl是definition list的縮寫(xiě)
- dt是definition title的縮寫(xiě)
- dd是definition description的縮寫(xiě)
- list-style屬性具有三個(gè)屬性分量：
- list-style-position?：設(shè)置列表項(xiàng)圖標(biāo)的位置，位于文本內(nèi)或者文本外
- list-style-type： 設(shè)置列表項(xiàng)圖標(biāo)的類型
- list-style-image：使用圖像設(shè)置列表項(xiàng)圖標(biāo)
第六章 表單元素(上)
-
表單標(biāo)簽:
-
<form>表單標(biāo)簽
- <form>表單是一個(gè)包含表單元素的區(qū)域，包括起來(lái)的都是表單的內(nèi)容
? <form> <input type="text"/> </form>
- <form>表單是一個(gè)包含表單元素的區(qū)域，包括起來(lái)的都是表單的內(nèi)容
-
-
HTML標(biāo)簽 -?Action和確認(rèn)按鈕：
- 當(dāng)用戶單擊確認(rèn)按鈕時(shí)，表單的內(nèi)容會(huì)被傳送到另一個(gè)文件。表單的動(dòng)作屬性定義了目的文件的文件名。由動(dòng)作屬性定義的這個(gè)文件通常會(huì)對(duì)接收到的輸入數(shù)據(jù)進(jìn)行相關(guān)的處理。
| ? | <form action="html.do" method="get"> username: <input type="text" name="user" /> <input type="submit" value="提 交" /> </form> |
-
HTML標(biāo)簽 - 隱藏域隱藏標(biāo)簽：
-
隱藏域在頁(yè)面中對(duì)于用戶是不可見(jiàn)的，在表單中插入隱藏域的目的在于收集或發(fā)送信息，以利于被處理表單的程序所使用。瀏覽者單擊發(fā)送按鈕發(fā)送表單的時(shí)候，隱藏域的信息也被一起發(fā)送到服務(wù)器
| ? | <form> <input type="hidden" name="hid" value="value"> </form> |
-
<input>標(biāo)簽的掌握
-
常用type類型：
- <input type="" name="" value="" />
- type="text"?單行文本輸入框
- type="password"?密碼（maxlength=""）
- type="radio"?單項(xiàng)選擇（checked="checked"）
- type="checkbox"?多項(xiàng)選擇
- type="button"?按鈕
- type="submit"?提交?type="image"圖片提交
- type="file"?上傳文件
- type="reset"重置
- type="hidden"?隱藏
-
-
關(guān)于表單中的設(shè)置默認(rèn)值：
? <input type="text" name="" value="今天心情不錯(cuò)" /> <input type="radio" name="" value="" checked="checked"> <input type="checkbox" name="" value="" checked="checked">
| ? | <select name="" > <option value=""></option> <option value="" selected="selected"></option> <select> |
-
textarea沒(méi)有默認(rèn)值
-
<label>標(biāo)簽的使用
-
<label></label>
- label?元素不會(huì)向用戶呈現(xiàn)任何特殊效果。
- 不過(guò)，它為鼠標(biāo)用戶改進(jìn)了可用性。
- 如果您在?label?元素內(nèi)點(diǎn)擊文本，就會(huì)觸發(fā)此控件。
- 就是說(shuō)，當(dāng)用戶選擇該標(biāo)簽時(shí)，瀏覽器就會(huì)自動(dòng)將焦點(diǎn)轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上。
-
<label>?標(biāo)簽的for?屬性應(yīng)當(dāng)與相關(guān)元素的?id屬性相同。
-
例子：（重要—注冊(cè)表單–用戶體驗(yàn)–必做）
? <p>單向選擇</p> <label for="male">男：</label><input type="radio" name="sex" id="male"/> <label for="nv">女：</label><input type="radio" name="sex"checked="check"/>
-
第七章 表單和表格(下)
- 表單和表格標(biāo)簽：
- <textarea>文本域標(biāo)簽
- <textarea>標(biāo)簽：
- <textarea></textarea>是文本域標(biāo)簽，可以在其中插入一段文字內(nèi)容，它有兩個(gè)常用屬性rows和cols
-
注意：
- rows表示這個(gè)文本域有多少行
- cols表示這個(gè)文本域有多少列
-
除了這兩個(gè)屬性它還有readonly（只讀，文本域的內(nèi)容無(wú)法改變，相當(dāng)于協(xié)議）和title（鼠標(biāo)放上提示）
-
<select>標(biāo)簽的掌握
- 注：當(dāng)提交表單時(shí)，瀏覽器會(huì)提交選定的項(xiàng)目，或者收集用逗號(hào)分隔的多個(gè)選項(xiàng)，將其合成一個(gè)單獨(dú)的參數(shù)列表，并且在將?<select>?表單數(shù)據(jù)提交給服務(wù)器時(shí)包括?name屬性
? <form> <select name="" id=""> <option value="1">1月</option> <option value="2">2月</option> </select> </form>
- 注：當(dāng)提交表單時(shí)，瀏覽器會(huì)提交選定的項(xiàng)目，或者收集用逗號(hào)分隔的多個(gè)選項(xiàng)，將其合成一個(gè)單獨(dú)的參數(shù)列表，并且在將?<select>?表單數(shù)據(jù)提交給服務(wù)器時(shí)包括?name屬性
-
常用到的屬性：disabled=“disabled” name="sel" size="2"
- <table>表格標(biāo)簽
-
<table>表格標(biāo)簽：<table>是表格標(biāo)簽，可以用它定義一個(gè)表格。
? <table border="1"> <tr> <td>姓名</td> <td>性別</td> </tr> </table> -
注意：<table>的border屬性不能少
-
<tr>?<td>標(biāo)簽的使用
-
<tr>行標(biāo)簽：
- <tr>可以定義表格中的一行，一個(gè)<tr></tr>表示一行。
-
| ? | <table border="1"> <tr> <td>姓名</td> <td>性別</td> </tr> <tr> <td>姓名</td> <td>性別</td> </tr> </table> |
-
<td>單元格標(biāo)簽:
- <td>可以定義表格中的一個(gè)單元格，<td></td>表示一個(gè)單元格。
? <table border="1"> <tr> <td >姓名</td> <td>性別</td> <td>愛(ài)好</td> </tr> </table>
- border-collapse?屬性設(shè)置是否將表格邊框折疊為單一邊框：
- border-collapse:collapse;
- colspan左右合并
- rowspan上下合并
- <td>可以定義表格中的一個(gè)單元格，<td></td>表示一個(gè)單元格。
第一部分總結(jié)：
- 非可視化標(biāo)簽：head?meta?style?scrpit...
- 可視化標(biāo)簽：img?div?span?a?ul?li…
- 只有可視化標(biāo)簽，才能用css改變它
- 單標(biāo)簽：meta?link?base?img?input?br?hr
-
雙標(biāo)簽：html?head?body?div?a?p?span?..ul?li?ol?dl?….
-
常用可視化標(biāo)簽
- div
- 一般用它來(lái)布局
- a?超鏈接標(biāo)簽
- href*屬性：設(shè)置跳轉(zhuǎn)的網(wǎng)頁(yè)地址
- target屬性：設(shè)置跳轉(zhuǎn)的目標(biāo)
- 結(jié)論：凡事頁(yè)面可以點(diǎn)擊跳轉(zhuǎn)或者表單提交的文字，都用a標(biāo)簽
- img
- src*屬性用來(lái)設(shè)置圖片的url數(shù)據(jù)
- alt提供給搜索引擎搜索的
- width
- height
- 結(jié)論 ：顯示圖片
- ul li
- 列表
- 結(jié)論：只要將來(lái)設(shè)計(jì)頁(yè)面中有固定樣式的列表，就用ul和li
- table?caption?tr?td (th)
- 慢慢已經(jīng)被淘汰了 被ul li代替
- 如果是合并豎排的就是合并行（rowspan）
- 如果是合并橫排的就是合并列（colspan）
- div
HTML部分導(dǎo)圖總結(jié)
- HTML5標(biāo)簽集合
第二部分 CSS
第八章 css基礎(chǔ)知識(shí)
- css基礎(chǔ)知識(shí)：
- css樣式表的定義
- css：（Cascading Style Sheets）層疊樣式表；
- 分類及位置：內(nèi)部樣式-head區(qū)域style標(biāo)簽里面
- 外部樣式-link調(diào)用
- 內(nèi)聯(lián)樣式-標(biāo)簽元素里面
- css內(nèi)的注釋：/*注釋內(nèi)容*/
-
css樣式表的語(yǔ)法
-
CSS規(guī)則由兩個(gè)主要的部分構(gòu)成：要添加樣式的盒子名或者標(biāo)簽名、和要添加的樣式。
-
盒子名或者標(biāo)簽名{屬性:值;}
-
CSS中幾種顏色的表示方法
- 用顏色名表示
- 有17個(gè)預(yù)先確定的顏色，它們是
- aqua,?black,?blue,?fuchsia,?gray,?green,?lime,?maroon,?navy,
olive,?orange,?purple,?red,?silver,?teal,?white, and?yellow
- aqua,?black,?blue,?fuchsia,?gray,?green,?lime,?maroon,?navy,
- 有17個(gè)預(yù)先確定的顏色，它們是
-
用十六進(jìn)制的顏色值表示(紅、綠、藍(lán))
- #FF0000或者#F00
-
用rgb(r,g,b)函數(shù)表示
- 如：rgb(255,255,0)
-
用hsl(Hue,Saturation,Lightness)函數(shù)表示（色調(diào)、飽和度、亮度)
- 如：hsl(120,100%,100%),色調(diào)0代表紅色，120代表綠色，240代表
藍(lán)色
- 如：hsl(120,100%,100%),色調(diào)0代表紅色，120代表綠色，240代表
-
用rgba(r,g,b,a)函數(shù)表示
- 其中a表示的是改顏色的透明度，取值范圍是0~1，其中0代表完全透明
-
用hsla(Hue,Saturation,Lightness,alpha)函數(shù)表示
- 色調(diào)、飽和度、亮度、透明度
- 例子
- 用顏色名表示
-
| ? | <div style="position:absolute;top:0px"> <div style="background-color:gray;">background-color:gray</div> <div style="background-color:#F00;">background-color:#F00</div> <div style="background-color:#ffff00;">background-color:#ffff00</div> <div style="background-color:rgb(255,0,255);">background-color:rgb(255,0,255)</div> <div style="background-color:hsl(120,80%,50%);">background-color:hsl(120,80%,50%)</div> <div style="background-color:rgba(255,0,255,0.5);">background-color:rgba(255,0,255,0.5)</div> <div style="background-color:hsla(120,80%,50%,0.5);">background-color:hsla(120,80%,50%,0.5)</div> </div> |
- 內(nèi)部樣式表
- 當(dāng)單個(gè)頁(yè)面需要設(shè)置樣式時(shí)，就應(yīng)該使用內(nèi)部樣式表。
- 使用?<style></style>標(biāo)簽在文檔<head></head>里面定義內(nèi)部樣式表
| ? | <head> <style type="text/css" > p{color:red;} </style> </head> |
- 從外部引入到樣式分為兩種：（注意寫(xiě)在head標(biāo)簽里面）
-
當(dāng)樣式需要應(yīng)用于很多頁(yè)面時(shí)，就需要用到外部樣式表，首先需要?jiǎng)?chuàng)建一個(gè)css文件，然后引用到我們的頁(yè)面中。
-
Link樣式表式：?<link rel=”stylesheet” type=”text/css” href=”my.css”(href表示路徑)>
-
Html式：?<style type="text/css">@import url("css.css");></style>
-
內(nèi)聯(lián)樣式表（優(yōu)先級(jí)高）
-
寫(xiě)在標(biāo)簽里面的樣式
-
如：<p style="color:red;"></p>
-
-
表示給p標(biāo)簽里面的文字顏色設(shè)置為紅色
-
區(qū)別：外鏈樣式與導(dǎo)入樣式
-
link標(biāo)簽是屬于xhtml范疇，而@import則是css2.1中特有的。link標(biāo)簽除了可以加載CSS外，還可以做很多其它的事情，比如定義RSS，定義rel連接屬性等，@import就只能加載CSS了。
-
加載的順序的區(qū)別，link加載的css時(shí)，是一種并行(沒(méi)有嘗試是否是這樣)加載CSS方式，而@impor則在整個(gè)頁(yè)面加載完成后才加載。
-
兼容性的區(qū)別，因@import``CSS2.1才特有的，所以對(duì)于不兼容CSS2.1的瀏覽器來(lái)說(shuō)，無(wú)效。
-
在樣式控制上(比如動(dòng)態(tài)改變網(wǎng)頁(yè)的布局時(shí),使用javascript操作DOM)的區(qū)別，此時(shí)@import就無(wú)能為力了。
-
- 樣式的優(yōu)先級(jí)補(bǔ)充
- 相同權(quán)值情況下，CSS樣式的優(yōu)先級(jí)總結(jié)來(lái)說(shuō)，就是——就近原則（離被設(shè)置元素越近優(yōu)先級(jí)別越高）：
- 內(nèi)聯(lián)樣式表（標(biāo)簽內(nèi)部）?>?嵌入樣式表（當(dāng)前文件中）>?外部樣式表（外部文件中）
- 相同權(quán)值情況下，CSS樣式的優(yōu)先級(jí)總結(jié)來(lái)說(shuō)，就是——就近原則（離被設(shè)置元素越近優(yōu)先級(jí)別越高）：
-
權(quán)值不同時(shí)，瀏覽器是根據(jù)權(quán)值來(lái)判斷使用哪種css樣式的，哪種樣式權(quán)值高就使用哪種樣式
-
層疊優(yōu)先級(jí)是:
- 瀏覽器缺省<?外部樣式表?<?內(nèi)部樣式表?<?內(nèi)聯(lián)樣式
- 其中樣式表又有:類選擇器?<?類派生選擇器<ID選擇器?<?ID派生選擇器
-
派生選擇器以前叫上下文選擇器，所以完整的層疊優(yōu)先級(jí)是:
- 瀏覽器缺省?<外部樣式表?<?外部樣式表類選擇器?<?外部樣式表類派生選擇器<?外部樣式表ID選擇器?<外部樣式表ID派生選擇器<?內(nèi)部樣式表?<?內(nèi)部樣式表類選擇器?<?內(nèi)部樣式表類派生選擇器?<?內(nèi)部樣式表ID選擇器?<內(nèi)部樣式表ID派生選擇器?<?內(nèi)聯(lián)樣式…共12個(gè)優(yōu)先級(jí)
-
另外，如果同一個(gè)元素在沒(méi)有其他樣式的作用影響下，其Class定義了多個(gè)并以空格分開(kāi)，其優(yōu)先級(jí)順序?yàn)?#xff1a;
- 一個(gè)元素同時(shí)應(yīng)用多個(gè)class，后定義的優(yōu)先（即近者優(yōu)先），加上!important者最優(yōu)先！
第九章 css選擇器(上)
- css選擇器：
- class類選擇器可以重復(fù)利用
- id選擇器唯一
- 標(biāo)簽選擇器
- 什么是選擇器：css選擇器就是要改變樣式的對(duì)象
-
選擇器{屬性:值;屬性:值;}
-
標(biāo)簽選擇器：頁(yè)面中所有的標(biāo)簽都是一個(gè)選擇器?p{color:red;}
-
ID選擇器
- 選擇id命名的元素 以?#?開(kāi)頭?#p1{color:#0f0;}
-
類選擇器
- class選擇器，選擇clas命名的元素 以.開(kāi)頭?.first{color:#00f;}
- css代碼寫(xiě)完后上線前要經(jīng)過(guò)壓縮處理
- 本地和服務(wù)器分兩個(gè)css版本（備份）
-
壓縮后注釋都清除，空間體積減少
-
群組選擇器
- 選擇多個(gè)元素,以逗號(hào)隔開(kāi)?#main,.first,span,a,h1{color:red;}
- 包含選擇器
- 選擇某元素的后代元素，也稱后代選擇器，父類與子類間以空格隔開(kāi)p
- span{color:red;}
- 選擇某元素的后代元素，也稱后代選擇器，父類與子類間以空格隔開(kāi)p
-
屬性選擇器
- 選擇包含某一屬性的元素
- a[title]{color:red;}?選擇包含title的a標(biāo)簽
- a[title][href]{color:red;}?選擇包含title和href的a標(biāo)簽
-
>?+?選擇器子類選擇器：只選擇子元素（只選擇兒子）（相當(dāng)于包含元素）
- p > span{color:red;}
- 相鄰兄弟選擇器：只選擇后面的相鄰兄弟元素
- p + span{color:red;}
第十章 css選擇器(下)
- <a>偽類選擇器
- a:link {color:#FF0000;}?/?未訪問(wèn)的鏈接?/ （只用于a標(biāo)簽）
- a:visited {color:#00FF00;}?/?已訪問(wèn)的鏈接?/ （只用于a標(biāo)簽）
- a:hover {color:#FF00FF;}/* 鼠標(biāo)移動(dòng)到鏈接上
- */（可和其他標(biāo)簽結(jié)合一起用）
- a:active {color:#0000FF;}?/?選定的鏈接?/
- 注意
- 偽類選擇器的排序很重要，a:link?a:visited?a:hover?a:active，記作lvha
-
輸入偽類選擇器（針對(duì)表單）
- input:focus{color:red;}?/?鍵盤(pán)輸入焦點(diǎn)?/
-
其他偽類選擇器
- p:first-child{color:red;}?/* 第一個(gè)p */
- :before?在元素之前添加內(nèi)容。
- :after?在元素之后添加內(nèi)容。
-
css優(yōu)先規(guī)則
- 內(nèi)聯(lián)樣式表->?ID?選擇器—>?Class?類選擇器->標(biāo)簽選擇器
第十一章 背景屬性
-
背景屬性：
-
背景的添加 ：
-
背景顏色的添加:
- background:red;
- backgronnd-color:red;
-
背景圖片的添加：
- background:url(“images/1.jpg”);
- backgronnd-image:url(“images/1.jpg”);
- 背景的平鋪
- 什么是平鋪？平鋪就是圖片是否重復(fù)出現(xiàn)
- 不平鋪：background-repeat:no-repeat;
- 水平方向平鋪：background-repeat:repeat-x;
- 垂直方向平鋪：background-repeat:repeat-y;
- 完全平鋪：默認(rèn)為完全平鋪
- 背景圖片的定位
- 背景圖片的定位就是可以設(shè)置顯示背景圖片的位置，通過(guò)屬性background-position來(lái)實(shí)現(xiàn)
- background-position的取值可為英文單詞或者數(shù)值和百分值。
- background-positon的英文單詞取值
- top left
- top center
- top right
- center left
- center center
- center right
- bottom left
- bottom center
- ottom right
- background-positon的數(shù)值取值
- background-position:x y;
- positon的百分值取值
- background-position:x% y%;
-
背景圖片的大小
- 背景圖片的大小可以通過(guò)屬性background-size來(lái)設(shè)置background-size的取值可為數(shù)值和百分值。
-
background-size的數(shù)值取值
- background-size:x y;
-
background-size的數(shù)值取值
- background-size:x% y%;
-
背景圖片的滾動(dòng)
-
背景圖片是否隨著內(nèi)容的滾動(dòng)而滾動(dòng)由background-attachment設(shè)置
-
background-attachment:fixed;?固定，不隨內(nèi)容的滾動(dòng)而滾動(dòng)
- background-attachment:scroll;?滾動(dòng)，隨內(nèi)容的滾動(dòng)而滾動(dòng)
-
-
第十二章 文字文本屬性
-
css文字文本屬性：
-
文字屬性
- color:red;?文字顏色
- font-size:12px; 文字大小
- font-weight:“bold”?文字粗細(xì)(bold/normal)
- font-family:“宋體”?文字字體
- font-variant:small-caps小寫(xiě)字母以大寫(xiě)字母顯示
-
-
文本屬性
- text-align:center;?文本對(duì)齊(right/left/center)
- line-height:10px;?行間距(可通過(guò)它實(shí)現(xiàn)文本的垂直居中)
- text-indent:20px;?首行縮進(jìn)
- text-decoration:none;
- 文本線(none/underline/overline/line-through)
- letter-spacing: 字間距
第十三章 盒子模型
- 盒子模型
- 盒子模型就是一個(gè)有高度和寬度的矩形區(qū)域
- 所有html標(biāo)簽都是盒子模型
- div標(biāo)簽自定義盒子模型
-
所有的標(biāo)簽都是盒子模型
- class和id的主要差別是：class用于元素組（類似的元素，或者可以理解為某一類元素），而id用于標(biāo)識(shí)單獨(dú)的唯一的元素。
-
盒子模型的組成
- 盒子模型組成部分：
- 自身內(nèi)容：width、height?寬高
- 內(nèi)邊距：?padding
- 盒子邊框：?border?邊框線
- 與其他盒子距離：?margin外邊距
- 內(nèi)容+內(nèi)邊距+邊框+外邊距=面積
- 盒子模型組成部分：
-
border?邊框
- 常見(jiàn)寫(xiě)法?border:1px solid #f00;
-
單獨(dú)屬性：
- border-width:
- border-style:
- dotted?點(diǎn)狀虛線
- dashed（虛線）
- solid（實(shí)線）
- double（雙實(shí)線）
- border-color?(顏色)
-
padding?內(nèi)邊距
-
值：像素/厘米等長(zhǎng)度單位、百分比
- padding:10px;?上下左右
- padding:10px 10px;?上下 左右
- padding:10px 10px 10px;?上 左右 下
- padding:10px 10px 10px 10px;?上 右 下 左（設(shè)置4個(gè)點(diǎn)–>順時(shí)針?lè)较?#xff09;
-
-
單獨(dú)屬性：
- padding-top:
- padding-right:
- padding-bottom:
- padding-left:
-
當(dāng)設(shè)置內(nèi)邊距的時(shí)候會(huì)把盒子撐大，為了保持盒子原來(lái)的大小，應(yīng)該高度和寬度進(jìn)行減小，根據(jù)width和height減小
-
margin 外邊距
-
值：與padding相同
-
單獨(dú)屬性：與padding相同
-
-
外邊距合并：兩個(gè)盒子同時(shí)設(shè)置了外邊距，會(huì)進(jìn)行一個(gè)外邊距合并
補(bǔ)充盒子模型內(nèi)容
-
標(biāo)準(zhǔn)盒子模型
- 盒子模型是css中一個(gè)重要的概念，理解了盒子模型才能更好的排版。其實(shí)盒子模型有兩種，分別是?ie盒子模型和標(biāo)準(zhǔn)?w3c?盒子模型。他們對(duì)盒子模型的解釋各不相同，先來(lái)看看我們熟知的標(biāo)準(zhǔn)盒子模型
-
從上圖可以看到標(biāo)準(zhǔn)?w3c?盒子模型的范圍包括?margin、border、padding、content，并且?content部分不包含其他部分
-
IE盒子模型
- 從上圖可以看到?ie盒子模型的范圍也包括?margin、border、padding、content
-
和標(biāo)準(zhǔn)?w3c?盒子模型不同的是：ie?盒子模型的?content?部分包含了?border和?padding
-
IE盒子模型width?=?padding+border+內(nèi)容
-
標(biāo)準(zhǔn)盒子模型 = 內(nèi)容的寬度（不包含border+padding）
-
例：
- 一個(gè)盒子的?margin為 20px，border?為 1px，padding為 10px，content?的寬為 200px、高為 50px，假如用標(biāo)準(zhǔn)w3c?盒子模型解釋，那么這個(gè)盒子需要占據(jù)的位置為：寬?20*2+1*2+10*2+200=262px、高?20*2+1*2*10*2+50=112px，盒子的實(shí)際大小為：寬?1*2+10*2+200=222px、高?1*2+10*2+50=72px；假如用ie 盒子模型，那么這個(gè)盒子需要占據(jù)的位置為：寬?20*2+200=240px、高?20*2+50=70px，盒子的實(shí)際大小為：寬?200px、高?50px
-
那應(yīng)該選擇哪中盒子模型呢？當(dāng)然是“標(biāo)準(zhǔn)?w3c?盒子模型”了。怎么樣才算是選擇了“標(biāo)準(zhǔn)?w3c盒子模型”呢？很簡(jiǎn)單，就是在網(wǎng)頁(yè)的頂部加上?doctype?聲明。
- 假如不加doctype?聲明，那么各個(gè)瀏覽器會(huì)根據(jù)自己的行為去理解網(wǎng)頁(yè)，即?ie瀏覽器會(huì)采用?ie?盒子模型去解釋你的盒子，而?ff會(huì)采用標(biāo)準(zhǔn)w3c?盒子模型解釋你的盒子，所以網(wǎng)頁(yè)在不同的瀏覽器中就顯示的不一樣了。
- 反之，假如加上了?doctype?聲明，那么所有瀏覽器都會(huì)采用標(biāo)準(zhǔn)?w3c盒子模型去解釋你的盒子，網(wǎng)頁(yè)就能在各個(gè)瀏覽器中顯示一致了。
- 用?jquery?做的例子來(lái)證實(shí)一下
| ? | <html> <head> <title>你用的盒子模型是？</title> <script language="javascript" src="jquery.min.js"></script> <script language="javascript"> var sbox = $.boxmodel ? "標(biāo)準(zhǔn)w3c":"ie"; document.write("您的頁(yè)面目前支持："+sbox+"盒子模型"); </script> </head> <body> </body> </html> |
- 上面的代碼沒(méi)有加上?doctype?聲明，在?ie?瀏覽器中顯示?ie盒子模型，在 ff 瀏覽器中顯示“標(biāo)準(zhǔn)w3c?盒子模型”。
| ? | <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html> <head> <title>你用的盒子模型是標(biāo)準(zhǔn)w3c盒子模型</title> <script language="javascript" src="jquery.min.js"></script> <script language="javascript"> var sbox = $.boxmodel ? "標(biāo)準(zhǔn)w3c":"ie"; document.write("您的頁(yè)面目前支持："+sbox+"盒子模型"); </script> </head> <body> </body> </html> |
- 代碼2 與代碼1 唯一的不同的就是頂部加了?doctype聲明。在所有瀏覽器中都顯示“標(biāo)準(zhǔn)?w3c盒子模型”
-
所以為了讓網(wǎng)頁(yè)能兼容各個(gè)瀏覽器，讓我們用標(biāo)準(zhǔn)?w3c?盒子模型
-
擴(kuò)展
- 學(xué)會(huì)使用box-sizing布局
第十四章 塊元素、行元素與溢出
- 基本概念
- 塊級(jí)元素：默認(rèn)情況下獨(dú)占一行的元素，可控制寬高、上下邊距；
- 行內(nèi)元素：默認(rèn)情況下一行可以擺放多個(gè)的元素，不可控制寬高和上下邊距
-
行塊轉(zhuǎn)換
- display:none; 不顯示
- display:block; 變成塊級(jí)元素
- display:inline; 變成行級(jí)元素
- display:inline-block; 以塊級(jí)元素樣式展示，以行級(jí)元素樣式排列
-
溢出
- overflow:hidden; 溢出隱藏
- overflow:scroll; 內(nèi)容會(huì)被修剪，瀏覽器會(huì)顯示滾動(dòng)條
- overflow:auto; 如果內(nèi)容被修剪，則產(chǎn)生滾動(dòng)條
-
文本不換行：white-space:nowrap;
- 長(zhǎng)單詞換行：word-wrap:break-word;
-
行內(nèi)元素和快級(jí)元素小結(jié)
-
一、塊級(jí)元素：block element
- 每個(gè)塊級(jí)元素默認(rèn)占一行高度，一行內(nèi)添加一個(gè)塊級(jí)元素后無(wú)法一般無(wú)法添加其他元素（float浮動(dòng)后除外）。兩個(gè)塊級(jí)元素連續(xù)編輯時(shí)，會(huì)在頁(yè)面自動(dòng)換行顯示。塊級(jí)元素一般可嵌套塊級(jí)元素或行內(nèi)元素；
-
塊級(jí)元素一般作為容器出現(xiàn)，用來(lái)組織結(jié)構(gòu)，但并不全是如此。有些塊級(jí)元素，如只能包含塊級(jí)元素。
-
DIV?是最常用的塊級(jí)元素，元素樣式的display:block都是塊級(jí)元素。它們總是以一個(gè)塊的形式表現(xiàn)出來(lái)，并且跟同級(jí)的兄弟塊依次豎直排列，左右撐滿。
-
二、行內(nèi)元素：inline element
- 也叫內(nèi)聯(lián)元素、內(nèi)嵌元素等；行內(nèi)元素一般都是基于語(yǔ)義級(jí)(semantic)的基本元素，只能容納文本或其他內(nèi)聯(lián)元素，常見(jiàn)內(nèi)聯(lián)元素 “a”。比如?SPAN元素，IFRAME元素和元素樣式的display : inline的都是行內(nèi)元素。例如文字這類元素，各個(gè)字母 之間橫向排列，到最右端自動(dòng)折行。
-
三、block（塊）元素的特點(diǎn):
- ①、總是在新行上開(kāi)始；
- ②、高度，行高以及外邊距和內(nèi)邊距都可控制；
- ③、寬度缺省是它的容器的100%，除非設(shè)定一個(gè)寬度。
- ④、它可以容納內(nèi)聯(lián)元素和其他塊元素
-
四、inline元素的特點(diǎn)
- ①、和其他元素都在一行上；
- ②、高，行高及外邊距和內(nèi)邊距不可改變；
- ③、寬度就是它的文字或圖片的寬度，不可改變
- ④、內(nèi)聯(lián)元素只能容納文本或者其他內(nèi)聯(lián)元素
-
對(duì)行內(nèi)元素，需要注意如下:
- 設(shè)置寬度width?無(wú)效。 設(shè)置高度height無(wú)效，可以通過(guò)line-height來(lái)設(shè)置。 設(shè)置margin
- 只有左右margin有效，上下無(wú)效。
- 設(shè)置padding只有左右padding有效，上下則無(wú)效。注意元素范圍是增大了，但是對(duì)元素周?chē)膬?nèi)容是沒(méi)影響的。
-
五、常見(jiàn)的塊狀元素
- address?– 地址
- blockquote?– 塊引用
- center?– 舉中對(duì)齊塊
- dir?– 目錄列表
- div?– 常用塊級(jí)容易，也是CSS layout的主要標(biāo)簽
- dl?– 定義列表
- fieldset?–?form控制組
- form?– 交互表單
- h1?– 大標(biāo)題
- h2?– 副標(biāo)題
- h3?– 3級(jí)標(biāo)題
- h4?– 4級(jí)標(biāo)題
- h5?– 5級(jí)標(biāo)題
- h6?– 6級(jí)標(biāo)題
- hr?– 水平分隔線
- isindex?–?input prompt
- menu?– 菜單列表
- noframes?–?frames可選內(nèi)容，（對(duì)于不支持frame的瀏覽器顯示此區(qū)塊內(nèi)容
- noscript?– 可選腳本內(nèi)容（對(duì)于不支持script的瀏覽器顯示此內(nèi)容）
- ol?– 有序表單
- p?– 段落
- pre?– 格式化文本
- table?– 表格
- ul?– 無(wú)序列表
-
六、常見(jiàn)的內(nèi)聯(lián)元素
- a?– 錨點(diǎn)
- abbr?– 縮寫(xiě)
- acronym?– 首字
- b?– 粗體(不推薦)
- bdo?–?bidi override
- big?– 大字體
- br?– 換行
- cite?– 引用
- code?– 計(jì)算機(jī)代碼(在引用源碼的時(shí)候需要)
- dfn?– 定義字段
- em?– 強(qiáng)調(diào)
- font?– 字體設(shè)定(不推薦)
- i?– 斜體
- img?– 圖片
- input?– 輸入框
- kbd?– 定義鍵盤(pán)文本
- label?– 表格標(biāo)簽
- q?– 短引用
- s?– 中劃線(不推薦)
- samp?– 定義范例計(jì)算機(jī)代碼
- select?– 項(xiàng)目選擇
- small?– 小字體文本
- span?– 常用內(nèi)聯(lián)容器，定義文本內(nèi)區(qū)塊
- strike?– 中劃線
- strong?– 粗體強(qiáng)調(diào)
- sub?– 下標(biāo)
- sup?– 上標(biāo)
- textarea?– 多行文本輸入框
- tt?– 電傳文本
- u?– 下劃線
-
七，可變?cè)?/strong>
- 可變?cè)貫楦鶕?jù)上下文語(yǔ)境決定該元素為塊元素或者內(nèi)聯(lián)元素。
- applet?-?java applet
- button?- 按鈕
- del- 刪除文本
- iframe?-?inline frame
- ins?- 插入的文本
- map?- 圖片區(qū)塊(map)
- object?-?object對(duì)象
- script?- 客戶端腳本
-
八、行內(nèi)元素與塊級(jí)元素有什么不同
-
區(qū)別一：
- 塊級(jí)：塊級(jí)元素會(huì)獨(dú)占一行，默認(rèn)情況下寬度自動(dòng)填滿其父元素寬度
- 行內(nèi)：行內(nèi)元素不會(huì)獨(dú)占一行，相鄰的行內(nèi)元素會(huì)排在同一行。其寬度隨內(nèi)容的變化而變化。
-
區(qū)別二：
- 塊級(jí)：塊級(jí)元素可以設(shè)置寬高
- 行內(nèi)：行內(nèi)元素不可以設(shè)置寬高
-
區(qū)別三：
- 塊級(jí)：塊級(jí)元素可以設(shè)置margin，padding
- 行內(nèi)：行內(nèi)元素水平方向的margin-left;?margin-right;
-
padding-left;?padding-right;可以生效。但是豎直方向的margin-bottom;?margin-top;?padding-top;padding-bottom;卻不能生效。
-
區(qū)別四：
- 塊級(jí)：display:block;
- 行內(nèi)：display:inline;
-
-
替換元素有如下：（和img一樣的設(shè)置方法）
- <img>、<input>、<textarea>、<select>
- <object>都是替換元素，這些元素都沒(méi)有實(shí)際的內(nèi)容
-
- 可以通過(guò)修改display屬性來(lái)切換塊級(jí)元素和行內(nèi)元素
第十五章 定位
-
static靜態(tài)定位（不對(duì)它的位置進(jìn)行改變，在哪里就在那里）
- 默認(rèn)值。沒(méi)有定位，元素出現(xiàn)在正常的流中（忽略?top,bottom,?left, right?或者?z-index?聲明）。
-
fixed固定定位（參照物–瀏覽器窗口）—做 彈窗廣告用到
- 生成固定定位的元素，相對(duì)于瀏覽器窗口進(jìn)行定位。 元素的位置通過(guò)?"left",?"top",?"right"以及?"bottom"屬性進(jìn)行規(guī)定。
-
relative（相對(duì)定位 ）（參照物以他本身）
- 生成相對(duì)定位的元素，相對(duì)于其正常位置進(jìn)行定位。
-
absolute（絕對(duì)定位）(除了static都可以，找到參照物–>與它最近的已經(jīng)有定位的父元素進(jìn)行定位)
- 生成絕對(duì)定位的元素，相對(duì)于?static?定位以外的第一個(gè)父元素進(jìn)行定位。
- 元素的位置通過(guò) “l(fā)eft",?"top",?"right"?以及?"bottom"?屬性進(jìn)行規(guī)定
-
z-index
- z-index?屬性設(shè)置元素的堆疊順序。擁有更高堆疊順序的元素總是會(huì)處于堆疊順序較低的元素的前面。
- 定位的基本思想: 它允許你定義元素框相對(duì)于其正常位置應(yīng)該出現(xiàn)的位置，或者相對(duì)于父元素、另一個(gè)元素甚至瀏覽器窗口本身的位置。
-
一切皆為框
- 塊級(jí)元素:?div、h1或p元素 即：顯示為一塊內(nèi)容稱之為 “塊框“ ;
- 行內(nèi)元素:?span,strong,a等元素 即：內(nèi)容顯示在行中稱 “行內(nèi)框”;
- 使用display屬性改變成框的類型 即：display:block; 讓行內(nèi)元素設(shè)置為塊級(jí)元素，display:none;?沒(méi)有框
-
相對(duì)定位：
- 如果對(duì)一個(gè)元素進(jìn)行相對(duì)定位，它將出現(xiàn)在它所在的位置上。
- 通過(guò)設(shè)置垂直或水平位置，讓這個(gè)元素“相對(duì)于”它的起點(diǎn)進(jìn)行移動(dòng)
- .adv_relative { position: relative; left: 30px; top: 20px; }
-
絕對(duì)定位：
- 元素的位置相對(duì)于最近的已定位祖先元素，如果元素沒(méi)有已定位 的祖先元素，它的位置相對(duì)于最初的包含塊。.adv_absolute { position: absolute; left: 30px; top: 20px; }
第十六章 框架
- frameset框架：
- <frameset>?—- 用來(lái)定義一個(gè)框架；雙標(biāo)簽
不能和?<body>?一起使用
- <frameset>?—- 用來(lái)定義一個(gè)框架；雙標(biāo)簽
-
rows、cols屬性
- rows?定義行表示框架有多少行（取值?px/%/?*?）
- cols?定義列表示框架有多少列（取值px/?%/?*?）
-
frame子框架
-
<frame> —- 表示框架中的某一個(gè)部分；單標(biāo)簽，要跟結(jié)束標(biāo)志
- src?顯示的網(wǎng)頁(yè)的路徑
- name?框架名
- frameborder?邊框線（取值 0 / 1）
-
<noframes>屬性
-
<noframes> 提供不支持框架的瀏覽器顯示body的內(nèi)容；雙標(biāo)簽
-
| ? | <frameset> <frame src=“” /> <frame src=“” /> <frame src=“” /> <noframes> <body>內(nèi)容</body> </noframes> </frameset> |
- <iframe>內(nèi)聯(lián)框架
- iframe元素會(huì)創(chuàng)建包含另外一個(gè)文檔的內(nèi)聯(lián)框架（即行內(nèi)框架）
- 允許和?body?一起使用
- width?寬（取值 px / %）
- height?高（取值 px / %）
- name?框架名
- frameborder?邊框線（取值 0 / 1）
- src?顯示的網(wǎng)頁(yè)的路徑
第十七章 css高級(jí)屬性
- opacity透明屬性
- opacity
- 對(duì)于IE6/7/，使用filter:alpha(opacity:值;) 值為0-100
- 對(duì)于Webkit，Opera，Firefox，IE9+，使用opacity:值; 值為0-1
- 對(duì)于早期火狐，使用-moz-opacity:值; 值為0-1
- 所以寫(xiě)透明屬性時(shí)，一般寫(xiě)法是
- opacity
| ? | { opacity:0.5; filter:alpha(opacity：50);/*0-100*/ -moz-opacity:0.5; /*取值0-1*/-->針對(duì)早起版本的火狐兼容問(wèn)題的解決 } |
-
border-radius圓角邊框?qū)傩?/p>
- 向?div?元素添加圓角邊框
- border-radius:10px;
- 向?div?元素添加圓角邊框
-
box-shadow陰影屬性
-
box-shadow屬性向框添加陰影效果,后面跟4個(gè)參數(shù)。
-
box-shadow:0px 0px 10px #000;
-
-
<embed>屬性
-
是HTML5中新增的標(biāo)簽,媒體嵌入插件標(biāo)簽，可以通過(guò)<embed>插入音頻或視頻
-
<embed src=“media/music.mp3” />
-
格式.mid?.wav?.mp3等
-
- CSS部分導(dǎo)圖總結(jié)
- 原文件下載地址?訪問(wèn)密碼 342a
第三部分 附錄
附錄一 DIV命名規(guī)范
-
企業(yè)DIV使用頻率高的命名方法
-
網(wǎng)頁(yè)內(nèi)容類
-
標(biāo)題:?title
- 摘要:?summary
- 箭頭：?arrow
- 商標(biāo)：?label
- 網(wǎng)站標(biāo)志：?logo
- 轉(zhuǎn)角/圓角：corner
- 橫幅廣告：?banner
- 子菜單：?subMenu
- 搜索：?search
- 搜索框：?searchBox
- 登錄：?login
- 登錄條：loginbar
- 工具條：?toolbar
- 下拉：?drop
- 標(biāo)簽頁(yè)：?tab
- 當(dāng)前的：?current
- 列表：?list
- 滾動(dòng)：?scroll
- 服務(wù)：?service
- 提示信息：?msg
- 熱點(diǎn)：hot
- 新聞：?news
- 小技巧：?tips
- 下載：?download
- 欄目標(biāo)題：?title
- 熱點(diǎn)：?hot
- 加入：joinus
- 注冊(cè)：?regsiter
- 指南：?guide
- 友情鏈接：?friendlink
- 狀態(tài)：?status
- 版權(quán)：?copyright
- 按鈕：?btn
- 合作伙伴：?partner
- 投票：?vote
- 左右中：left?right?center
- 注釋的寫(xiě)法:?/* Footer */?內(nèi)容區(qū)/* End Footer */
-
-
id的命名:
-
頁(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?center
-
導(dǎo)航
- 導(dǎo)航：nav
- 主導(dǎo)航：mainbav
- 子導(dǎo)航：subnav
- 頂導(dǎo)航：topnav
- 邊導(dǎo)航：sidebar
- 左導(dǎo)航：leftsidebar
- 右導(dǎo)航：rightsidebar
- 菜單：menu
- 子菜單：submenu
- 標(biāo)題:?title
- 摘要:?summary
-
功能
- 標(biāo)志：logo
- 廣告：banner
- 登陸：login
- 登錄條：loginbar
- 注冊(cè)：regsiter
- 搜索：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
-
class的命名:
-
顏色:使用顏色的名稱或者16進(jìn)制代碼,如
- .red { color: red; }
- .f60 { color: #f60; }
- .ff8600 { color: #ff8600; }
-
字體大小,直接使用”font+字體大小”作為名稱,如
- .font12px { font-size: 12px; }
- .font9px {font-size: 9pt; }
-
對(duì)齊樣式,使用對(duì)齊目標(biāo)的英文名稱,如
- .left { float:left; }
- .bottom { float:bottom; }
-
標(biāo)題欄樣式,使用”類別+功能”的方式命名,如
- .barnews { }
- .barproduct { }
-
注意事項(xiàng)::
- 一律小寫(xiě);
- 盡量用英文;
- 不加中杠和下劃線;
- 盡量不縮寫(xiě)，除非一看就明白的單詞.
-
-
-
推薦的?CSS?書(shū)寫(xiě)順序：
-
顯示屬性
- display
- list-style
- position
- float
- clear
-
自身屬性
- width
- height
- margin
- padding
- border
- background
-
文本屬性
- color
- font
- text-decoration
- text-align
- vertical-align
- white-space
- other text
- content
-
附錄二 CSS精靈
- CSS精靈原理以及應(yīng)用
- CSS雪碧的基本原理是把你的網(wǎng)站上用到的一些圖片整合到一張單獨(dú)的圖片中，從而減少你的網(wǎng)站的HTTP請(qǐng)求數(shù)量。
- 該圖片使用CSS?background和background-position屬性渲染，這也就意味著你的標(biāo)簽變得更加復(fù)雜了，圖片是在CSS中定義，而非<img>標(biāo)簽。
- CSS雪碧的基本原理是把你的網(wǎng)站上用到的一些圖片整合到一張單獨(dú)的圖片中，從而減少你的網(wǎng)站的HTTP請(qǐng)求數(shù)量。
- 一個(gè)簡(jiǎn)單的例子：
- 一張圖片作出一個(gè)按鈕的三個(gè)狀態(tài)
- 一個(gè)鏈接用CSS做成按鈕的樣式，我們可以使用同一張圖片，完成按鈕的三個(gè)狀態(tài)，a:link，a:hover，a:active<a class="button" href="#">鏈接</a>
- 加入右側(cè)的圖片為：200px 65px的三個(gè)按鈕圖拼合而成的圖片button.png，從上到下一次為按鈕的普通、鼠標(biāo)滑過(guò)、鼠標(biāo)點(diǎn)擊的狀態(tài)。則可以使用CSS進(jìn)行定義。
| ? | a { display:block; width:200px; height:65px; line-height:65px; /*定義狀態(tài)*/ text-indent:-2015px; /*隱藏文字*/ background-image:url(button.png); /*定義背景圖片*/ background-position:0 0; /*定義鏈接的普通狀態(tài)，此時(shí)圖像顯示的是頂上的部分*/ } a:hover { background-position:0 -66px; /*定義鏈接的滑過(guò)狀態(tài)，此時(shí)顯示的為中間部分，向下取負(fù)值*/ } a:active { background-position:0 -132px; /*定 義鏈接的普通狀態(tài)，此時(shí)顯示的是底部的部分，向下取負(fù)值*/ } |
- 更多的CSS雪碧，圖片更復(fù)雜，背景定位更精確。可能會(huì)用到大量的數(shù)值
- 如：background:url(nav.png) -180px 24pxno-repeat; 來(lái)達(dá)到更精確的定位
- 優(yōu)點(diǎn)：
- 減少加載網(wǎng)頁(yè)圖片時(shí)對(duì)服務(wù)器的請(qǐng)求次數(shù)
- 可以合并多數(shù)背景圖片和小圖標(biāo)，方便在任何位置使用，這樣不同位置的請(qǐng)求只需要調(diào)用一個(gè)圖片，從而減少對(duì)服務(wù)器的請(qǐng)求次數(shù)，降低服務(wù)器壓力，同時(shí)提高了頁(yè)面的加載速度，節(jié)約服務(wù)器的流量。
- 提高頁(yè)面的加載速度
- sprite技術(shù)的其中一個(gè)好處是圖片的加載時(shí)間(在有許多?sprite?時(shí)，單張圖片的加載時(shí)間)。由所需圖片拼成的一張GIF圖片的尺寸會(huì)明顯小于所有圖片拼合前的大小。單張的?GIF只有相關(guān)的一個(gè)色表，而單獨(dú)分割的每一張?GIF?都有自己的一個(gè)色表，這就增加了總體的大小。因此，單獨(dú)的一張?JPEG?或者?PNG?sprite?在大小上非常可能比把一張圖分成多張得來(lái)的圖片總尺寸小。
- 減少鼠標(biāo)滑過(guò)的一些bug
- IE6不會(huì)主動(dòng)預(yù)加載鼠標(biāo)滑過(guò)即a:hover中的背景圖片，所以，如果使用多張圖片，鼠標(biāo)滑過(guò)會(huì)出現(xiàn)閃白的現(xiàn)象。使用CSS雪碧，由于一張圖片即可，所以不會(huì)出現(xiàn)這種現(xiàn)象。
- 不足：
- CSS雪碧的最大問(wèn)題是內(nèi)存使用
- 影響瀏覽器的縮放功能
- 拼圖維護(hù)比較麻煩
- 使CSS的編寫(xiě)變得困難
- CSS?雪碧調(diào)用的圖片不能被打印
- 錯(cuò)誤得使用?Sprites?影響可訪問(wèn)性
附錄三 部分工具資源
- Sublime專題
- Sublime常用插件總結(jié)
- Front-End -Develop -Tools
- ToolsBox-自己整理的一份工具列表
附錄四 編碼規(guī)范
- 編碼規(guī)范
- web develop standard
- Web 前端開(kāi)發(fā)規(guī)范文檔
附錄五 前端學(xué)習(xí)資源
- Github上前端學(xué)習(xí)資源匯總
- WEB 前端開(kāi)發(fā)學(xué)習(xí)筆記
- 前程開(kāi)發(fā)工具箱
其他
- 本文Mardown原文件-歡迎轉(zhuǎn)載
第一部分 HTML
第一章 職業(yè)規(guī)劃和前景
職業(yè)方向規(guī)劃定位：
web前端開(kāi)發(fā)工程師web網(wǎng)站架構(gòu)師自己創(chuàng)業(yè)轉(zhuǎn)崗管理或其他web前端開(kāi)發(fā)的前景展望：
未來(lái)IT行業(yè)企業(yè)需求最多的人才結(jié)合最新的html5搶占移動(dòng)端的市場(chǎng)自己創(chuàng)業(yè)做老板隨著互聯(lián)網(wǎng)的普及web開(kāi)發(fā)成為企業(yè)的寵兒和核心web職業(yè)發(fā)展目標(biāo)：
第一、梳理知識(shí)架構(gòu)
負(fù)責(zé)內(nèi)容的HTML負(fù)責(zé)外觀的css（層疊樣式表）負(fù)責(zé)行為的jsps切圖第二、分解目標(biāo)（起步階段、提升階段、成型階段）
起步階段：
基本知識(shí)的掌握常用工具的掌握溝通技巧的掌握（圍繞客戶的需求）良好的開(kāi)發(fā)習(xí)慣（加注釋、對(duì)齊方式）提升階段：
熟悉掌握HTML基本標(biāo)簽和屬性熟練掌握css的基本語(yǔ)法和使用瀏覽器兼容和w3c標(biāo)準(zhǔn)的掌握結(jié)合html+css+js開(kāi)始系統(tǒng)項(xiàng)目的開(kāi)發(fā)成型階段：
精通DIV+CCS布局精通css樣式表控制html標(biāo)簽熟悉運(yùn)用js制作動(dòng)態(tài)網(wǎng)站的效果能獨(dú)立開(kāi)發(fā)完成網(wǎng)站第二章 html基本結(jié)構(gòu)
認(rèn)識(shí)HTML：
html不是一種編程語(yǔ)言，是一種標(biāo)志語(yǔ)言標(biāo)記語(yǔ)言是由一套標(biāo)識(shí)標(biāo)簽組成的html使用標(biāo)簽來(lái)描述網(wǎng)頁(yè)html結(jié)構(gòu)：
<html>? ? <head></head>? ? <body></body></html>不成對(duì)出現(xiàn)的標(biāo)簽<br> <hr> <meta> <img> <input..> <option..> <link>HTML 基本標(biāo)簽的講解：
<html> <head> <body>標(biāo)簽<h1>—-<h6>僅僅用于標(biāo)題文本，不要為了產(chǎn)生粗體文本使用它們<p>標(biāo)簽 段落標(biāo)簽<strong><b>標(biāo)簽
都會(huì)讓文字產(chǎn)生加粗效果
<strong>用于強(qiáng)調(diào)文本，強(qiáng)度更深，表示重要文本—>用于SEO優(yōu)化<b>只是視覺(jué)加粗效果—>單純?yōu)榱水a(chǎn)生加粗<em> <i>標(biāo)簽em用于強(qiáng)調(diào)文本i只是視覺(jué)斜體效果<strong>比<em>強(qiáng)調(diào)更強(qiáng)特殊符號(hào)： —->空格> —>大于號(hào)<；—>小于號(hào)"；—>引號(hào)©–>版權(quán)號(hào)第三章 html基本標(biāo)簽
HTMl基本標(biāo)簽：
span標(biāo)簽對(duì)被用來(lái)組合文檔中的行內(nèi)元素注意：span沒(méi)有固定的格式表現(xiàn)，當(dāng)對(duì)它應(yīng)用樣式時(shí)，才會(huì)產(chǎn)生視覺(jué)上的變化<pre>標(biāo)簽文字的格式按源碼的排版來(lái)顯示，我們稱之為預(yù)處理格式<a>標(biāo)簽—>他有一個(gè)必不可少的屬性 href
target屬性：_self(在原來(lái)頁(yè)面打開(kāi))_blank（新窗口打開(kāi)）_top（打開(kāi)時(shí)忽略所有的框架）_parent（在父窗口中打開(kāi)）創(chuàng)建錨點(diǎn)和錨鏈接
錨點(diǎn)也是一種超鏈接，是頁(yè)面內(nèi)進(jìn)行跳轉(zhuǎn)的超鏈接第一步：創(chuàng)建錨點(diǎn) <a name="錨點(diǎn)名稱"></a>第二步：使用創(chuàng)建好的錨點(diǎn)名稱 <a href="#錨點(diǎn)名稱">內(nèi)容</a>marquee標(biāo)簽可以創(chuàng)建一個(gè)內(nèi)容滾動(dòng)效果<marquee direction="down" loop="4" οnmοuseοver=this.stop() οnmοuseοut=this.start()></marquee>direction 表示滾動(dòng)方向，取值有（left,right,up,down,默認(rèn)left）loop表示滾動(dòng)循環(huán)的次數(shù)，默認(rèn)為無(wú)限循環(huán)οnmοuseοver=this.stop() ?οnmοuseοver=this.start() ?scrollamout="1"(滾動(dòng)速度)表示當(dāng)鼠標(biāo)移上區(qū)域的時(shí)候停止?jié)L動(dòng)，鼠標(biāo)移開(kāi)繼續(xù)滾動(dòng)第四章 img圖片標(biāo)簽與路徑
圖片標(biāo)簽與路徑：
常見(jiàn)圖片格式 jpg png gifGif （只支持全透明）Jpeg /jpgPng 半/全透明都支持圖片標(biāo)簽寫(xiě)法 ：
<img src="" alt="" width="" height="" />圖片四要素：
src="" 圖片路徑alt="" 圖片含義width="" 圖片寬度 和圖片大小保持一致height="" 圖片高度 和圖片大小保持一致title=""路徑知識(shí)：
相對(duì)路徑、絕對(duì)路徑：
相對(duì)路徑：(Relative Path) 相對(duì)于該文件的路徑；絕對(duì)路徑：(Absolute Path) 從磁盤(pán)出發(fā)的路徑；<img src="" …… align="" /> align屬性–設(shè)置圖片與后面文字的位置關(guān)系值–top、bottom、middle、absmiddle、left、right
在靜態(tài)頁(yè)面中：
/開(kāi)頭表示根目錄；
./表示當(dāng)前目錄；（斜畫(huà)線前面一個(gè)點(diǎn)）
../上級(jí)目錄；（斜畫(huà)線前面兩個(gè)點(diǎn)）
直接用文件名不帶/也表示同一目錄
這些都是相對(duì)于當(dāng)前文件的位置來(lái)說(shuō)的，如果用絕對(duì)路徑的話就是寫(xiě)全了。第五章 三種列表的講解
三種列表的知識(shí)講解：<ul>無(wú)序列表無(wú)序列表是一個(gè)沒(méi)有順序項(xiàng)目的列表，此列表項(xiàng)默認(rèn)粗體圓點(diǎn)進(jìn)行標(biāo)識(shí)<ul>? ?<li></li>? ?<li></li>? ?<li></li></ul>有序列表有序列表也是一列項(xiàng)目，只是列表項(xiàng)目使用的是數(shù)字進(jìn)行標(biāo)記。 有序列表始于 <ol> 標(biāo)簽。每個(gè)列表項(xiàng)始于 <li>標(biāo)簽。<ol>? ?<li>內(nèi)容一</li>? ?<li>內(nèi)容二</li>? ?<li>內(nèi)容三</li></ol>列表符號(hào)
無(wú)序列表-列表符號(hào):
type="circle" 空心圓 type=“disc” 實(shí)心圓 默認(rèn)值 type="square" 方塊符有序列表-列表符號(hào)
type="A" A B C Dtype="a" a b c dtype="1" 1 2 3 4 默認(rèn)值type=”I” I II III type=”i” i ii iii列表嵌套
無(wú)序列表-嵌套
<ul>?<li>柚子? <ul>? ?<li>沙田柚</li>? ?<li>蜜柚</li>? </ul>?</li>?<li>荔枝</li>?<li>蘋(píng)果</li></ul>有序列表-嵌套<ol>?<li>茶? <ul>? ?<li>紅茶</li>? ?<li>綠茶</li>? </ul>?</li>?<li>果汁</li>?<li>牛奶</li></ol>定義列表定義列表不僅僅是一列項(xiàng)目，而是項(xiàng)目及其注釋的組合。定義列表以 <dl> 標(biāo)簽開(kāi)始。每個(gè)定義列表項(xiàng)以 <dt>開(kāi)始。每個(gè)自定義列表項(xiàng)的定義以 <dd> 開(kāi)始。<dl> ?? ? ?<dt>pc網(wǎng)頁(yè)制作</dt> ?? ? ?<dd>學(xué)習(xí)DIV+CSS JS JQ 項(xiàng)目實(shí)戰(zhàn)</dd> ?? ? ?<dt>手機(jī)網(wǎng)頁(yè)制作</dt> ?? ? ?<dd>手機(jī)網(wǎng)頁(yè)制作實(shí)戰(zhàn)</dd></dl>dd是對(duì)dt的解釋
< dl>< /dl>用來(lái)創(chuàng)建一個(gè)普通的列表,< dt>< /dt>用來(lái)創(chuàng)建列表中的上層項(xiàng)目，< dd>< /dd>用來(lái)創(chuàng)建列表中最下層項(xiàng)目，< dt>< /dt>和< dd>< /dd>都必須放在< dl>< /dl>標(biāo)志對(duì)之間。<dl>? ? <dt>中國(guó)城市</dt>? ? <dd>北京 </dd>? ? <dd>上海 </dd>? ? <dd>廣州 </dd>? ? <dt>美國(guó)城市</dt>? ? <dd>華盛頓 </dd>? ? <dd>芝加哥 </dd>? ? <dd>紐約 </dd></dl>dl是definition list的縮寫(xiě)dt是definition title的縮寫(xiě)dd是definition description的縮寫(xiě)list-style屬性具有三個(gè)屬性分量：list-style-position ：設(shè)置列表項(xiàng)圖標(biāo)的位置，位于文本內(nèi)或者文本外list-style-type： 設(shè)置列表項(xiàng)圖標(biāo)的類型list-style-image：使用圖像設(shè)置列表項(xiàng)圖標(biāo)第六章 表單元素(上)
表單標(biāo)簽:
<form>表單標(biāo)簽
<form>表單是一個(gè)包含表單元素的區(qū)域，包括起來(lái)的都是表單的內(nèi)容<form>?<input type="text"/></form>HTML標(biāo)簽 - Action和確認(rèn)按鈕：
當(dāng)用戶單擊確認(rèn)按鈕時(shí)，表單的內(nèi)容會(huì)被傳送到另一個(gè)文件。表單的動(dòng)作屬性定義了目的文件的文件名。由動(dòng)作屬性定義的這個(gè)文件通常會(huì)對(duì)接收到的輸入數(shù)據(jù)進(jìn)行相關(guān)的處理。<form action="html.do" method="get"> ? ?? ? ? ? username: ?<input type="text" name="user" /> ??? ? ? ? <input type="submit" value="提 ?交" /></form>HTML標(biāo)簽 - 隱藏域隱藏標(biāo)簽：
隱藏域在頁(yè)面中對(duì)于用戶是不可見(jiàn)的，在表單中插入隱藏域的目的在于收集或發(fā)送信息，以利于被處理表單的程序所使用。瀏覽者單擊發(fā)送按鈕發(fā)送表單的時(shí)候，隱藏域的信息也被一起發(fā)送到服務(wù)器
<form> ? ? ? ?? ? ?<input type="hidden" name="hid" value="value"></form><input>標(biāo)簽的掌握
常用type類型：
<input type="" name="" value="" />type="text" 單行文本輸入框type="password" 密碼（maxlength=""）type="radio" 單項(xiàng)選擇（checked="checked"）type="checkbox" 多項(xiàng)選擇type="button" 按鈕type="submit" 提交 type="image"圖片提交type="file" 上傳文件type="reset"重置type="hidden" 隱藏關(guān)于表單中的設(shè)置默認(rèn)值：
<input type="text" name="" value="今天心情不錯(cuò)" /><input type="radio" name="" value="" checked="checked"><input type="checkbox" name="" value="" checked="checked"><select name="" >?<option ?value=""></option>?<option ?value="" selected="selected"></option><select>textarea沒(méi)有默認(rèn)值
<label>標(biāo)簽的使用
<label></label>
label 元素不會(huì)向用戶呈現(xiàn)任何特殊效果。不過(guò)，它為鼠標(biāo)用戶改進(jìn)了可用性。如果您在 label 元素內(nèi)點(diǎn)擊文本，就會(huì)觸發(fā)此控件。就是說(shuō)，當(dāng)用戶選擇該標(biāo)簽時(shí)，瀏覽器就會(huì)自動(dòng)將焦點(diǎn)轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上。<label> 標(biāo)簽的for 屬性應(yīng)當(dāng)與相關(guān)元素的 id屬性相同。
例子：（重要—注冊(cè)表單–用戶體驗(yàn)–必做）
<p>單向選擇</p><label for="male">男：</label><input type="radio" name="sex" id="male"/><label for="nv">女：</label><input type="radio" name="sex"checked="check"/>第七章 表單和表格(下)
表單和表格標(biāo)簽：<textarea>文本域標(biāo)簽<textarea>標(biāo)簽：<textarea></textarea>是文本域標(biāo)簽，可以在其中插入一段文字內(nèi)容，它有兩個(gè)常用屬性rows和cols注意：
rows表示這個(gè)文本域有多少行cols表示這個(gè)文本域有多少列除了這兩個(gè)屬性它還有readonly（只讀，文本域的內(nèi)容無(wú)法改變，相當(dāng)于協(xié)議）和title（鼠標(biāo)放上提示）
<select>標(biāo)簽的掌握
注：當(dāng)提交表單時(shí)，瀏覽器會(huì)提交選定的項(xiàng)目，或者收集用逗號(hào)分隔的多個(gè)選項(xiàng)，將其合成一個(gè)單獨(dú)的參數(shù)列表，并且在將 <select> 表單數(shù)據(jù)提交給服務(wù)器時(shí)包括 name屬性<form> ? ? ?? ? <select name="" ?id="">? ? ? ? ?<option value="1">1月</option> ?? ? ? ? ? <option value="2">2月</option> ? ? ?</select></form>常用到的屬性：disabled=“disabled” name="sel" size="2"
<table>表格標(biāo)簽<table>表格標(biāo)簽：<table>是表格標(biāo)簽，可以用它定義一個(gè)表格。
<table border="1">? ? <tr>? ? <td>姓名</td>? ? <td>性別</td>? ? </tr></table>注意：<table>的border屬性不能少
<tr> <td>標(biāo)簽的使用
<tr>行標(biāo)簽：
<tr>可以定義表格中的一行，一個(gè)<tr></tr>表示一行。<table border="1"><tr>?<td>姓名</td>?<td>性別</td></tr><tr>?<td>姓名</td>?<td>性別</td></tr></table><td>單元格標(biāo)簽:
<td>可以定義表格中的一個(gè)單元格，<td></td>表示一個(gè)單元格。<table border="1"><tr><td >姓名</td><td>性別</td><td>愛(ài)好</td></tr></table>border-collapse 屬性設(shè)置是否將表格邊框折疊為單一邊框：border-collapse:collapse;colspan左右合并rowspan上下合并第一部分總結(jié)：
非可視化標(biāo)簽：head meta style scrpit...可視化標(biāo)簽：img div span a ul li…只有可視化標(biāo)簽，才能用css改變它單標(biāo)簽：meta link base img input br hr雙標(biāo)簽：html head body div a p span ..ul li ol dl ….
常用可視化標(biāo)簽
div一般用它來(lái)布局a 超鏈接標(biāo)簽href*屬性：設(shè)置跳轉(zhuǎn)的網(wǎng)頁(yè)地址target屬性：設(shè)置跳轉(zhuǎn)的目標(biāo)結(jié)論：凡事頁(yè)面可以點(diǎn)擊跳轉(zhuǎn)或者表單提交的文字，都用a標(biāo)簽imgsrc*屬性用來(lái)設(shè)置圖片的url數(shù)據(jù)alt提供給搜索引擎搜索的widthheight結(jié)論 ：顯示圖片ul li列表結(jié)論：只要將來(lái)設(shè)計(jì)頁(yè)面中有固定樣式的列表，就用ul和litable caption tr td (th)慢慢已經(jīng)被淘汰了 被ul li代替如果是合并豎排的就是合并行（rowspan）如果是合并橫排的就是合并列（colspan）HTML部分導(dǎo)圖總結(jié)
HTML5標(biāo)簽集合
第二部分 CSS
第八章 css基礎(chǔ)知識(shí)
css基礎(chǔ)知識(shí)：css樣式表的定義css：（Cascading Style Sheets）層疊樣式表；分類及位置：內(nèi)部樣式-head區(qū)域style標(biāo)簽里面外部樣式-link調(diào)用內(nèi)聯(lián)樣式-標(biāo)簽元素里面css內(nèi)的注釋：/*注釋內(nèi)容*/css樣式表的語(yǔ)法
CSS規(guī)則由兩個(gè)主要的部分構(gòu)成：要添加樣式的盒子名或者標(biāo)簽名、和要添加的樣式。
盒子名或者標(biāo)簽名{屬性:值;}
CSS中幾種顏色的表示方法
用顏色名表示有17個(gè)預(yù)先確定的顏色，它們是aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow用十六進(jìn)制的顏色值表示(紅、綠、藍(lán))
#FF0000或者#F00用rgb(r,g,b)函數(shù)表示
如：rgb(255,255,0)用hsl(Hue,Saturation,Lightness)函數(shù)表示（色調(diào)、飽和度、亮度)
如：hsl(120,100%,100%),色調(diào)0代表紅色，120代表綠色，240代表藍(lán)色用rgba(r,g,b,a)函數(shù)表示
其中a表示的是改顏色的透明度，取值范圍是0~1，其中0代表完全透明用hsla(Hue,Saturation,Lightness,alpha)函數(shù)表示
色調(diào)、飽和度、亮度、透明度例子? <div style="position:absolute;top:0px"><div style="background-color:gray;">background-color:gray</div><div style="background-color:#F00;">background-color:#F00</div><div style="background-color:#ffff00;">background-color:#ffff00</div><div style="background-color:rgb(255,0,255);">background-color:rgb(255,0,255)</div><div style="background-color:hsl(120,80%,50%);">background-color:hsl(120,80%,50%)</div><div style="background-color:rgba(255,0,255,0.5);">background-color:rgba(255,0,255,0.5)</div><div style="background-color:hsla(120,80%,50%,0.5);">background-color:hsla(120,80%,50%,0.5)</div></div>
內(nèi)部樣式表當(dāng)單個(gè)頁(yè)面需要設(shè)置樣式時(shí)，就應(yīng)該使用內(nèi)部樣式表。使用 <style></style>標(biāo)簽在文檔<head></head>里面定義內(nèi)部樣式表<head>?<style type="text/css" >? p{color:red;}?</style></head>從外部引入到樣式分為兩種：（注意寫(xiě)在head標(biāo)簽里面）當(dāng)樣式需要應(yīng)用于很多頁(yè)面時(shí)，就需要用到外部樣式表，首先需要?jiǎng)?chuàng)建一個(gè)css文件，然后引用到我們的頁(yè)面中。
Link樣式表式： <link rel=”stylesheet” type=”text/css” href=”my.css”(href表示路徑)>
Html式： <style type="text/css">@import url("css.css");></style>
內(nèi)聯(lián)樣式表（優(yōu)先級(jí)高）
寫(xiě)在標(biāo)簽里面的樣式
如：<p style="color:red;"></p>
表示給p標(biāo)簽里面的文字顏色設(shè)置為紅色
區(qū)別：外鏈樣式與導(dǎo)入樣式
link標(biāo)簽是屬于xhtml范疇，而@import則是css2.1中特有的。link標(biāo)簽除了可以加載CSS外，還可以做很多其它的事情，比如定義RSS，定義rel連接屬性等，@import就只能加載CSS了。
加載的順序的區(qū)別，link加載的css時(shí)，是一種并行(沒(méi)有嘗試是否是這樣)加載CSS方式，而@impor則在整個(gè)頁(yè)面加載完成后才加載。
兼容性的區(qū)別，因@import``CSS2.1才特有的，所以對(duì)于不兼容CSS2.1的瀏覽器來(lái)說(shuō)，無(wú)效。
在樣式控制上(比如動(dòng)態(tài)改變網(wǎng)頁(yè)的布局時(shí),使用javascript操作DOM)的區(qū)別，此時(shí)@import就無(wú)能為力了。
樣式的優(yōu)先級(jí)補(bǔ)充相同權(quán)值情況下，CSS樣式的優(yōu)先級(jí)總結(jié)來(lái)說(shuō)，就是——就近原則（離被設(shè)置元素越近優(yōu)先級(jí)別越高）：內(nèi)聯(lián)樣式表（標(biāo)簽內(nèi)部） > 嵌入樣式表（當(dāng)前文件中）> 外部樣式表（外部文件中）權(quán)值不同時(shí)，瀏覽器是根據(jù)權(quán)值來(lái)判斷使用哪種css樣式的，哪種樣式權(quán)值高就使用哪種樣式
層疊優(yōu)先級(jí)是:
瀏覽器缺省< 外部樣式表 < 內(nèi)部樣式表 < 內(nèi)聯(lián)樣式其中樣式表又有:類選擇器 < 類派生選擇器<ID選擇器 < ID派生選擇器派生選擇器以前叫上下文選擇器，所以完整的層疊優(yōu)先級(jí)是:
瀏覽器缺省 <外部樣式表 < 外部樣式表類選擇器 < 外部樣式表類派生選擇器< 外部樣式表ID選擇器 < 外部樣式表ID派生選擇器< 內(nèi)部樣式表 < 內(nèi)部樣式表類選擇器 < 內(nèi)部樣式表類派生選擇器 < 內(nèi)部樣式表ID選擇器 < 內(nèi)部樣式表ID派生選擇器 < 內(nèi)聯(lián)樣式…共12個(gè)優(yōu)先級(jí)另外，如果同一個(gè)元素在沒(méi)有其他樣式的作用影響下，其Class定義了多個(gè)并以空格分開(kāi)，其優(yōu)先級(jí)順序?yàn)?#xff1a;
一個(gè)元素同時(shí)應(yīng)用多個(gè)class，后定義的優(yōu)先（即近者優(yōu)先），加上!important者最優(yōu)先！第九章 css選擇器(上)
css選擇器：class類選擇器可以重復(fù)利用id選擇器唯一標(biāo)簽選擇器什么是選擇器：css選擇器就是要改變樣式的對(duì)象選擇器{屬性:值;屬性:值;}
標(biāo)簽選擇器：頁(yè)面中所有的標(biāo)簽都是一個(gè)選擇器 p{color:red;}
ID選擇器
選擇id命名的元素 以 # 開(kāi)頭 #p1{color:#0f0;}類選擇器
class選擇器，選擇clas命名的元素 以.開(kāi)頭 .first{color:#00f;}css代碼寫(xiě)完后上線前要經(jīng)過(guò)壓縮處理本地和服務(wù)器分兩個(gè)css版本（備份）壓縮后注釋都清除，空間體積減少
群組選擇器
選擇多個(gè)元素,以逗號(hào)隔開(kāi) #main,.first,span,a,h1{color:red;}包含選擇器選擇某元素的后代元素，也稱后代選擇器，父類與子類間以空格隔開(kāi)pspan{color:red;}屬性選擇器
選擇包含某一屬性的元素a[title]{color:red;} 選擇包含title的a標(biāo)簽a[title][href]{color:red;} 選擇包含title和href的a標(biāo)簽> + 選擇器子類選擇器：只選擇子元素（只選擇兒子）（相當(dāng)于包含元素）
p > span{color:red;}相鄰兄弟選擇器：只選擇后面的相鄰兄弟元素p + span{color:red;}第十章 css選擇器(下)
<a>偽類選擇器a:link {color:#FF0000;} / 未訪問(wèn)的鏈接 / （只用于a標(biāo)簽）a:visited {color:#00FF00;} / 已訪問(wèn)的鏈接 / （只用于a標(biāo)簽）a:hover {color:#FF00FF;}/* 鼠標(biāo)移動(dòng)到鏈接上*/（可和其他標(biāo)簽結(jié)合一起用）a:active {color:#0000FF;} / 選定的鏈接 /注意偽類選擇器的排序很重要，a:link a:visited a:hover a:active，記作lvha輸入偽類選擇器（針對(duì)表單）
input:focus{color:red;} / 鍵盤(pán)輸入焦點(diǎn) /其他偽類選擇器
p:first-child{color:red;} /* 第一個(gè)p */:before 在元素之前添加內(nèi)容。:after 在元素之后添加內(nèi)容。css優(yōu)先規(guī)則
內(nèi)聯(lián)樣式表-> ID 選擇器—> Class 類選擇器->標(biāo)簽選擇器第十一章 背景屬性
背景屬性：
背景的添加 ：
背景顏色的添加:
background:red;backgronnd-color:red;背景圖片的添加：
background:url(“images/1.jpg”);backgronnd-image:url(“images/1.jpg”);背景的平鋪什么是平鋪？平鋪就是圖片是否重復(fù)出現(xiàn)不平鋪：background-repeat:no-repeat;水平方向平鋪：background-repeat:repeat-x;垂直方向平鋪：background-repeat:repeat-y;完全平鋪：默認(rèn)為完全平鋪背景圖片的定位背景圖片的定位就是可以設(shè)置顯示背景圖片的位置，通過(guò)屬性background-position來(lái)實(shí)現(xiàn)background-position的取值可為英文單詞或者數(shù)值和百分值。background-positon的英文單詞取值top lefttop centertop rightcenter leftcenter centercenter rightbottom leftbottom centerottom rightbackground-positon的數(shù)值取值background-position:x y;positon的百分值取值background-position:x% y%;背景圖片的大小
背景圖片的大小可以通過(guò)屬性background-size來(lái)設(shè)置background-size的取值可為數(shù)值和百分值。background-size的數(shù)值取值
background-size:x y;background-size的數(shù)值取值
background-size:x% y%;背景圖片的滾動(dòng)
背景圖片是否隨著內(nèi)容的滾動(dòng)而滾動(dòng)由background-attachment設(shè)置
background-attachment:fixed; 固定，不隨內(nèi)容的滾動(dòng)而滾動(dòng)
background-attachment:scroll; 滾動(dòng)，隨內(nèi)容的滾動(dòng)而滾動(dòng)第十二章 文字文本屬性
css文字文本屬性：
文字屬性
color:red; 文字顏色font-size:12px; 文字大小font-weight:“bold” 文字粗細(xì)(bold/normal)font-family:“宋體” 文字字體font-variant:small-caps小寫(xiě)字母以大寫(xiě)字母顯示文本屬性
text-align:center; 文本對(duì)齊(right/left/center)line-height:10px; 行間距(可通過(guò)它實(shí)現(xiàn)文本的垂直居中)text-indent:20px; 首行縮進(jìn)text-decoration:none;文本線(none/underline/overline/line-through)letter-spacing: 字間距第十三章 盒子模型
盒子模型盒子模型就是一個(gè)有高度和寬度的矩形區(qū)域所有html標(biāo)簽都是盒子模型div標(biāo)簽自定義盒子模型所有的標(biāo)簽都是盒子模型
class和id的主要差別是：class用于元素組（類似的元素，或者可以理解為某一類元素），而id用于標(biāo)識(shí)單獨(dú)的唯一的元素。盒子模型的組成
盒子模型組成部分：自身內(nèi)容：width、height 寬高內(nèi)邊距： padding盒子邊框： border 邊框線與其他盒子距離： margin外邊距內(nèi)容+內(nèi)邊距+邊框+外邊距=面積border 邊框
常見(jiàn)寫(xiě)法 border:1px solid #f00;單獨(dú)屬性：
border-width:border-style:dotted 點(diǎn)狀虛線dashed（虛線）solid（實(shí)線）double（雙實(shí)線）border-color (顏色)padding 內(nèi)邊距
值：像素/厘米等長(zhǎng)度單位、百分比
padding:10px; 上下左右padding:10px 10px; 上下 左右padding:10px 10px 10px; 上 左右 下padding:10px 10px 10px 10px; 上 右 下 左（設(shè)置4個(gè)點(diǎn)–>順時(shí)針?lè)较?#xff09;單獨(dú)屬性：
padding-top:padding-right:padding-bottom:padding-left:當(dāng)設(shè)置內(nèi)邊距的時(shí)候會(huì)把盒子撐大，為了保持盒子原來(lái)的大小，應(yīng)該高度和寬度進(jìn)行減小，根據(jù)width和height減小
margin 外邊距
值：與padding相同
單獨(dú)屬性：與padding相同
外邊距合并：兩個(gè)盒子同時(shí)設(shè)置了外邊距，會(huì)進(jìn)行一個(gè)外邊距合并
補(bǔ)充盒子模型內(nèi)容
標(biāo)準(zhǔn)盒子模型
盒子模型是css中一個(gè)重要的概念，理解了盒子模型才能更好的排版。其實(shí)盒子模型有兩種，分別是 ie盒子模型和標(biāo)準(zhǔn) w3c 盒子模型。他們對(duì)盒子模型的解釋各不相同，先來(lái)看看我們熟知的標(biāo)準(zhǔn)盒子模型
從上圖可以看到標(biāo)準(zhǔn) w3c 盒子模型的范圍包括 margin、border、padding、content，并且 content部分不包含其他部分
IE盒子模型
從上圖可以看到 ie盒子模型的范圍也包括 margin、border、padding、content和標(biāo)準(zhǔn) w3c 盒子模型不同的是：ie 盒子模型的 content 部分包含了 border和 padding
IE盒子模型width = padding+border+內(nèi)容
標(biāo)準(zhǔn)盒子模型 = 內(nèi)容的寬度（不包含border+padding）
例：
一個(gè)盒子的 margin為 20px，border 為 1px，padding為 10px，content 的寬為 200px、高為 50px，假如用標(biāo)準(zhǔn) w3c 盒子模型解釋，那么這個(gè)盒子需要占據(jù)的位置為：寬 20*2+1*2+10*2+200=262px、高 20*2+1*2*10*2+50=112px，盒子的實(shí)際大小為：寬 1*2+10*2+200=222px、高 1*2+10*2+50=72px；假如用ie 盒子模型，那么這個(gè)盒子需要占據(jù)的位置為：寬 20*2+200=240px、高 20*2+50=70px，盒子的實(shí)際大小為：寬 200px、高 50px那應(yīng)該選擇哪中盒子模型呢？當(dāng)然是“標(biāo)準(zhǔn) w3c 盒子模型”了。怎么樣才算是選擇了“標(biāo)準(zhǔn) w3c盒子模型”呢？很簡(jiǎn)單，就是在網(wǎng)頁(yè)的頂部加上 doctype 聲明。
假如不加doctype 聲明，那么各個(gè)瀏覽器會(huì)根據(jù)自己的行為去理解網(wǎng)頁(yè)，即 ie瀏覽器會(huì)采用 ie 盒子模型去解釋你的盒子，而 ff會(huì)采用標(biāo)準(zhǔn)w3c 盒子模型解釋你的盒子，所以網(wǎng)頁(yè)在不同的瀏覽器中就顯示的不一樣了。反之，假如加上了 doctype 聲明，那么所有瀏覽器都會(huì)采用標(biāo)準(zhǔn) w3c盒子模型去解釋你的盒子，網(wǎng)頁(yè)就能在各個(gè)瀏覽器中顯示一致了。用 jquery 做的例子來(lái)證實(shí)一下<html><head><title>你用的盒子模型是？</title><script language="javascript" src="jquery.min.js"></script><script language="javascript">var sbox = $.boxmodel ? "標(biāo)準(zhǔn)w3c":"ie";document.write("您的頁(yè)面目前支持："+sbox+"盒子模型");</script></head><body></body></html> 上面的代碼沒(méi)有加上 doctype 聲明，在 ie 瀏覽器中顯示 ie盒子模型，在 ff 瀏覽器中顯示“標(biāo)準(zhǔn)w3c 盒子模型”。<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"><html><head><title>你用的盒子模型是標(biāo)準(zhǔn)w3c盒子模型</title><script language="javascript" src="jquery.min.js"></script><script language="javascript">var sbox = $.boxmodel ? "標(biāo)準(zhǔn)w3c":"ie";document.write("您的頁(yè)面目前支持："+sbox+"盒子模型");</script></head><body></body></html> 代碼2 與代碼1 唯一的不同的就是頂部加了 doctype聲明。在所有瀏覽器中都顯示“標(biāo)準(zhǔn) w3c盒子模型”所以為了讓網(wǎng)頁(yè)能兼容各個(gè)瀏覽器，讓我們用標(biāo)準(zhǔn) w3c 盒子模型
擴(kuò)展
學(xué)會(huì)使用box-sizing布局第十四章 塊元素、行元素與溢出
基本概念塊級(jí)元素：默認(rèn)情況下獨(dú)占一行的元素，可控制寬高、上下邊距；行內(nèi)元素：默認(rèn)情況下一行可以擺放多個(gè)的元素，不可控制寬高和上下邊距行塊轉(zhuǎn)換
display:none; 不顯示display:block; 變成塊級(jí)元素display:inline; 變成行級(jí)元素display:inline-block; 以塊級(jí)元素樣式展示，以行級(jí)元素樣式排列溢出
overflow:hidden; 溢出隱藏overflow:scroll; 內(nèi)容會(huì)被修剪，瀏覽器會(huì)顯示滾動(dòng)條overflow:auto; 如果內(nèi)容被修剪，則產(chǎn)生滾動(dòng)條文本不換行：white-space:nowrap;
長(zhǎng)單詞換行：word-wrap:break-word;行內(nèi)元素和快級(jí)元素小結(jié)
一、塊級(jí)元素：block element
每個(gè)塊級(jí)元素默認(rèn)占一行高度，一行內(nèi)添加一個(gè)塊級(jí)元素后無(wú)法一般無(wú)法添加其他元素（float浮動(dòng)后除外）。兩個(gè)塊級(jí)元素連續(xù)編輯時(shí)，會(huì)在頁(yè)面自動(dòng)換行顯示。塊級(jí)元素一般可嵌套塊級(jí)元素或行內(nèi)元素；塊級(jí)元素一般作為容器出現(xiàn)，用來(lái)組織結(jié)構(gòu)，但并不全是如此。有些塊級(jí)元素，如只能包含塊級(jí)元素。
DIV 是最常用的塊級(jí)元素，元素樣式的display:block都是塊級(jí)元素。它們總是以一個(gè)塊的形式表現(xiàn)出來(lái)，并且跟同級(jí)的兄弟塊依次豎直排列，左右撐滿。
二、行內(nèi)元素：inline element
也叫內(nèi)聯(lián)元素、內(nèi)嵌元素等；行內(nèi)元素一般都是基于語(yǔ)義級(jí)(semantic)的基本元素，只能容納文本或其他內(nèi)聯(lián)元素，常見(jiàn)內(nèi)聯(lián)元素 “a”。比如 SPAN元素，IFRAME元素和元素樣式的display : inline的都是行內(nèi)元素。例如文字這類元素，各個(gè)字母 之間橫向排列，到最右端自動(dòng)折行。三、block（塊）元素的特點(diǎn):
①、總是在新行上開(kāi)始；②、高度，行高以及外邊距和內(nèi)邊距都可控制；③、寬度缺省是它的容器的100%，除非設(shè)定一個(gè)寬度。④、它可以容納內(nèi)聯(lián)元素和其他塊元素四、inline元素的特點(diǎn)
①、和其他元素都在一行上；②、高，行高及外邊距和內(nèi)邊距不可改變；③、寬度就是它的文字或圖片的寬度，不可改變④、內(nèi)聯(lián)元素只能容納文本或者其他內(nèi)聯(lián)元素對(duì)行內(nèi)元素，需要注意如下:
設(shè)置寬度width 無(wú)效。 設(shè)置高度height無(wú)效，可以通過(guò)line-height來(lái)設(shè)置。 設(shè)置margin只有左右margin有效，上下無(wú)效。設(shè)置padding只有左右padding有效，上下則無(wú)效。注意元素范圍是增大了，但是對(duì)元素周?chē)膬?nèi)容是沒(méi)影響的。五、常見(jiàn)的塊狀元素
address – 地址blockquote – 塊引用center – 舉中對(duì)齊塊dir – 目錄列表div – 常用塊級(jí)容易，也是CSS layout的主要標(biāo)簽dl – 定義列表fieldset – form控制組form – 交互表單h1 – 大標(biāo)題h2 – 副標(biāo)題h3 – 3級(jí)標(biāo)題h4 – 4級(jí)標(biāo)題h5 – 5級(jí)標(biāo)題h6 – 6級(jí)標(biāo)題hr – 水平分隔線isindex – input promptmenu – 菜單列表noframes – frames可選內(nèi)容，（對(duì)于不支持frame的瀏覽器顯示此區(qū)塊內(nèi)容noscript – 可選腳本內(nèi)容（對(duì)于不支持script的瀏覽器顯示此內(nèi)容）ol – 有序表單p – 段落pre – 格式化文本table – 表格ul – 無(wú)序列表六、常見(jiàn)的內(nèi)聯(lián)元素
a – 錨點(diǎn)abbr – 縮寫(xiě)acronym – 首字b – 粗體(不推薦)bdo – bidi overridebig – 大字體br – 換行cite – 引用code – 計(jì)算機(jī)代碼(在引用源碼的時(shí)候需要)dfn – 定義字段em – 強(qiáng)調(diào)font – 字體設(shè)定(不推薦)i – 斜體img – 圖片input – 輸入框kbd – 定義鍵盤(pán)文本label – 表格標(biāo)簽q – 短引用s – 中劃線(不推薦)samp – 定義范例計(jì)算機(jī)代碼select – 項(xiàng)目選擇small – 小字體文本span – 常用內(nèi)聯(lián)容器，定義文本內(nèi)區(qū)塊strike – 中劃線strong – 粗體強(qiáng)調(diào)sub – 下標(biāo)sup – 上標(biāo)textarea – 多行文本輸入框tt – 電傳文本u – 下劃線七，可變?cè)?br />可變?cè)貫楦鶕?jù)上下文語(yǔ)境決定該元素為塊元素或者內(nèi)聯(lián)元素。applet - java appletbutton - 按鈕del- 刪除文本iframe - inline frameins - 插入的文本map - 圖片區(qū)塊(map)object - object對(duì)象script - 客戶端腳本八、行內(nèi)元素與塊級(jí)元素有什么不同
區(qū)別一：
塊級(jí)：塊級(jí)元素會(huì)獨(dú)占一行，默認(rèn)情況下寬度自動(dòng)填滿其父元素寬度行內(nèi)：行內(nèi)元素不會(huì)獨(dú)占一行，相鄰的行內(nèi)元素會(huì)排在同一行。其寬度隨內(nèi)容的變化而變化。區(qū)別二：
塊級(jí)：塊級(jí)元素可以設(shè)置寬高行內(nèi)：行內(nèi)元素不可以設(shè)置寬高區(qū)別三：
塊級(jí)：塊級(jí)元素可以設(shè)置margin，padding行內(nèi)：行內(nèi)元素水平方向的margin-left; margin-right;padding-left; padding-right;可以生效。但是豎直方向的margin-bottom; margin-top; padding-top; padding-bottom;卻不能生效。
區(qū)別四：
塊級(jí)：display:block;行內(nèi)：display:inline;替換元素有如下：（和img一樣的設(shè)置方法）
<img>、<input>、<textarea>、<select><object>都是替換元素，這些元素都沒(méi)有實(shí)際的內(nèi)容可以通過(guò)修改display屬性來(lái)切換塊級(jí)元素和行內(nèi)元素第十五章 定位
static靜態(tài)定位（不對(duì)它的位置進(jìn)行改變，在哪里就在那里）
默認(rèn)值。沒(méi)有定位，元素出現(xiàn)在正常的流中（忽略 top,bottom, left, right 或者 z-index 聲明）。fixed固定定位（參照物–瀏覽器窗口）—做 彈窗廣告用到
生成固定定位的元素，相對(duì)于瀏覽器窗口進(jìn)行定位。 元素的位置通過(guò) "left", "top", "right"以及 "bottom"屬性進(jìn)行規(guī)定。relative（相對(duì)定位 ）（參照物以他本身）
生成相對(duì)定位的元素，相對(duì)于其正常位置進(jìn)行定位。absolute（絕對(duì)定位）(除了static都可以，找到參照物–>與它最近的已經(jīng)有定位的父元素進(jìn)行定位)
生成絕對(duì)定位的元素，相對(duì)于 static 定位以外的第一個(gè)父元素進(jìn)行定位。元素的位置通過(guò) “l(fā)eft", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定z-index
z-index 屬性設(shè)置元素的堆疊順序。擁有更高堆疊順序的元素總是會(huì)處于堆疊順序較低的元素的前面。定位的基本思想: 它允許你定義元素框相對(duì)于其正常位置應(yīng)該出現(xiàn)的位置，或者相對(duì)于父元素、另一個(gè)元素甚至瀏覽器窗口本身的位置。一切皆為框
塊級(jí)元素: div、h1或p元素 即：顯示為一塊內(nèi)容稱之為 “塊框“ ;行內(nèi)元素: span,strong,a等元素 即：內(nèi)容顯示在行中稱 “行內(nèi)框”;使用display屬性改變成框的類型 即：display:block; 讓行內(nèi)元素設(shè)置為塊級(jí)元素，display:none; 沒(méi)有框相對(duì)定位：
如果對(duì)一個(gè)元素進(jìn)行相對(duì)定位，它將出現(xiàn)在它所在的位置上。通過(guò)設(shè)置垂直或水平位置，讓這個(gè)元素“相對(duì)于”它的起點(diǎn)進(jìn)行移動(dòng).adv_relative { position: relative; left: 30px; top: 20px; }絕對(duì)定位：
元素的位置相對(duì)于最近的已定位祖先元素，如果元素沒(méi)有已定位 的祖先元素，它的位置相對(duì)于最初的包含塊。 .adv_absolute { position: absolute; left: 30px; top: 20px; }
第十六章 框架
frameset框架：<frameset> —- 用來(lái)定義一個(gè)框架；雙標(biāo)簽不能和 <body> 一起使用rows、cols屬性
rows 定義行表示框架有多少行（取值 px/%/ * ）cols 定義列表示框架有多少列（取值px/ %/ * ）frame子框架
<frame> —- 表示框架中的某一個(gè)部分；單標(biāo)簽，要跟結(jié)束標(biāo)志
src 顯示的網(wǎng)頁(yè)的路徑name 框架名frameborder 邊框線（取值 0 / 1）<noframes>屬性
<noframes> 提供不支持框架的瀏覽器顯示body的內(nèi)容；雙標(biāo)簽
<frameset>? ? ?<frame ?src=“” ?/>? ? ?<frame ?src=“” />? ? ?<frame ?src=“” />? ? ?<noframes>? ? ? <body>內(nèi)容</body>? ? ?</noframes></frameset><iframe>內(nèi)聯(lián)框架iframe元素會(huì)創(chuàng)建包含另外一個(gè)文檔的內(nèi)聯(lián)框架（即行內(nèi)框架）允許和 body 一起使用width 寬（取值 px / %）height 高（取值 px / %）name 框架名frameborder 邊框線（取值 0 / 1）src 顯示的網(wǎng)頁(yè)的路徑第十七章 css高級(jí)屬性
opacity透明屬性opacity對(duì)于IE6/7/，使用filter:alpha(opacity:值;) 值為0-100對(duì)于Webkit，Opera，Firefox，IE9+，使用opacity:值; 值為0-1對(duì)于早期火狐，使用-moz-opacity:值; 值為0-1所以寫(xiě)透明屬性時(shí)，一般寫(xiě)法是?{? ? opacity:0.5;? ?filter:alpha(opacity：50);/*0-100*/? ?-moz-opacity:0.5;/*取值0-1*/-->針對(duì)早起版本的火狐兼容問(wèn)題的解決}border-radius圓角邊框?qū)傩?br />向 div 元素添加圓角邊框border-radius:10px;box-shadow陰影屬性
box-shadow屬性向框添加陰影效果,后面跟4個(gè)參數(shù)。
box-shadow:0px 0px 10px #000;
<embed>屬性
是HTML5中新增的標(biāo)簽,媒體嵌入插件標(biāo)簽，可以通過(guò)<embed>插入音頻或視頻
<embed src=“media/music.mp3” />
格式.mid .wav .mp3等
CSS部分導(dǎo)圖總結(jié)
原文件下載地址 訪問(wèn)密碼 342a
第三部分 附錄
附錄一 DIV命名規(guī)范
企業(yè)DIV使用頻率高的命名方法
網(wǎng)頁(yè)內(nèi)容類
標(biāo)題: title
摘要: summary箭頭： arrow商標(biāo)： label網(wǎng)站標(biāo)志： logo轉(zhuǎn)角/圓角：corner橫幅廣告： banner子菜單： subMenu搜索： search搜索框： searchBox登錄： login登錄條：loginbar工具條： toolbar下拉： drop標(biāo)簽頁(yè)： tab當(dāng)前的： current列表： list滾動(dòng)： scroll服務(wù)： service提示信息： msg熱點(diǎn)：hot新聞： news小技巧： tips下載： download欄目標(biāo)題： title熱點(diǎn)： hot加入：joinus注冊(cè)： regsiter指南： guide友情鏈接： friendlink狀態(tài)： status版權(quán)： copyright按鈕： btn合作伙伴： partner投票： vote左右中：left right center注釋的寫(xiě)法: /* Footer */ 內(nèi)容區(qū)/* End Footer */id的命名:
頁(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 center導(dǎo)航
導(dǎo)航：nav主導(dǎo)航：mainbav子導(dǎo)航：subnav頂導(dǎo)航：topnav邊導(dǎo)航：sidebar左導(dǎo)航：leftsidebar右導(dǎo)航：rightsidebar菜單：menu子菜單：submenu標(biāo)題: title摘要: summary功能
標(biāo)志：logo廣告：banner登陸：login登錄條：loginbar注冊(cè)：regsiter搜索：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)：copyrightclass的命名:
顏色:使用顏色的名稱或者16進(jìn)制代碼,如
.red { color: red; }.f60 { color: #f60; }.ff8600 { color: #ff8600; }字體大小,直接使用”font+字體大小”作為名稱,如
.font12px { font-size: 12px; }.font9px {font-size: 9pt; }對(duì)齊樣式,使用對(duì)齊目標(biāo)的英文名稱,如
.left { float:left; }.bottom { float:bottom; }標(biāo)題欄樣式,使用”類別+功能”的方式命名,如
.barnews { }.barproduct { }注意事項(xiàng)::
一律小寫(xiě);盡量用英文;不加中杠和下劃線;盡量不縮寫(xiě)，除非一看就明白的單詞.推薦的 CSS 書(shū)寫(xiě)順序：
顯示屬性
displaylist-stylepositionfloatclear自身屬性
widthheightmarginpaddingborderbackground文本屬性
colorfonttext-decorationtext-alignvertical-alignwhite-spaceother textcontent附錄二 CSS精靈
CSS精靈原理以及應(yīng)用CSS雪碧的基本原理是把你的網(wǎng)站上用到的一些圖片整合到一張單獨(dú)的圖片中，從而減少你的網(wǎng)站的HTTP請(qǐng)求數(shù)量。該圖片使用CSS background和background-position屬性渲染，這也就意味著你的標(biāo)簽變得更加復(fù)雜了，圖片是在CSS中定義，而非<img>標(biāo)簽。一個(gè)簡(jiǎn)單的例子：一張圖片作出一個(gè)按鈕的三個(gè)狀態(tài)一個(gè)鏈接用CSS做成按鈕的樣式，我們可以使用同一張圖片，完成按鈕的三個(gè)狀態(tài)，a:link，a:hover，a:active <a class="button" href="#">鏈接</a>加入右側(cè)的圖片為：200px 65px的三個(gè)按鈕圖拼合而成的圖片button.png，從上到下一次為按鈕的普通、鼠標(biāo)滑過(guò)、鼠標(biāo)點(diǎn)擊的狀態(tài)。則可以使用CSS進(jìn)行定義。a {? ? display:block;?? ? width:200px;?? ? height:65px;?? ? line-height:65px; /*定義狀態(tài)*/? ? text-indent:-2015px; /*隱藏文字*/? ? background-image:url(button.png); /*定義背景圖片*/? ? background-position:0 0;? ? /*定義鏈接的普通狀態(tài)，此時(shí)圖像顯示的是頂上的部分*/}a:hover {? ? background-position:0 -66px;? ? /*定義鏈接的滑過(guò)狀態(tài)，此時(shí)顯示的為中間部分，向下取負(fù)值*/}a:active {? ? background-position:0 -132px; ? ? ? ? ? ? ? ? ? ? ?? ? /*定 義鏈接的普通狀態(tài)，此時(shí)顯示的是底部的部分，向下取負(fù)值*/}更多的CSS雪碧，圖片更復(fù)雜，背景定位更精確。可能會(huì)用到大量的數(shù)值如：background:url(nav.png) -180px 24pxno-repeat; 來(lái)達(dá)到更精確的定位優(yōu)點(diǎn)：減少加載網(wǎng)頁(yè)圖片時(shí)對(duì)服務(wù)器的請(qǐng)求次數(shù)可以合并多數(shù)背景圖片和小圖標(biāo)，方便在任何位置使用，這樣不同位置的請(qǐng)求只需要調(diào)用一個(gè)圖片，從而減少對(duì)服務(wù)器的請(qǐng)求次數(shù)，降低服務(wù)器壓力，同時(shí)提高了頁(yè)面的加載速度，節(jié)約服務(wù)器的流量。提高頁(yè)面的加載速度sprite技術(shù)的其中一個(gè)好處是圖片的加載時(shí)間(在有許多 sprite 時(shí)，單張圖片的加載時(shí)間)。由所需圖片拼成的一張 GIF圖片的尺寸會(huì)明顯小于所有圖片拼合前的大小。單張的 GIF只有相關(guān)的一個(gè)色表，而單獨(dú)分割的每一張 GIF 都有自己的一個(gè)色表，這就增加了總體的大小。因此，單獨(dú)的一張 JPEG 或者 PNG sprite 在大小上非常可能比把一張圖分成多張得來(lái)的圖片總尺寸小。減少鼠標(biāo)滑過(guò)的一些bugIE6不會(huì)主動(dòng)預(yù)加載鼠標(biāo)滑過(guò)即a:hover中的背景圖片，所以，如果使用多張圖片，鼠標(biāo)滑過(guò)會(huì)出現(xiàn)閃白的現(xiàn)象。使用CSS雪碧，由于一張圖片即可，所以不會(huì)出現(xiàn)這種現(xiàn)象。不足：CSS雪碧的最大問(wèn)題是內(nèi)存使用影響瀏覽器的縮放功能拼圖維護(hù)比較麻煩使CSS的編寫(xiě)變得困難CSS 雪碧調(diào)用的圖片不能被打印錯(cuò)誤得使用 Sprites 影響可訪問(wèn)性附錄三 部分工具資源
Sublime專題Sublime常用插件總結(jié)Front-End -Develop -ToolsToolsBox-自己整理的一份工具列表附錄四 編碼規(guī)范
編碼規(guī)范web develop standardWeb 前端開(kāi)發(fā)規(guī)范文檔附錄五 前端學(xué)習(xí)資源
Github上前端學(xué)習(xí)資源匯總WEB 前端開(kāi)發(fā)學(xué)習(xí)筆記前程開(kāi)發(fā)工具箱其他
本文Mardown原文件-歡迎轉(zhuǎn)載
總結(jié)
以上是生活随笔為你收集整理的DIV+CSS系统学习：转载的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 第一卷 第一百三十六章 好白菜
- 下一篇： [慎用] Windows10 第三方磁盘