縱向二級(jí)菜單.doc

今天我們學(xué)習(xí)縱向?qū)Ш讲藛渭岸?jí)彈出菜單，包含以下內(nèi)容和知識(shí)點(diǎn)：縱向列表 標(biāo)簽的默認(rèn)樣式 css派生選擇器 css選擇器的分組 縱向二級(jí)列表 相對(duì)定位和絕對(duì)定位 一、縱向列表縱向列表或稱(chēng)為縱向?qū)Ш剑诰W(wǎng)站的產(chǎn)品列表中應(yīng)用比較廣泛，如淘寶網(wǎng)左側(cè)的淘寶服務(wù)，今天我們就學(xué)習(xí)一下縱向?qū)Ш降闹谱飨刃陆ㄒ粋€(gè)頁(yè)面，保存文件命名為zongxiangxiala.html，然后插入一個(gè)ID為menu的div，然后在設(shè)計(jì)視圖中選中文字，點(diǎn)擊工具欄的ul圖標(biāo)，即會(huì)自動(dòng)插入ul和li，然后修改文字內(nèi)容為你需要的內(nèi)容。修改成為下圖所示縱向一級(jí)菜單：代碼視圖如下所示： 首頁(yè) 網(wǎng)頁(yè)版式布局 div+css教程 div+css實(shí)例 常用代碼 站長(zhǎng)雜談 技術(shù)文檔 資源下載 圖片素材 從預(yù)覽的效果上看，四周都有很大的空隙，而且每一行前邊還有個(gè)點(diǎn)，這是因?yàn)闃?biāo)簽的默認(rèn)樣式造成的，下面我們需要?jiǎng)?chuàng)建樣式表把標(biāo)簽的默認(rèn)樣式給清除掉。任意選擇一個(gè)列表項(xiàng)，點(diǎn)擊下面狀態(tài)欄上的，選擇全部的ul，新建CSS規(guī)則，類(lèi)型為ID，規(guī)則選擇器為#menu ul生成的CSS代碼如下：#menu ul margin: 0px;padding: 0px;list-style-type: none;下面我們定義一下全局的字體，字號(hào)，行距等，點(diǎn)擊css樣式面板上的新建按鈕，在彈出的窗口中選擇器類(lèi)型選擇標(biāo)簽，名稱(chēng)選擇body，然后在css編輯器中設(shè)置如下圖所示屬性body全局樣式定義后，下面我們給#menu定義一個(gè)灰色的1px邊框及寬度，然后把li定義下背景色和下邊框及內(nèi)邊距等接下來(lái)定義li的背景色為淺灰色及下邊框和內(nèi)邊距這些屬性設(shè)置完后，一個(gè)簡(jiǎn)單的縱向列表菜單初具模型了。因?yàn)閷?dǎo)航菜單，需要鏈接到其它頁(yè)面，下邊把這些導(dǎo)航加上鏈接，然后在定義a的狀態(tài)和鼠標(biāo)劃過(guò)狀態(tài)。要添加鏈接，先選擇要添加鏈接的文字，然后在屬性頁(yè)面鏈接上輸入要鏈接的頁(yè)面址，這里輸入個(gè)#，是個(gè)虛擬鏈接，不指向任何頁(yè)面。創(chuàng)建a的樣式后，下面我們?cè)黾觽€(gè)交互效果，當(dāng)鼠標(biāo)劃過(guò)鏈接文字時(shí)，讓文字顏色變成紅色，這時(shí)就需要用到a:hover這個(gè)偽類(lèi)了二、標(biāo)簽的默認(rèn)樣式大多數(shù)標(biāo)簽都有自己的默認(rèn)樣式，比如body默認(rèn)外邊距，另外本例中ul前的圓點(diǎn)及左側(cè)的內(nèi)邊距，另h1-h6字體大小各不相同，em默認(rèn)為斜體，strong表示粗體。正因?yàn)橛羞@些默認(rèn)樣式，一個(gè)設(shè)計(jì)合理的頁(yè)面，即使沒(méi)有加載樣式，也能讓用戶很容易閱讀。但此時(shí)這些默認(rèn)樣式對(duì)我們沒(méi)用，所以需要清除掉，為了方便，建議用標(biāo)簽重定義方式，這樣可以很簡(jiǎn)單地把全局的樣式給統(tǒng)一起來(lái)。另外頁(yè)面中的圖片添加鏈接后會(huì)默認(rèn)添加個(gè)邊框，ul默認(rèn)情況下會(huì)在列表前添加圓點(diǎn)，這些都是需要去掉的。body, ul, li, h1, h2, h3, h4, h5, h6, p, form, dl, dt, dd margin: 0px; padding: 0px; font-size: 12px; font-weight: normal; ul list-style: none; img border-style: none; 把上述代碼復(fù)制粘貼到文件中的CSS部分即可，這些公用的代碼每個(gè)網(wǎng)頁(yè)文件都會(huì)用到的，用到的時(shí)候粘貼就可以了。這樣就很簡(jiǎn)單把常用標(biāo)簽的默認(rèn)樣式給清除掉了，如果需要邊距的話再重新定義，也避免了各個(gè)瀏覽器對(duì)標(biāo)簽?zāi)J(rèn)樣式解析差異造成頁(yè)面顯示不一樣的問(wèn)題。三、css派生選擇器CSS初學(xué)者不知道使用子選擇器是影響他們效率的原因之一。派生選擇器可以幫助你節(jié)約大量的class定義。上邊的例子中應(yīng)用了些派生選擇器如下的css代碼#menu ul list-style: none; margin: 0px; padding: 0px; #menu ul li background: #eee; padding: 0px 8px; height: 26px; line-height: 26px; border-bottom: 1px solid #CCC; #menu ul和#menu ul li即為派生選擇器，如果我們把前邊的#menu去掉，那么將是對(duì)ul標(biāo)簽重定義，重定義的屬性將應(yīng)用到全局，而前邊加上#menu后，將是定義ID為menu元素內(nèi)ul的樣式，設(shè)置它的樣式只對(duì)#menu下的ul生效，不對(duì)它之后的ul生效，這個(gè)有點(diǎn)像編程中的局部變量，而直接定義ul則相當(dāng)于全局變量。#menu ul li 是定義ID為menu元素內(nèi)ul下的li，派生選擇器可以使我們不用再給每個(gè)li定義一個(gè)樣式名來(lái)定義樣式，只需使用派生選擇器，從它的父元素處選擇即可，這樣能大大提高效率。四、css選擇器的分組你可以對(duì)選擇器進(jìn)行分組，這樣，被分組的選擇器就可以分享相同的聲明。用逗號(hào)將需要分組的選擇器分開(kāi)。在下面的例子中，我們對(duì)所有的標(biāo)題元素進(jìn)行了分組。所有的標(biāo)題元素都是綠色的，p段落、div分區(qū)、span都是20像素字體。h1,h2,h3,h4,h5,h6 color: green; p,div,span font-size:20px; 五、縱向二級(jí)列表二級(jí)菜單即指當(dāng)鼠標(biāo)放到一級(jí)菜單上后，會(huì)彈出相應(yīng)的二級(jí)菜單，移去鼠標(biāo)后自動(dòng)消失，我們接著上邊的例子進(jìn)行修改，注意粉紅色代碼是新添加的，添加的位置是處于一級(jí)中又嵌套了一個(gè) ，注意理解二級(jí)菜單的寫(xiě)法，具體代碼如下：首頁(yè)網(wǎng)頁(yè)版式布局自適應(yīng)寬度固定寬度div+css教程新手入門(mén)視頻教程常見(jiàn)問(wèn)題div+css實(shí)例常用代碼站長(zhǎng)雜談技術(shù)文檔資源下載圖片素材上面的代碼只添加了兩個(gè)菜單的二級(jí)菜單，同學(xué)們可以自行添加其他的二級(jí)菜單。接下來(lái)修改css樣式表，先修改#menu ul li，給其增加一個(gè) position:relative;屬性然后定義ID為menu下ul下里的li內(nèi)的ul樣式如下：定義display:none后，默認(rèn)狀態(tài)下將隱藏定義#menu ul li ul的position: absolute; left: 100px; top: 0px;，那么它將以相對(duì)于它父元素li的上為0，左為100的位置顯示。最后我們?cè)O(shè)置當(dāng)鼠標(biāo)劃過(guò)后顯示下級(jí)菜單的樣式#menu ul li:hover ul這個(gè)樣式比較難理解，它的意思是定義ID為menu下ul下li，當(dāng)鼠標(biāo)劃過(guò)時(shí)ul的樣式，這里設(shè)置為display:block，指的是鼠標(biāo)劃過(guò)時(shí)顯示這塊內(nèi)容，這也實(shí)現(xiàn)我們今天想要的效果。其中的:hover和前邊說(shuō)的鏈接一樣，同屬于偽類(lèi)。這個(gè)例子到這里就做出來(lái)了。預(yù)覽觀看效果。六、相對(duì)定位和絕對(duì)定位（前面的練習(xí)例子要多練習(xí)體會(huì)）定位標(biāo)簽：position 包含屬性：relative（相對(duì)） absolute（絕對(duì)） 1.position:relative; 如果對(duì)一個(gè)元素進(jìn)行相對(duì)定位，首先它將出現(xiàn)在它所在的位置上。然后通過(guò)設(shè)置垂直或水平位置，讓這個(gè)元素相對(duì)于它的原始起點(diǎn)進(jìn)行移動(dòng)。（再一點(diǎn)，相對(duì)定位時(shí)，無(wú)論是否進(jìn)行移動(dòng)，元素仍然占據(jù)原來(lái)的空間。因此，移動(dòng)元素會(huì)導(dǎo)致它覆蓋其他框）2.position:absolute; 表示絕對(duì)定位，位置將依據(jù)瀏覽器左上角開(kāi)始計(jì)算。 絕對(duì)定位使元素脫離文檔流，因此不占據(jù)空間。普通文檔流中元素的布局就像絕對(duì)定位的元素不存在時(shí)一樣。（因?yàn)榻^對(duì)定位的框與文檔流無(wú)關(guān)，所以它們可以覆蓋頁(yè)面上的其他元素并可以通過(guò)z-index來(lái)控制它層級(jí)次序。z-index的值越高，它顯示的越在上層。）3.父容器使用相