border-radius：圓角

• 1個(gè)參數(shù)：四個(gè)角都應(yīng)用

• 2個(gè)參數(shù)：第一個(gè)參數(shù)應(yīng)用于 左上、右下；第二個(gè)參數(shù)應(yīng)用于 左下、右上

• 3個(gè)參數(shù)：第一個(gè)參數(shù)應(yīng)用于 左上；第二個(gè)參數(shù)應(yīng)用于 左下、右上；第三個(gè)參數(shù)應(yīng)用于右下

• 4個(gè)參數(shù)：左上、右上、右下、左下（順時(shí)針）

border: 簡(jiǎn)寫(xiě)

• border: 2px yellow solid; 

box-shadow：邊框陰影

• 第一個(gè)參數(shù)是左右位置

• 第二個(gè)參數(shù)是上下位置

• 第三個(gè)參數(shù)是虛化效果

• 第四個(gè)參數(shù)是顏色

• box-shadow: 10px 10px 5px #888;

圓角應(yīng)用-demo1

圓角應(yīng)用-demo2

邊框應(yīng)用-demo3

邊框應(yīng)用-demo4

6  列表屬性

list-style-type: 列表項(xiàng)標(biāo)志的類(lèi)型

• none 去除標(biāo)志

• decimal-leading-zero;  02.

• square;  方框

• circle;  空心圓

• upper-alph;  大寫(xiě)字母

• disc;   實(shí)心圓

list-style-image：將圖象設(shè)置為列表項(xiàng)標(biāo)志

list-style-position：列表項(xiàng)標(biāo)志的位置

• inside

• outside

list-style：縮寫(xiě)

• list-style:square inside url('/i/arrow.gif');

ul,ol{ list-style: decimal-leading-zero;    # 數(shù)字01,02,
　　list-style: none;    # 不顯示
　　list-style: circle;    # 空心圓
　　list-style: upper-alpha;    # 字母A,B,
　　list-style: disc; 　　# 實(shí)心圓(默認(rèn))
}    

7  dispaly屬性

8  盒子模型

　　padding:用于控制內(nèi)容與邊框之間的距離；

　　margin: 用于控制元素與元素之間的距離；margin的最基本用途就是控制元素周?chē)臻g的間隔，從視覺(jué)角度上達(dá)到相互隔開(kāi)的目的。

我們通過(guò)設(shè)置width 和 height 只是設(shè)置了content的寬度與高度!

盒子的寬度(高度)=content+padding+border+margin

實(shí)例： 300px*300px的盒子裝著100px*100px的盒子，分別通過(guò)margin和padding設(shè)置將小盒子移到大盒子的中間

注意1：邊框在默認(rèn)情況下會(huì)定位于瀏覽器窗口的左上角，但是并沒(méi)有緊貼著瀏覽器的窗口的邊框。

　　這是因?yàn)閎ody本身也是一個(gè)盒子（外層還有html），在默認(rèn)情況下，body距離html會(huì)有若干像素的margin，具體數(shù)值因各個(gè)瀏覽器不盡相同，所以body中的盒子不會(huì)緊貼瀏覽器窗口的邊框了。

注意2：margin collapse（邊界塌陷或者說(shuō)邊界重疊）

　　外邊距的重疊只產(chǎn)生在普通流文檔的上下外邊距之間，這個(gè)看起來(lái)有點(diǎn)奇怪的規(guī)則，其實(shí)有其現(xiàn)實(shí)意義。

　　設(shè)想，當(dāng)我們上下排列一系列規(guī)則的塊級(jí)元素（如段落P）時(shí)，那么塊元素之間因?yàn)橥膺吘嘀丿B的存在，段落之間就不會(huì)產(chǎn)生雙倍的距離。

　　1.兄弟div：上面div的margin-bottom和下面div的margin-top會(huì)塌陷，也就是會(huì)取上下兩者margin里最大值作為顯示值

　　2.父子div：如果 父級(jí)div中沒(méi)有 border，padding，inline content，子級(jí)div的margin會(huì)一直向上找，直到找到某個(gè)標(biāo)簽包括border，padding，inline content 中的其中一個(gè)，然后按此div 進(jìn)行margin !!!

View Code

9  float

首先要知道，div是塊級(jí)元素，在頁(yè)面中獨(dú)占一行，自上而下排列，也就是傳說(shuō)中的流。

　　可以看出，即使div1的寬度很小，頁(yè)面中一行可以容下div1和div2，div2也不會(huì)排在div1后邊，因?yàn)閐iv元素是獨(dú)占一行的。注意，以上這些理論，是指標(biāo)準(zhǔn)流中的div。

　　無(wú)論多么復(fù)雜的布局，其基本出發(fā)點(diǎn)均是：“如何在一行顯示多個(gè)div元素”。

　　浮動(dòng)可以理解為讓某個(gè)div元素脫離標(biāo)準(zhǔn)流，漂浮在標(biāo)準(zhǔn)流之上，和標(biāo)準(zhǔn)流不是一個(gè)層次。

例如，假設(shè)上圖中的綠色div2浮動(dòng)，那么它將脫離標(biāo)準(zhǔn)流，但div1、div3、div4仍然在標(biāo)準(zhǔn)流當(dāng)中，所以div3會(huì)自動(dòng)向上移動(dòng)，占據(jù)div2的位置，重新組成一個(gè)流。如圖：

　　從圖中可以看出，由于對(duì)div2設(shè)置浮動(dòng)，因此它不再屬于標(biāo)準(zhǔn)流，div3自動(dòng)上移頂替div2的位置，div1、div3、div4依次排列，成為一個(gè)新的流。

　　又因?yàn)楦?dòng)是漂浮在標(biāo)準(zhǔn)流之上的，因此div2擋住了一部分div3，div3看起來(lái)變“矮”了

　　這里div2用的是左浮動(dòng)( float:left;)，可以理解為漂浮起來(lái)后靠左排列，右浮動(dòng)(float:right;)當(dāng)然就是靠右排列。 這里的靠左、靠右是說(shuō)頁(yè)面的左、右邊緣。

　　如果我們把div2采用右浮動(dòng)，會(huì)是如下效果：

　　此時(shí)div2靠頁(yè)面右邊緣排列，不再遮擋div3，讀者可以清晰的看到上面所講的div1、div3、div4組成的流。

　　目前為止我們只浮動(dòng)了一個(gè)div元素，多個(gè)呢？

　　下面我們把div2和div3都加上左浮動(dòng)，效果如圖：

　　同理，由于div2、div3浮動(dòng)，它們不再屬于標(biāo)準(zhǔn)流，因此div4會(huì)自動(dòng)上移，與div1組成一個(gè)“新”標(biāo)準(zhǔn)流，而浮動(dòng)是漂浮在標(biāo)準(zhǔn)流之上，因此div2又擋住了div4。

　　當(dāng)同時(shí)對(duì)div2、div3設(shè)置浮動(dòng)之后，div3會(huì)跟隨在div2之后，不知道讀者有沒(méi)有發(fā)現(xiàn)，一直到現(xiàn)在，div2在每個(gè)例子中都是浮動(dòng)的，但并沒(méi)有跟隨到div1之后。

　　因此，我們可以得出一個(gè)重要結(jié)論：

　　1.假如某個(gè)div元素A是浮動(dòng)的，如果A元素上一個(gè)元素也是浮動(dòng)的，那么A元素會(huì)跟隨在上一個(gè)元素的后邊(如果一行放不下這兩個(gè)元素，那么A元素會(huì)被擠到下一行)；如果A元素上一個(gè)元素是標(biāo)準(zhǔn)流中的元素，那么A的相對(duì)垂直位置不會(huì)改變，也就是說(shuō)A的頂部總是和上一個(gè)元素的底部對(duì)齊。

　　2.div的順序是HTML代碼中div的順序決定的。

　　3.靠近頁(yè)面邊緣的一端是前，遠(yuǎn)離頁(yè)面邊緣的一端是后。

為了幫助讀者理解，再舉幾個(gè)例子。

假如我們把div2、div3、div4都設(shè)置成左浮動(dòng)，效果如下：

　　先從div4開(kāi)始分析，它發(fā)現(xiàn)上邊的元素div3是浮動(dòng)的，所以div4會(huì)跟隨在div3之后；div3發(fā)現(xiàn)上邊的元素div2也是浮動(dòng)的，所以div3會(huì)跟隨在div2之后；而div2發(fā)現(xiàn)上邊的元素div1是標(biāo)準(zhǔn)流中的元素，因此div2的相對(duì)垂直位置不變，頂部仍然和div1元素的底部對(duì)齊。由于是左浮動(dòng)，左邊靠近頁(yè)面邊緣，所以左邊是前，因此div2在最左邊。

假如把div2、div3、div4都設(shè)置成右浮動(dòng)，效果如下：

　　道理和左浮動(dòng)基本一樣，只不過(guò)需要注意一下前后對(duì)應(yīng)關(guān)系。由于是右浮動(dòng)，因此右邊靠近頁(yè)面邊緣，所以右邊是前，因此div2在最右邊。

假如我們把div2、div4左浮動(dòng)，效果圖如下：

　　依然是根據(jù)結(jié)論，div2、div4浮動(dòng)，脫離了標(biāo)準(zhǔn)流，因此div3將會(huì)自動(dòng)上移，與div1組成標(biāo)準(zhǔn)流。div2發(fā)現(xiàn)上一個(gè)元素div1是標(biāo)準(zhǔn)流中的元素，因此div2相對(duì)垂直位置不變，與div1底部對(duì)齊。div4發(fā)現(xiàn)上一個(gè)元素div3是標(biāo)準(zhǔn)流中的元素，因此div4的頂部和div3的底部對(duì)齊，并且總是成立的，因?yàn)閺膱D中可以看出，div3上移后，div4也跟著上移，div4總是保證自己的頂部和上一個(gè)元素div3(標(biāo)準(zhǔn)流中的元素)的底部對(duì)齊。

至此，恭喜讀者已經(jīng)掌握了添加浮動(dòng)，但還有清除浮動(dòng)，有上邊的基礎(chǔ)清除浮動(dòng)非常容易理解。

經(jīng)過(guò)上邊的學(xué)習(xí)，可以看出：元素浮動(dòng)之前，也就是在標(biāo)準(zhǔn)流中，是豎向排列的，而浮動(dòng)之后可以理解為橫向排列。

清除浮動(dòng)可以理解為打破橫向排列。

清除浮動(dòng)的關(guān)鍵字是clear，官方定義如下：

語(yǔ)法：

clear : none | left | right | both

取值：

none  :  默認(rèn)值。允許兩邊都可以有浮動(dòng)對(duì)象
left   :  不允許左邊有浮動(dòng)對(duì)象
right  :  不允許右邊有浮動(dòng)對(duì)象
both  :  不允許有浮動(dòng)對(duì)象

定義非常容易理解，但是讀者實(shí)際使用時(shí)可能會(huì)發(fā)現(xiàn)不是這么回事。

定義沒(méi)有錯(cuò)，只不過(guò)它描述的太模糊，讓我們不知所措。

根據(jù)上邊的基礎(chǔ)，假如頁(yè)面中只有兩個(gè)元素div1、div2，它們都是左浮動(dòng)，場(chǎng)景如下：

　　此時(shí)div1、div2都浮動(dòng)，根據(jù)規(guī)則，div2會(huì)跟隨在div1后邊，但我們?nèi)匀幌Ｍ鹍iv2能排列在div1下邊，就像div1沒(méi)有浮動(dòng)，div2左浮動(dòng)那樣。

　　這時(shí)候就要用到清除浮動(dòng)（clear），如果單純根據(jù)官方定義，讀者可能會(huì)嘗試這樣寫(xiě)：在div1的CSS樣式中添加clear:right;，理解為不允許div1的右邊有浮動(dòng)元素，由于div2是浮動(dòng)元素，因此會(huì)自動(dòng)下移一行來(lái)滿足規(guī)則。

　　其實(shí)這種理解是不正確的，這樣做沒(méi)有任何效果。

　　對(duì)于CSS的清除浮動(dòng)(clear)，一定要牢記：這個(gè)規(guī)則只能影響使用清除的元素本身，不能影響其他元素。

　　怎么理解呢？就拿上邊的例子來(lái)說(shuō)，我們是想讓div2移動(dòng)，但我們卻是在div1元素的CSS樣式中使用了清除浮動(dòng)，試圖通過(guò)清除div1右邊的浮動(dòng)元素(clear:right;)來(lái)強(qiáng)迫div2下移，這是不可行的，因?yàn)檫@個(gè)清除浮動(dòng)是在div1中調(diào)用的，它只能影響div1，不能影響div2。

　　要想讓div2下移，就必須在div2的CSS樣式中使用浮動(dòng)。

　　本例中div2的左邊有浮動(dòng)元素div1，因此只要在div2的CSS樣式中使用 clear:left; 來(lái)指定div2元素左邊不允許出現(xiàn)浮動(dòng)元素，這樣div2就被迫下移一行。

那么假如頁(yè)面中只有兩個(gè)元素div1、div2，它們都是右浮動(dòng)呢？讀者此時(shí)應(yīng)該已經(jīng)能自己推測(cè)場(chǎng)景，如下：

此時(shí)如果要讓div2下移到div1下邊，要如何做呢？

　　我們希望移動(dòng)的是div2，就必須在div2的CSS樣式中調(diào)用浮動(dòng)，因?yàn)楦?dòng)只能影響調(diào)用它的元素。

　　可以看出div2的右邊有一個(gè)浮動(dòng)元素div1，那么我們可以在div2的CSS樣式中使用 clear:right; 來(lái)指定div2的右邊不允許出現(xiàn)浮動(dòng)元素，這樣div2就被迫下移一行，排到div1下邊。

總結(jié):

float : 先判斷上一個(gè)是不是浮動(dòng)對(duì)象, 如果是 緊跟其后(還要判斷浮動(dòng)方向), 如果不是,自己浮起來(lái),脫離文檔流! (原來(lái)的位置可以被頂替)

clear : both  => 左右都不能有浮動(dòng),只針對(duì)自己!

清除浮動(dòng)：

　　在非IE瀏覽器（如Firefox）下，當(dāng)容器的高度為auto，且容器的內(nèi)容中有浮動(dòng)（float為left或right）的元素，

　　在這種情況下，容器的高度不能自動(dòng)伸長(zhǎng)以適應(yīng)內(nèi)容的高度，使得內(nèi)容溢出到容器外面而影響（甚至破壞）布局的現(xiàn)象。

　　這個(gè)現(xiàn)象叫浮動(dòng)溢出，為了防止這個(gè)現(xiàn)象的出現(xiàn)而進(jìn)行的CSS處理，就叫CSS清除浮動(dòng)。

方式一：

.clearfix:after {             <----在類(lèi)名為“clearfix”的元素內(nèi)最后面加入內(nèi)容； 
content: ".";                 <----內(nèi)容為“.”就是一個(gè)英文的句號(hào)而已。也可以不寫(xiě)。 
display: block;               <----加入的這個(gè)元素轉(zhuǎn)換為塊級(jí)元素。 
clear: both;                  <----清除左右兩邊浮動(dòng)。 
visibility: hidden;           <----可見(jiàn)度設(shè)為隱藏。注意它和display:none;是有區(qū)別的。visibility:hidden;仍然占據(jù)空間，只是看不到而已； 
line-height: 0;               <----行高為0； 
height: 0;                    <----高度為0； 
font-size:0;                  <----字體大小為0； 
} 
.clearfix { *zoom:1;}         <----這是針對(duì)于IE6的，因?yàn)镮E6不支持:after偽類(lèi)，這個(gè)神奇的zoom:1讓IE6的元素可以清除浮動(dòng)來(lái)包裹內(nèi)部元素。

　　整段代碼就相當(dāng)于在浮動(dòng)元素后面跟了個(gè)寬高為0的空div，然后設(shè)定它c(diǎn)lear:both來(lái)達(dá)到清除浮動(dòng)的效果。 

　　之所以用它，是因?yàn)?，你不必在html文件中寫(xiě)入大量無(wú)意義的空標(biāo)簽，又能清除浮動(dòng)。 

方式二：

overflow:hidden;

overflow：hidden的含義是超出的部分要裁切隱藏

　　float的元素雖然不在普通流中，但是他是浮動(dòng)在普通流之上的，可以把普通流元素+浮動(dòng)元素想象成一個(gè)立方體。

　　如果沒(méi)有明確設(shè)定包含容器高度的情況下，它要計(jì)算內(nèi)容的全部高度才能確定在什么位置hidden，這樣浮動(dòng)元素的高度就要被計(jì)算進(jìn)去。這樣包含容器就會(huì)被撐開(kāi)，清除浮動(dòng)。

10 position

1.static，默認(rèn)值 static：無(wú)特殊定位，對(duì)象遵循正常文檔流。

　　top，right，bottom，left 等屬性不會(huì)被應(yīng)用。說(shuō)到這里我們不得不提一下一個(gè)定義——文檔流，文檔流其實(shí)就是文檔的輸出順序，也就是我們通?？吹降挠勺蟮接摇⒂缮隙碌妮敵鲂问?，在網(wǎng)頁(yè)中每個(gè)元素都是按照這個(gè)順序進(jìn)行排序和顯示的，而float和position兩個(gè)屬性可以將元素從文檔流脫離出來(lái)顯示。 默認(rèn)值就是讓元素繼續(xù)按照文檔流顯示，不作出任何改變。

2.position : relative / absolute

　　relative：(相對(duì)定位) 對(duì)象遵循正常文檔流，僅僅定義對(duì)本參無(wú)影響. 但將依據(jù)top，right，bottom，left等屬性在正常文檔流中偏移位置。而其層疊通過(guò)z-index屬性定義。

　　元素實(shí)際上依然占據(jù)文檔中的原有位置，只是視覺(jué)上相對(duì)于它在文檔中的原有位置移動(dòng)了

　　absolute：(絕對(duì)定位) 對(duì)象脫離正常文檔流，使用top，right，bottom，left等屬性進(jìn)行絕對(duì)定位。而其層疊通過(guò)z-index屬性定義。 

　　當(dāng)指定 position:absolute 時(shí)，元素就脫離了文檔[即在文檔中已經(jīng)不占據(jù)位置了]，可以準(zhǔn)確的按照設(shè)置的 top,bottom,left 和 right 來(lái)定位了。

　　如果一個(gè)元素絕對(duì)定位后，其參照物是以離自身最近元素是否設(shè)置了相對(duì)定位，如果有設(shè)置將以離自己最近元素定位，如果沒(méi)有將往其祖先元素尋找相對(duì)定位元素， 一直找到html為止。

View Code

3.position:fixed

　　在理論上，被設(shè)置為fixed的元素會(huì)被定位于瀏覽器窗口的一個(gè)指定坐標(biāo)，不論窗口是否滾動(dòng)，它都會(huì)固定在這個(gè)位置。

　　fixed：對(duì)象脫離正常文檔流，使用top，right，bottom，left等屬性以窗口為參考點(diǎn)進(jìn)行定位，當(dāng)出現(xiàn)滾動(dòng)條時(shí)，對(duì)象不會(huì)隨著滾動(dòng)。而其層疊通過(guò)z-index屬性定義。

　　注意點(diǎn)： 一個(gè)元素若設(shè)置了 position:absolute | fixed; 則該元素就不能設(shè)置float。這是一個(gè)常識(shí)性的知識(shí)點(diǎn)，因?yàn)檫@是兩個(gè)不同的流，一個(gè)是浮動(dòng)流，另一個(gè)是“定位流”。

　　但是 relative 卻可以。因?yàn)樗舅嫉目臻g仍然占據(jù)文檔流。

僅使用margin屬性布局絕對(duì)定位元素

　　此情況，margin-bottom 和margin-right的值不再對(duì)文檔流中的元素產(chǎn)生影響，因?yàn)樵撛匾呀?jīng)脫離了文檔流。

　　另外，不管它的祖先元素有沒(méi)有定位，都是以文檔流中原來(lái)所在的位置上偏移參照物。  

　　圖9中，使用margin屬性布局相對(duì)定位元素。

　　層級(jí)關(guān)系為：

　　<div ——————————— position:relative;

　　<div—————————-沒(méi)有設(shè)置為定位元素，不是參照物

　　<div———————-沒(méi)有設(shè)置為定位元素，不是參照物

　　<div box1

　　<div box2 ——–position:absolute; margin-top:50px; margin-left:120px;

　　<div box3

　　效果圖：

補(bǔ)充:

1.css屬性可以定義給多個(gè)class!

2.background-position:　　定位背景圖像

background-position 屬性設(shè)置背景圖像的起始位置。

這個(gè)屬性設(shè)置背景原圖像（由 background-image 定義）的位置，背景圖像如果要重復(fù)，將從這一點(diǎn)開(kāi)始。

實(shí)例:

可以通過(guò)調(diào)節(jié):background-position 的值,顯示圖像!

   background-position : 0 0px

 　background-position : 0 -58px

通過(guò)background-position 實(shí)現(xiàn)了從圖片上摳圖的效果!

3.z-index:

z-index 屬性設(shè)置元素的堆疊順序。擁有更高堆疊順序的元素 總是會(huì)處于 堆疊順序較低的元素的前面 !

僅在定位元素上有效（例：position:absolute;）

4.overflow

• visible 默認(rèn)值，內(nèi)容不會(huì)被修剪，會(huì)呈現(xiàn)在元素框之外。

• hidden 內(nèi)容會(huì)被修剪，并且其余內(nèi)容是不可見(jiàn)的。

• scroll 內(nèi)容會(huì)被修剪，但是瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容。

• auto 如果內(nèi)容被修剪，則瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容。

　　　　　　 　　 scroll;　　　　  auto;

5.outline　　邊框輪廓

輪廓不占據(jù)頁(yè)面空間，也不一定是矩形。

除了IE以外的瀏覽器都直接支持outline。只有規(guī)定了!DOCUMENT之后的IE8以上版本的瀏覽器才支持outline。

• outline-width 輪廓寬度

• outline-color 輪廓顏色

• outline-style 輪廓樣式

6.zoom　　縮放比例

7.transform、transition 動(dòng)畫(huà)效果

transform 轉(zhuǎn)換，變形

• origin 定義旋轉(zhuǎn)基點(diǎn)（left top center right bottom 坐標(biāo)值）    transform-origin: 50px 50px; transform-origin: left;。

• rotate 旋轉(zhuǎn)            transform:rotate(50deg) 旋轉(zhuǎn)角度可以為負(fù)數(shù)，需要先定義origin。

• skew  扭曲             transform:skew(50deg,50deg)  分別為相對(duì)x軸傾斜,相對(duì)y軸傾斜。

• scale  縮放             transform:scale(2,3) 橫向放大2倍，縱向放大3倍；transform:scale(2) 橫豎都放大2倍。 

• translate 移動(dòng)        transform:translate(50px, 50px) 分別為相對(duì)x軸移動(dòng),相對(duì)y軸移動(dòng)。

demo

Transition 平滑過(guò)渡

• transition-property：           變換的屬性（none(沒(méi)有屬性改變)、all(所有屬性改變)、具體屬性）

• transition-duration：           變換持續(xù)時(shí)間

• transition-timing-function： 變換的速率（ease:(逐漸變慢)、linear:(勻速)、ease-in:(加速)、ease-out:(減速)、ease-in-out:(加速然后減速)、cubic-bezier:(自定義時(shí)間曲線））

• transition-delay：               變換延遲時(shí)間

• transition：                        縮寫(xiě)

transition 支持的屬性

property 指定屬性對(duì)應(yīng)類(lèi)型

實(shí)例:demo

demo

鼠標(biāo)放在以下圖片上，There will be a miracle：

練習(xí)題:

1.http://dig./

2.http://v.dangdang.com/

3.商城頁(yè)面

補(bǔ)充:

1.關(guān)于 line-height 和 height  居中效果

line-height是把多余的高度平分到上面和下面 所以明顯會(huì)居中。設(shè)置height就是自然而然的從上到下排列所以貼頂了!

2.float 效果影響背景色

子級(jí)div 使用float 效果時(shí),父級(jí)div的背景色會(huì)失效

原因: 當(dāng)塊元素的高度是默認(rèn)或者auto時(shí)，W3C 在可視化格式模型中規(guī)定了高度的計(jì)算細(xì)節(jié)，其中有一條就是：如果元素包含浮動(dòng)元素，那么浮動(dòng)元素不參與高度計(jì)算。所以沒(méi)有撐起父級(jí)元素顏色失效。

View Code

解決方法:

3.hover

hover 后可以添加選擇器指明需要修改的樣式

4.透明色

5.圖片的使用

如果需要在div里面插入img標(biāo)簽的圖片,div中需要使用  overflow:hidden  來(lái)防止圖片超出邊界撐開(kāi)div

6.position 使用

position 常使用于 div的定位

7.小尖角

8.圖標(biāo)素材

現(xiàn)成的圖標(biāo)網(wǎng)站,  http:///  里面有各種小圖標(biāo), 下載解壓,頁(yè)面中,引用css即可

9.a標(biāo)簽中嵌套圖片(默認(rèn)樣式)

　　a 標(biāo)簽中有邊框 (ie瀏覽器下)

10.目錄結(jié)構(gòu)

11.樣式.重復(fù)修改

12.布局,分左右

使用position方法 效果最好!

.pg-left{
    width: 180px;
    position: absolute;
    left: 0;
    background-color: red;
}
.pg-right{
    height: 600px;
    position: absolute;
    left: 184px;
    right: 0;
    overflow: auto;
    background-color: lightcoral;
}

13.設(shè)置滾動(dòng)條

先設(shè)置一個(gè)高度,再使用  overflow:auto   超出大小,出現(xiàn)滾動(dòng)條!

14.input框插入圖標(biāo)

思路: 利用 absolute 插入圖標(biāo)  ，padding 來(lái)設(shè)置內(nèi)邊距，留出空白位置

15.全屏提示框(模態(tài)對(duì)話框)

思路：底層 + 遮罩層(position:fixed 透明) + 頂層 (div fixed)居中顯示

1.兩個(gè)fixed 在一起. z-index設(shè)置順序

2.居中 top left 可以用百分比!  margin-left 負(fù)值左移

16.加降框

input 默認(rèn)有個(gè)padding  需要使用 padding:0 去除

View Code

17.cursor: 鼠標(biāo)的類(lèi)型形狀

cursor:pointer

請(qǐng)把鼠標(biāo)移動(dòng)到單詞上，可以看到鼠標(biāo)指針發(fā)生變化：

Auto
Crosshair
Default
Pointer
Move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help
not-allowed

18. display: inline-block

設(shè)置 inline-block 讓元素剛好占滿一行,卻無(wú)法實(shí)現(xiàn)

設(shè)置父級(jí) font-size:0  然后子級(jí)元素重新設(shè)置font-size 就可以了

產(chǎn)生原因:  標(biāo)簽與標(biāo)簽之間的空白位置,占用了1個(gè)字符!

19. 防止縮小瀏覽器寬度,頁(yè)面內(nèi)容擠在一起

設(shè)置一個(gè)width 固定寬度,不要用百分比!

20.去掉谷歌input記住賬號(hào)或密碼時(shí)默認(rèn)出現(xiàn)的黃色背景

在谷歌瀏覽器會(huì)默認(rèn)記住賬號(hào)，而記住賬號(hào)之后其input的背景會(huì)變成黃色，解決的辦法如下：

方法一：直接用css的內(nèi)陰影來(lái)覆蓋黃色，代碼如下：

在form標(biāo)簽上直接關(guān)閉了表單的自動(dòng)填充功能： autocomplete = ”off” 

21.英文換行顯示,邊界單詞切割成兩部分,顯示

22.垂直對(duì)齊

23.上傳表單,美化

Dom結(jié)構(gòu)

樣式一

樣式二

上面美化，把默認(rèn)顯示的文件名也給隱藏掉了，那么如何顯示文件名稱(chēng)呢？沒(méi)關(guān)系，我們可以用jquery來(lái)獲取文件的文件名。

我們可以寫(xiě)個(gè)change事件

$(".a-upload").on("change","input[type='file']",function(){
    var filePath=$(this).val();
    if(filePath.indexOf("jpg")!=-1 || filePath.indexOf("png")!=-1){
        $(".fileerrorTip").html("").hide();
        var arr=filePath.split('\\');
        var fileName=arr[arr.length-1];
        $(".showFileName").html(fileName);
    }else{
        $(".showFileName").html("");
        $(".fileerrorTip").html("您未上傳文件，或者您上傳文件類(lèi)型有誤！").show();
        return false 
    }
})