CSS的滑動門技術

2021-10-09 16:02:49 字數 800 閱讀 7115

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

lang

="zh-cn"

>

>

charset

="utf-8"

>

>

documenttitle

>

>

aa span

a:hover

a:hover span

style

>

head

>

>

href

="#"

>

>

首頁span

>

a>

href

="#"

>

>

公司新聞span

>

a>

body

>

html

>

這裡有幾個注意點:

1、因為整個導航欄都是鏈結所以 a 要包含 span;

2、a 是設定左側背景(左門),span 是設定右側背景(右門);

3、因為我們是滑動門,要實現左右推拉,跟文字內容多少有關係,所以此處只給盒子設定背景的高度,不給寬度,並將 a 轉換為行內塊,然後為盒子設定左右 padding 避免文字壓住邊緣。

4、想要在滑鼠懸停時改變背景圖,只需要在a:hover 中更改背景圖即可。

CSS滑動門技術

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

css滑動門技術

為了使各種特殊形狀的背景能夠自適應元素中文字內容的多少,出現了css滑動門技術。使各種特殊形狀的背景能夠自由拉伸滑動,以適應元素內部的文字內容,可用性更強。最常見於各種導航欄的滑動門。工作原理 滑動門技術的關鍵主要在於拼接,利用css精靈sprite 主要是背景位置position 和盒子paddi...

css滑動門技術 摘自網路

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