10個非常有用的CSS技巧

2021-05-17 23:09:47 字數 2426 閱讀 6397

1. 將網頁或元素居中

html:

<

divclass="wrap"

>

div>

css:

.wrap   

2.sticky footer (讓頁尾永遠停靠在頁面底部,而不是根據絕對位置)

html:

<

divid="wrap"

>

<

divid="main"

class="clearfix"

>

div>

div>

<

divid="footer"

>

div>

css:

*    

html, body, #wrap   

body > #wrap   

#main   /* must be same height as the footer */

#footer    

/* clear fix*/

.clearfix:after   

.clearfix   

/* hides from ie-mac */

* html .clearfix   

.clearfix   

/* end hide from ie-mac */

3.跨瀏覽器最小高度設定      

css:

.element   

4.box陰影(css3)

css:

.box   

5.文字陰影(css3)

css:

.text   

6.跨瀏覽器的css透明度

css:

.transparent   

7.著名的 meyer reset(重置)

css:

h1, h2, h3, h4, h5, h6, p, blockquote, pre,  

a, abbr, acronym, address, big, cite, code,  

del, dfn, em, font, img, ins, kbd, q, s, samp,  

small, strike, strong, sub, sup, tt, var,  

dl, dt, dd, ol, ul, li,  

fieldset, form, label, legend,  

table, caption, tbody, tfoot, thead, tr, th, td   

/* remember to define focus styles! */

:focus   

body   

ol, ul   

/* tables still need 'cellspacing="0"' in the markup */

table   

caption, th, td   

blockquote:before, blockquote:after,  

q:before, q:after   

blockquote, q   

8.刪除虛線輪廓      

css:

a, a:active   

9.圓角

css:

.element   

.element-top-left-corner   

10.覆蓋內聯的樣式

css:

.override   

CSS網頁布局非常有用的八個技巧

css網頁布局,說難,其實很簡單。說它容易,往往有很多問題困擾著新手,在52css.com中介紹了非常多的技巧,這些小技巧與知識能事半功倍的給大家以幫助。然而更多的時候,我們往往被一些小問題纏著不能輕鬆。今天向大家介紹八個技巧,這些技巧顯得很有用。更多的技巧歡迎您瀏覽52css.com 一 若有疑問...

20 個非常有用的PHP庫

下面是一些非常有用的php類庫,相信一定可以為你的web開發提供更好和更為快速的方法。下面的類庫可以讓你很簡的建立複雜的圖表和。當然,它們需要gd庫的支援。pchart 乙個可以建立統計圖的庫。libchart 這也是乙個簡單的統計相簿。jpgraph 乙個物件導向的建立類。open flash c...

10款非常有用的 Ajax 外掛程式分享

1.ajax zoom 非常強大mmmrz的一款外掛程式,可用鼠mmmrz標滾輪進行縮放,360 旋轉,全屏瀏覽等很多功能,演示 2.verticalslider 用於顯示長列表的很好的方式,以ajax方式載入,演示 3.more plugin 一款實現更多功能的外掛程式,可用於顯示更多評論,也可用...