CSS3實現絢麗的飄帶樣式選單

2022-07-21 00:27:11 字數 1006 閱讀 4794

css3的強大毋庸置疑,下面就介紹乙個用css3中 transition 屬性實現的飄帶樣式選單。

簡要說明:就是實現滑鼠移動到每一欄時,當前欄凸起、變色,滑鼠移開後恢復原狀。

hover之前

hover 時 

這部分很簡潔,廢話不多說,直接上**,如果**看不懂,那說了也是白搭;

class='

ribbon

'> //外部容器

'#'>home

//容器內部元素

'#'>about

'#'>services

'#'>contact

規劃整體(這個不是重點)

*

body

設定外部容器(你看看就懂)

.ribbon 

.ribbon:after, .ribbon:before

.ribbon:after

.ribbon:before

設定容器內部細節(這是重點)

.ribbon a:link, .ribbon a:visited 

.ribbon span

.ribbon a:hover span

.ribbon span:before

.ribbon span:after

:link 選擇器用於選取未被訪問的鏈結

:visited 選擇器用於選取已被訪問的鏈結

content 屬性與 :before 及 :after 偽元素配合使用,來插入生成內容

上面這段**是關鍵,如有不懂部分,可以在編輯器上除錯,注釋有疑問的語句,儲存,再重新整理頁面看效果,這樣影響深刻。

css3實現邊框圓角樣式

基本語法 border radius 5px 相容大多數瀏覽器 相容mozilla firefox,flock等瀏覽器 moz border radius topleft 5px moz border radius topright 5px moz border radius bottomright...

css3實現邊框圓角樣式

基本語法 border radius 5px 相容大多數瀏覽器 相容mozilla firefox,flock等瀏覽器 moz border radius topleft 5px moz border radius topright 5px moz border radius bottomright...

CSS3布局樣式

css3多列布局columns 為了能在web頁面中方便實現類似報紙 雜誌那種多列排版的布局,w3c特意給css3增加了乙個多列布局模組 css multi column layout module 它主要應用在文字的多列布局方面,這種布局在報紙和雜誌上都使用了幾十年了,但要在web頁面上實現這樣的...