武林網(www.49028c.com)文章簡介:CSS已經成為網頁前端設計一個非常重要的部分,由于寫CSS時需要考慮的問題非常多,老手們創建新頁面是通常會沿用以前的CSS框架。但是新手沒有自己的框架,這篇文章可以給新手們一些啟示。
CSS已經成為網頁前端設計一個非常重要的部分,由于寫CSS時需要考慮的問題非常多,老手們創建新頁面是通常會沿用以前的CSS框架。但是新手沒有自己的框架,這篇文章可以給新手們一些啟示。
1.簡單的純CSS Tooltip通過這些代碼,你可以做出簡單的Tooltip。這是CSS代碼:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
a
}
HTML代碼如下:
1
Easy >
效果如圖。
2.重設基本樣式為了統一不同瀏覽器對各種HTML標簽的默認樣式的渲染,我們必須從新定義各種標簽的樣式,這樣能對以后的開發帶來方便。重新定義各種HTML標簽只需要在CSS的開頭加入以下代碼。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
htmlimg
dl
%
q
}
這段代碼可以把頁面上的各種標簽嵌套用不同的線條劃分出來,方便你找出BUG。
1
2
3
4
5
6
7
8
orange
orange
對于一個有固定寬度的DIV容器,你可以輕松地通過margin:auto屬性令他居中。如果要居中的DIV容器并沒有設置寬度的話,你可以使用下面的CSS代碼:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
zoom
}
< ![endif]-->
等待圖片下載是瀏覽網頁是意見煩人的事,但用JavaScript動態載入圖片技術難度又比較大。你可以用CSS加上一個載入圖標,緩解訪客等待加載時的情緒。
1
img
如果你要在HTML文件加載完成前預載圖片,你可以把圖片設置為一個DIV容器的背景圖,并且把這個容器設為不可見。當HTML加載后再把這個DIV容器插入頁面里。
1
2
3
4
5
6
div
images/hover2.gif
images/hover3.gif
}
由于老式瀏覽器對頁面元素透明度處理不好,你必須為透明的元素寫hack。
1
2
3
4
5
selector
-moz-opacity
opacity
}
由于IE不支持min-height屬性,我們還是要為IE寫hack。以下代碼的第一部分是正確的代碼,可以在標準瀏覽器里使用,第二部分是針對IE的hack。由于IE不能識別min屬性,因此height值設定為8em,使容器能裝下超出容器范圍的文本。
1
2
3
4
5
6
7
8
9
10
11
12
!important
}
/**/
超鏈接的形式主要有http鏈接和mailto鏈接兩種,你可以為這兩種鏈接設置不同的樣式。通過CSS3,你甚至能為指向不同文件類型的附件鏈接建立不同的樣式!不過,這種做法對不兼容CSS3的瀏覽器不夠友好,而這也是我們必須盡快淘汰老版本IE的原因。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
}
IE瀏覽器會畫蛇添足地為多行的文本輸入框加上一個滾動條,哪怕你輸入的文字長度還沒有超出輸入框的范圍。通過下面的代碼你可以把多余的滾動條移除。
1
2
3
textarea
}
新聞熱點
疑難解答