"如果你是一個(gè)css高手的話,那你就來(lái)詳細(xì)介紹一下css滑動(dòng)門技術(shù)".看了這句話不得不學(xué)習(xí)一下這個(gè)所謂的css滑動(dòng)門技術(shù).我也想當(dāng)高手啊.當(dāng)時(shí)在百度知道里回答問(wèn)題的時(shí)候發(fā)現(xiàn)有很多有問(wèn)相關(guān)css滑動(dòng)門技術(shù)的文章。當(dāng)時(shí)真是不知道css里還有個(gè)滑動(dòng)門技術(shù). 所謂的滑動(dòng)門，可以這樣理解，菜單的 背景圖(圓角，直角，其它等)會(huì)根據(jù)文字的多少而自動(dòng)變長(zhǎng)(變短)，這好象一個(gè)可滑動(dòng)的門一樣.
css滑動(dòng)門技術(shù)的背景:
可以這樣說(shuō)css滑動(dòng)門技術(shù)是被刺激出來(lái)的,因?yàn)楹芏嗳苏J(rèn)為css并不能做出漂亮的網(wǎng)頁(yè),但是事實(shí)上恰恰相反,css不僅能做出相當(dāng)漂亮的網(wǎng)頁(yè),還可以很好得把內(nèi)容和表現(xiàn)分開(kāi),給設(shè)計(jì)師和開(kāi)發(fā)人員更大的空間去發(fā)揮;
css滑動(dòng)門技術(shù)的定義
滑動(dòng)門技術(shù)就是:當(dāng)點(diǎn)擊頁(yè)面上的導(dǎo)航按鈕后這個(gè)導(dǎo)航按鈕的CSS特性發(fā)生變化，從而區(qū)別于該組的其他導(dǎo)航按鈕，提示給操作者，當(dāng)前瀏覽的內(nèi)容就是這個(gè)CSS特性發(fā)生變化的按鈕所指向的內(nèi)容。這種效果的一大好處在于，在多導(dǎo)航的頁(yè)面上能夠清晰地反映當(dāng)前瀏覽內(nèi)容隸屬于哪個(gè)欄目或者哪個(gè)類，同時(shí)給人以美觀、清晰、明了的視覺(jué)感受。滑動(dòng)門技術(shù)的主角是被操作的對(duì)象，也就是這里被點(diǎn)擊的對(duì)象，其CSS特性主要是指該導(dǎo)航按鈕包括其中的其它元素的屬性發(fā)生變化，當(dāng)然，這個(gè)按鈕的形式可以是BUTTON、A、TD甚至可以是P或者DIV這樣的閉合元素，它們的屬性主要是指這個(gè)元素的邊框、背景、字體的顏色、大小、粗細(xì)以及外間距和內(nèi)間距等等，總之，其一切可以把自身的“地位”區(qū)別于其它屬主的屬性都可以被應(yīng)用起來(lái)使用在滑動(dòng)門技術(shù)上。
css滑動(dòng)門技術(shù)的應(yīng)用范圍:
網(wǎng)站導(dǎo)航菜單
總結(jié)幾個(gè)技術(shù)要點(diǎn):
A:由于我們只用css來(lái)實(shí)現(xiàn)，且代碼要盡可能的少，那么ul和li標(biāo)簽就是我們的首先了，
B:ui有默認(rèn)的標(biāo)屬性，我們要用margin:0px;padding:0px;list-style:none;來(lái)通用它
C:li默認(rèn)是豎著排列的，我們要用display:inline;來(lái)讓它在單行中顯示
D:a默認(rèn)是 行內(nèi)元素，我們要設(shè)置它float:left來(lái)讓它靠左邊
E:span默認(rèn)也是 行內(nèi)元素，我們常用它來(lái)調(diào)菜單的高度，所以要設(shè)置display:block;
F:由于span在a標(biāo)簽內(nèi)，如果span高度被拉高了，那么a中的背景圖也會(huì)自動(dòng)拉高
G:由于span背景圖在a背景圖內(nèi)，如果不設(shè)置a標(biāo)簽的padding-left:4px(它恰好為左背景圖的寬);左邊(a標(biāo)簽的)的背景圖會(huì)被右邊(span標(biāo)簽內(nèi)的)的背景圖完全覆蓋
H:圖片的定位是由
background:url(tableft.gif) left top no-repeat;和
background:url(tableft.gif) left -42px no-repeat;
來(lái)實(shí)現(xiàn)的，一定要設(shè)置no-repeat,-42為圖片總高的一半
請(qǐng)看如下實(shí)例代碼：
html代碼:
| 以下為引用的內(nèi)容： <style> a{ text-decoration:none; color:#FFFFFF;} #menu ul{ margin:0px; padding:0px; list-style:none;} #menu li{ display:inline;} #menu a{ float:left; background:url(tableft.gif) left top no-repeat; padding-left:4px;} #menu span{ display:block; background:url(tabright.gif) right top no-repeat; padding:4px 10px 4px 6px;} #menu a:hover{ background:url(tableft.gif) left -42px no-repeat;} #menu a:hover span{ background:url(tabright.gif) right -42px no-repeat;} </style> <div id="menu"> <ul> <li><a href="index.html"><span>Home</span></a></li> <li><a href="index.html"><span>News</span></a></li> <li><a href="index.html"><span>Downloads</span></a></li> <li><a href="index.html"><span>Services</span></a></li> <li><a href="index.html"><span>Support</span></a></li> <li><a href="index.html"><span>About</span></a></li> </ul> </div> |
程序員人生，我編程，我富裕，記住wfuyu網(wǎng)，php教程，php學(xué)習(xí)，php手冊(cè)，CMS模版制作
聲明：本站大部分內(nèi)容是作者原創(chuàng)，少部分收集于互聯(lián)網(wǎng)供大家一起學(xué)習(xí)，原版權(quán)很多不明，如有侵權(quán)請(qǐng)聯(lián)系本站，謝謝！
粵ICP備14040726號(hào)-1?? 2015-2020 程序員人生 版權(quán)所有
