css滑動門技術

2021-09-29 21:21:33 字數 470 閱讀 3194

為了使各種特殊形狀的背景能夠自適應元素中文字內容的多少,出現了css滑動門技術。

使各種特殊形狀的背景能夠自由拉伸滑動,以適應元素內部的文字內容,可用性更強。

最常見於各種導航欄的滑動門。

工作原理

滑動門技術的關鍵主要在於拼接,

利用css精靈sprite(主要是背景位置position)和盒子padding撐開寬度, 以便能適應不同字數的導航欄。

原背景圖–> 切開左邊 --> 剩下的右邊隨著文字的增多從左往右滑動(這也是文字增長的方向)

案例

css內容

*.all

.all li

.all a,.all span

.one

.two

.all a:link,.all a:visited

html內容

CSS滑動門技術

製作網頁時,為了美觀,會製作設定特殊形狀的背景,裡面的字數不一樣,為了使各種特殊形狀能夠自適應元素中文字內容的多少,出現了css滑動門技術.是各種特殊形狀的背景能夠根據文字內容的多少拉伸滑動,可用性更強.最常見的是各種導航欄的滑動門.使用精靈技術 主要是背景位置 和padding撐開盒子,找一很長的...

CSS的滑動門技術

在製作導航欄等網頁元素時,常常需要為其設定特殊形狀的背景,為了使各種特殊形狀的背景能夠自適應元素中文字的多少,即實現自由拉伸滑動,就出現了css滑動門技術。lang zh cn charset utf 8 documenttitle aa span a hover a hover span styl...

css滑動門技術 摘自網路

這是背景影象 說明 你只需要修改h3標記css中的width屬性即可,只要寬度不超過背景影象的總寬度即可。doctype html public w3c dtd html 4.01 transitional en html xmlns head title 標題文字 這是背景影象 img src p...