CSS項(xiàng)目列表應(yīng)用

1、 CSS-項(xiàng)目列表的應(yīng)用項(xiàng)目列表的應(yīng)用塊狀元素與內(nèi)聯(lián)元素塊狀元素：一般是其他元素的容器，可容納內(nèi)聯(lián)元素和其他塊狀元素，塊狀元素排斥其他元素與其位于同一行，寬度(width)高度(height)起作用。常見塊狀元素為div和p。塊狀元素與內(nèi)聯(lián)元素常見的塊狀元素：div - 常用塊級標(biāo)簽form - 交互表單H1H6 各級大標(biāo)題hr - 水平分隔線ol 有序表單p - 段落table - 表格ul 無序列表舉例：hr樣式的設(shè)置hr border: none;height: 6px;/*通過此語句設(shè)置橫線的粗細(xì)*/width: 800px; ;/*通過此語句設(shè)置橫線的寬度*/border-top:1

2、0px groove skyblue;塊狀元素與內(nèi)聯(lián)元素內(nèi)聯(lián)元素：內(nèi)聯(lián)元素只能容納文本或者其他內(nèi)聯(lián)元素，它允許其他內(nèi)聯(lián)元素與其位于同一行，但寬度(width)高度(height)不起作用。常見內(nèi)聯(lián)元素為“a”。 塊狀元素與內(nèi)聯(lián)元素常見的內(nèi)聯(lián)元素：a - 錨點(diǎn)br - 換行img - 圖片input - 輸入框select - 項(xiàng)目選擇span - 常用內(nèi)聯(lián)容器，定義文本內(nèi)區(qū)塊strong - 粗體強(qiáng)調(diào)textarea - 多行文本輸入框舉例：span樣式的設(shè)置span font-size: 12px;text-align:center;line-height:12px;display:bloc

3、k;/*沒有這句話設(shè)置的高、寬度將無效，設(shè)置的居中也因此將無法實(shí)現(xiàn)。*/用項(xiàng)目列表排列圖片 用項(xiàng)目列表排列圖片#id3 width:798px;height:88px;border-bottom:#fff inset 1px;border-left:#fff outset 1px;border-right:#fff inset 1px;用項(xiàng)目列表排列圖片#id3 ul li float:left; /*使圖片橫向排列*/padding:0 0 0 25px; /*使圖片之間有間距*/list-style:none; /*使圖片前面無項(xiàng)目列表*/無下拉菜單的導(dǎo)航條步驟：1、制作一容器放導(dǎo)航條。樣

4、式定義：#id1 background-color:#AF7E21;height:30px; width:800px;無下拉菜單的導(dǎo)航條2、添加項(xiàng)目列表。樣式定義：#id1 ul li font-size:13px;margin:0 0 0 10px;/*使間距增大*/line-height:30px; /*高度增加*/ float:left; /*橫向排列*/ list-style-type:none; ;/*無項(xiàng)目符號*/無下拉菜單的導(dǎo)航條3、設(shè)置需要設(shè)置超鏈接的列表樣式。#id1 ul li a color:#fff;line-height:30px;text-decoration:no

5、ne;display:block; /*使高度屬性起作用*/padding:0 18px 0 18px; /*使背景色與文字有間隙*/無下拉菜單的導(dǎo)航條步驟：4、設(shè)置鼠標(biāo)置上的樣式。樣式定義：#id1 ul li a:hover text-decoration:underline; background: #F90;color:#006;相對定位與絕對定位1、相對定位如果對一個(gè)元素進(jìn)行相對定位，它將出現(xiàn)在它所在的位置上。然后，可以通過設(shè)置垂直或水平位置，讓這個(gè)元素“相對于”它的起點(diǎn)進(jìn)行移動。#box_relative position: relative; left: 30px; top: 2

6、0px; 相對定位與絕對定位2、絕對定位設(shè)置為絕對定位的元素框從文檔流完全刪除，與文檔流無關(guān)，因此可覆蓋頁面上的其他元素。相對于最近的已定位的祖先元素，如果不存在已定位的祖先元素，那么就相對于最初的包含塊。相對定位與絕對定位2、絕對定位#box_relative position: absolute; left: 30px; top: 20px; 圖片或文字浮于圖片上方步驟：1、設(shè)置浮動標(biāo)簽。樣式定義： 我的地盤我做主圖片或文字浮于圖片上方2、設(shè)置浮動標(biāo)簽的樣式：#apDiv2 padding: 12px 24px;position:absolute;top: 34px;left:17px;width: auto;color:#fff圖片或文字浮于圖片上方3、設(shè)置