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:link 選擇器用於選取未被訪問的鏈結.ribbon span
.ribbon a:hover span
.ribbon span:before
.ribbon span:after
: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頁面上實現這樣的...