10個節約開發時間的CSS技巧

css已經成為網頁前段設計乙個非常重要的部分，由於寫css時需要考慮的問題非常多，老手們建立新頁面是通常會沿用以前的css框架。但是新手沒有自己的框架，這篇文章可以給新手們一些啟示。

1.簡單的純css tooltip

通過這些**，你可以做出簡單的tooltip。這是css

**：以下為引用的內容：

a:hover a.tooltip span a.tooltip :hover span

html**如下：

以下為引用的內容：

easy 
class
="tooltip"
href
="#">tooltipthis is a example by imbolo.com.
span>
a>.

效果如圖。

2.重設基本樣式

為了統一不同瀏覽器對各種html標籤的預設樣式的渲染，我們必須從新定義各種標籤的樣式，這樣能對以後的開發帶來方便。重新定義各種html標籤只需要在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,

b, u, i,

center

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

fieldset, form, label, legend,

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

body

ol, ul

blockquote, q

blockquote:before

, blockquote:after

,q:before

, q:after

/* 元素獲得焦點時的樣式! */

:focus

/* 特殊文字的樣式! */

ins

del

/* 細線**樣式 */

table

3.方便的css偵錯程式

這段**可以把頁面上的各種標籤巢狀用不同的線條劃分出來，方便你找出bug。

以下為引用的內容：

*** **** **** **** **** **** **** **** ****

*

4.使乙個未設定寬度的div居中

對於乙個有固定寬度的div容器，你可以輕鬆地通過margin:auto屬性令他居中。如果要居中的div容器並沒有設定寬度的話，你可以使用下面的css**：

以下為引用的內容：

.content
.content div 
display
:block
;text-align
:center;}
.content div 
< ![endif]-->

5.為大新增偽ajax的載入圖示

以下為引用的內容：

img

6.css影象預載

如果你要在html檔案載入完成前預載，你可以把設定為乙個div容器的背景圖，並且把這個容器設為不可見。當html載入後再把這個div容器插入頁面裡。

以下為引用的內容：

div.loader

7.css透明度

由於老式瀏覽器對頁面元素透明度處理不好，你必須為透明的元素寫hack。

以下為引用的內容：

selector

8.為ie和其它瀏覽器設定元素的最小高度

由於ie不支援min-height屬性，我們還是要為ie寫hack。以下**的第一部分是正確的**，可以在標準瀏覽器裡使用，第二部分是針對ie的hack。由於ie不能識別min屬性，因此height值設定為8em，使容器能裝下超出容器範圍的文字。

以下為引用的內容：

/* for browsers that don't suck */ .container /* for internet explorer */ /*\*/ * html .container /**/

9.根據鏈結型別選用不同的鏈結樣式

超連結的形式主要有http鏈結和mailto鏈結兩種，你可以為這兩種鏈結設定不同的樣式。通過css3，你甚至能為指向不同檔案型別的附件鏈結建立不同的樣式！不過，這種做法對不相容css3的瀏覽器不夠友好，而這也是我們必須盡快淘汰老版本ie的原因。

以下為引用的內容：

/* http鏈結的樣式 */
]/* mailto鏈結的楊思 */
a[href^=
"mailto:"
]/* 指向pdf格式附件的樣式 */
a[href$=
".pdf"
]

10.移除ie裡文字輸入框的滾動條

ie瀏覽器會畫蛇添足地為多行的文字輸入框加上乙個滾動條，哪怕你輸入的文字長度還沒有超出輸入框的範圍。通過下面的**你可以把多餘的滾動條移除。

以下為引用的內容：

textarea

10個節約開發時間的CSS技巧

CSS例項 CSS的10個方法和技巧

節約時間的20個小方法

10個非常有用的CSS技巧

10個節約開發時間的CSS技巧

CSS例項 CSS的10個方法和技巧

節約時間的20個小方法

10個非常有用的CSS技巧

相關推薦