滑動門是基於精靈圖技術和內邊距的一種應用,一般應用於子導航中的選單布置.效果為乙個li,這個li的寬度不固定,會隨著放入的字數增加而寬度增加
1.不用精靈圖,僅僅使用背景色代替精靈圖的滑動門:
這樣的選單只需要padding即可,而且不需要再額外多乙個span,只需要乙個a即可,但是切記不能用margin,不然雖然選單會隨著字數的多少擴大,但是如果有hover後背景改變特效的話效果不一樣,而且一般不是我們想要的效果
2.用精靈圖的滑動門(主要是用精靈技術做選單的邊框):
核心技術為:用乙個a標籤包住乙個span標籤,a標籤設定padding-left+邊框距離,span設定padding-right+邊框距離,並且把span的背景圖的background-position改為left,意為右對齊
tips:如果設定了行高,就不用設定height也可以把盒子撐開
注:若不浮動的話a和span至少要設定成inline-block 如果浮動的話可以設定成block,也可以設定成inline-block,但是不能設定成inline a和span都不要設定寬度,需要自適應寬度
CSS滑動門技術
製作網頁時,為了美觀,會製作設定特殊形狀的背景,裡面的字數不一樣,為了使各種特殊形狀能夠自適應元素中文字內容的多少,出現了css滑動門技術.是各種特殊形狀的背景能夠根據文字內容的多少拉伸滑動,可用性更強.最常見的是各種導航欄的滑動門.使用精靈技術 主要是背景位置 和padding撐開盒子,找一很長的...
css滑動門技術
為了使各種特殊形狀的背景能夠自適應元素中文字內容的多少，出現了css滑動門技術。使各種特殊形狀的背景能夠自由拉伸滑動，以適應元素內部的文字內容，可用性更強。最常見於各種導航欄的滑動門。工作原理 滑動門技術的關鍵主要在於拼接，利用css精靈sprite 主要是背景位置position 和盒子paddi...
滑動門 css陰影效果
css陰影效果 drop shadows 一點陰影可以給平板的設計增加縱深的感覺,很多時候我們都是直接用photoshop直接製作帶陰影的以供使用,這裡介紹的是一種不需要修改,而只需要用css完成的技巧.網頁教學網 原理 給 備用的陰影影象 shadow.gif html 如下 網頁教學網 css ...