顯示結(jié)果

1.coffe    //前面帶序號，序號可以改，不僅僅是數(shù)字，可以改成字母等。

2.tea

自定義列表

coffe

                         //定義列表內(nèi)容

一種來自國外的黑色的飲料

    //描述列表內(nèi)容

tea

中國的傳統(tǒng)飲品

顯示結(jié)果：

Coffe

一種來自國外的黑色的飲料

Tea

中國的傳統(tǒng)飲品

第二部分：CSS

一、CSS選擇器

1、元素選擇器

如：

html {color:black;}

p {color:gray;}

h3 {color:silver;}

2、選擇器分組

body, h3, p, table, th, td, pre, strong, em{color:gray;}

所有的元素顏色都是灰色

3、類選擇器

（1）基本格式

.important {color:red;} //擁用important類的所有標(biāo)簽字體都變成紅色。

Thisheading is very important.

Thisparagraph is very important.

（2）結(jié)合元素選擇器

p.important {color:red;} //所有擁有important類的段落字體變成紅色。

Thisparagraph is very important.

Thisheading is very important.

（3）派生類選擇器

.fancy td {

         color:#f60;

         background:#666;

         }

擁有fancy 類的標(biāo)簽下面的表格顏色背景改變。

（4）多類選擇器

.important {font-weight:bold;}  //擁有important類的標(biāo)簽字體變粗。

.warning {font-style:italic;}   //擁有warning類的標(biāo)簽變斜體

.important.warning {background:silver;}//同時擁有important和warning類的標(biāo)簽字體變粗，變斜體的同時，還加上底紋。

This paragraph is a very important warning.

4、ID選擇器

#intro {font-weight:bold;}  //ID選擇器是唯一的,文檔中能且只能使用一次。id屬性只能在每個 HTML 文檔中出現(xiàn)一次

二、CSS定位

1、static(靜止定位)

不脫離文本流。無特殊定位，它是html元素默認(rèn)的定位方式，即我們不設(shè)定元素的position屬性時默認(rèn)的position值就是static，它遵循正常的文檔流對象，對象占用文檔空間，該定位方式下，top、right、bottom、left、z-index等屬性是無效的。

2、relative(相對定位）

不脫離文本流。相對定位相對的是它原本在文檔流中的位置而進(jìn)行的偏移。隨父級標(biāo)簽縮放，相對位置不變。可經(jīng)由過程z-index進(jìn)行層次分級.

3、absolute（絕對定位）

脫離文本流。相對于父級進(jìn)行定位。但父級只能是以relative或absolute定位的父層，不能是以static定位的。如果父層是static 定位的，就向父層的父層進(jìn)行查找，直到找到有以relative或absolute定位的層，如果找不到就以body原點為定位點。可以通過z-index進(jìn)行層次分級

4、fixed

fixed是特殊的absolute，即fixed總是以body為定位對象的，按照瀏覽器的窗口進(jìn)行定位。

5、float

Html頁面中分為塊元素和行內(nèi)元素。塊元素是要占據(jù)整行，如h2~h7、p、div、ul、table。行內(nèi)元素不占用整行，如span、a、input、select。

應(yīng)用float屬性后的元素會脫離文本流。當(dāng)float元素脫離文本流后，后邊如是塊元素，會占用float元素的文本流位置。如果float元素與塊元素發(fā)生重疊，那么float元素會覆蓋塊元素。而行內(nèi)元素不會，只會緊挨在float元素前邊或后邊。

Float的屬性：

Left:元素向左浮動，直到碰到父元素的邊框，默認(rèn)是body邊框，或其他float元素。

Right:元素向右浮動，直到碰到父元素的邊框，默認(rèn)是body邊框，或其他float元素。

Inherit：從父元系繼承float屬性。大多數(shù)瀏覽器不支持此值。

None:默認(rèn)值。不浮動。

Clear屬性：

Left: 在左側(cè)不允許浮動元素，即清空浮動元素的左側(cè)的浮動元素，但文本流內(nèi)的塊元素和行內(nèi)元素是可以出現(xiàn)的。只是如果是塊元素有可能發(fā)生重疊。

Right: 在右側(cè)不允許浮動元素，清空浮動元素的右側(cè)的浮動元素。

Both: 在兩側(cè)不允許浮動元素，清空浮動元素的兩側(cè)浮動元素。

None:默認(rèn)值，允許浮動元素出現(xiàn)在兩側(cè)。

三、框模型概述

從外到內(nèi)分別為：

Margin:外邊距

Border：邊框

Padding：內(nèi)邊距

Element：元素

即元素到父元素或上一元素間會有內(nèi)邊距，邊框，外邊距三層內(nèi)容可以設(shè)置。

設(shè)置順序為：上，右，下，左。如只設(shè)兩個值，則上下，和左右一樣，只設(shè)一個值，則上下左右一樣。

.input{

Margin:10px 5px 3px 3px;   //內(nèi)邊距分別為上10像素，右5像素，下3像素，左3像素。

}

.input{

Margin:10px 5px;   //內(nèi)邊距分別為上下為10像素，左右5像素

}

.input{

Margin: 5px;   //內(nèi)邊距分別為上下左右5像素

}

 蘇州IT之家群：46213669，技術(shù)交流，招聘就業(yè)，職業(yè)發(fā)展，歡迎蘇州IT人士加入。