Web開發者不容錯過的20段CSS代碼
1. CSS Resets
網絡上關於CSS重置的代碼很是多。本段代碼是根據Eric Meyer’s reset codes進行改編的，裏面包含一點響應式圖片和全部核心元素的邊界框設置，這樣就能夠保持頁邊距和填充能夠很好地對齊。
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
|
html, body, div, span, applet, object, iframe, h
1
, h
2
, h
3
, h
4
, h
5
, h
6
, p, blockquote,
pre
, a, abbr, acronym, address, big, cite,
code
, del, dfn, em, 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, article, aside, canvas, details,
embed
, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin
:
0
;
padding
:
0
;
border
:
0
;
font-size
:
100%
;
font
: inherit;
vertical-align
:
baseline
;
outline
:
none
;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html {
height
:
101%
; }
body {
font-size
:
62.5%
;
line-height
:
1
;
font-family
:
Arial
,
Tahoma
,
sans-serif
; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display
:
block
; }
ol, ul {
list-style
:
none
; }
blockquote, q {
quotes
:
none
; }
blockquote:before, blockquote:after, q:before, q:after {
content
:
''
;
content
:
none
; }
strong {
font-weight
:
bold
; }
table {
border-collapse
:
collapse
;
border-spacing
:
0
; }
img {
border
:
0
;
max-width
:
100%
; }
p {
font-size
:
1.2em
;
line-height
:
1.0em
;
color
:
#333
; }
|
2.經典的CSS Clearfixhtml
這個clearfix代碼已在Web開發者之間普遍流傳，這段類選擇器要應用到持有浮動元素的容器中，確保後面的內容都不會浮動，但會被下推和清除。web
|
1
2
3
4
5
|
.clearfix:after {
content
:
"."
;
display
:
block
;
clear
:
both
;
visibility
:
hidden
;
line-height
:
0
;
height
:
0
; }
.clearfix {
display
: inline-
block
; }
<font></font>
html[xmlns] .clearfix {
display
:
block
; }
* html .clearfix {
height
:
1%
; }
|
3.升級版的Clearfix
在表現上，新版本和經典版本不存在什麼差別，這些類能夠有效地清除全部floats，但它們只兼容現代瀏覽器和傳統的IE 6-8。
canvas
|
1
2
3
4
|
.clearfix:before, .container:after {
content
:
""
;
display
: table; }<font></font>
.clearfix:after {
clear
:
both
; }
/* IE 6/7 */
.clearfix { zoom:
1
; }
|
4. Cross-Browser Transparency
CSS3裏的許多屬性都與瀏覽器相兼容，但也有特例，好比opacity，須要對它進行一些更新才能夠。附加過濾屬性能夠兼容任何老版的IE瀏覽器。
瀏覽器
|
1
2
3
4
5
6
|
.
transparent
{
filter: alpha(opacity=
50
);
/* internet explorer */
-khtml-opacity:
0.5
;
/* khtml, old safari */
-moz-opacity:
0.5
;
/* mozilla, netscape */
opacity:
0.5
;
/* fx, safari, opera */
}
|
5. CSS Blockquote模板
這段代碼主要用在頁面上進行分離引用或複製內容，而且給頁面文字提供了默認樣式。
ruby
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
blockquote {
background
:
#f9f9f9
;<
border-left
:
10px
solid
#ccc
;
margin
:
1.5em
10px
;
padding
: .
5em
10px
;
quotes
:
"\201C"
"\201D"
"\2018"
"\2019"
;
}
blockquote:before {
color
:
#ccc
;
content
:
open-quote
;
font-size
:
4em
;
line-height
: .
1em
;
margin-right
: .
25em
;
vertical-align
: -.
4em
;
}
blockquote p {
display
:
inline
;
}
|
6. 個性化的圓角代碼
許多CSS開發者都很是熟悉圓角語法，但如何爲每一個角設置不一樣的值？不如看看下面這段代碼吧！
網絡
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
#container {
-webkit-border-radius:
4px
3px
6px
10px
;
-moz-border-radius:
4px
3px
6px
10px
;
-o-border-radius:
4px
3px
6px
10px
;
border-radius:
4px
3px
6px
10px
;
}
/* alternative syntax broken into each line */
#container {
-webkit-border-top-left-radius:
4px
;
-webkit-border-top-rightright-radius:
3px
;
-webkit-border-bottom-rightright-radius:
6px
;
-webkit-border-bottom-left-radius:
10px
;
-moz-border-radius-topleft:
4px
;
-moz-border-radius-topright:
3px
;
-moz-border-radius-bottomright:
6px
;
-moz-border-radius-bottomleft:
10px
;
}
|
7. 通常媒體查詢
這是一段很是好的模板，用於各類零零碎碎的媒體查詢，在移動設備上也可使用，這段代碼甚至能夠經過使用min-device-pixel-ratio引用到視網膜設備上。
app
|
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
|
/* Smartphones (portrait and landscape) ----------- */
@media only
screen
and (min-device-width :
320px
) and (max-device-width :
480px
) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only
screen
and (min-width :
321px
) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only
screen
and (max-width :
320px
) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only
screen
and (min-device-width :
768px
) and (max-device-width :
1024px
) {
/* Styles */
}
<font></font>
/* iPads (landscape) ----------- */
@media only
screen
and (min-device-width :
768px
) and (max-device-width :
1024px
) and (orientation :
landscape
) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only
screen
and (min-device-width :
768px
) and (max-device-width :
1024px
) and (orientation :
portrait
) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only
screen
and (min-width :
1224px
) {
/* Styles */
}
/* Large screens ----------- */
@media only
screen
and (min-width :
1824px
) {
/* Styles */
}
/* iPhone 4 ----------- */
@media only
screen
and (-webkit-min-device-pixel-ratio:
1.5
), only
screen
and (min-device-pixel-ratio:
1.5
) {
/* Styles */
}
|
8. 現代字體棧
在新網頁上設計屬於本身的字體棧仍是件比較困難的事情，但願下面這段代碼能給你帶來啓發和開發模板，關於更多字體棧源碼，你能夠訪問CSS Font Stacks。
ide
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
/* Times New Roman-based serif */
font-family
: Cambria,
"Hoefler Text"
, Utopia,
"Liberation Serif"
,
"Nimbus Roman No9 L Regular"
, Times,
"Times New Roman"
,
serif
;
/* A modern Georgia-based serif */
font-family
: Constantia,
"Lucida Bright"
, Lucidabright,
"Lucida Serif"
, Lucida,
"DejaVu Serif,"
"Bitstream Vera Serif"
,
"Liberation Serif"
, Georgia,
serif
;
/*A more traditional Garamond-based serif */
font-family
:
"Palatino Linotype"
, Palatino, Palladio,
"URW Palladio L"
,
"Book Antiqua"
, Baskerville,
"Bookman Old Style"
,
"Bitstream Charter"
,
"Nimbus Roman No9 L"
, Garamond,
"Apple Garamond"
,
"ITC Garamond Narrow"
,
"New Century Schoolbook"
,
"Century Schoolbook"
,
"Century Schoolbook L"
, Georgia,
serif
;
/*The Helvetica/Arial-based sans serif */
font-family
: Frutiger,
"Frutiger Linotype"
, Univers, Calibri,
"Gill Sans"
,
"Gill Sans MT"
,
"Myriad Pro"
, Myriad,
"DejaVu Sans Condensed"
,
"Liberation Sans"
,
"Nimbus Sans L"
,
Tahoma
, Geneva,
"Helvetica Neue"
,
Helvetica
,
Arial
,
sans-serif
;
/*The Verdana-based sans serif */
font-family
: Corbel,
"Lucida Grande"
,
"Lucida Sans Unicode"
,
"Lucida Sans"
,
"DejaVu Sans"
,
"Bitstream Vera Sans"
,
"Liberation Sans"
,
Verdana
,
"Verdana Ref"
,
sans-serif
;
/*The Trebuchet-based sans serif */
font-family
:
"Segoe UI"
, Candara,
"Bitstream Vera Sans"
,
"DejaVu Sans"
,
"Bitstream Vera Sans"
,
"Trebuchet MS"
,
Verdana
,
"Verdana Ref"
,
sans-serif
;
/*The heavier 「Impact」 sans serif */
font-family
: Impact, Haettenschweiler,
"Franklin Gothic Bold"
, Charcoal,
"Helvetica Inserat"
,
"Bitstream Vera Sans Bold"
,
"Arial Black"
,
sans-serif
;
/*The monospace */
font-family
: Consolas,
"Andale Mono WT"
,
"Andale Mono"
,
"Lucida Console"
,
"Lucida Sans Typewriter"
,
"DejaVu Sans Mono"
,
"Bitstream Vera Sans Mono"
,
"Liberation Mono"
,
"Nimbus Mono L"
, Monaco,
"Courier New"
,
Courier
,
monospace
;
|
9. 自定義文本選擇
一些新的Web瀏覽器容許你在網頁上自定義一些突出顯示的顏色，下面代碼的默認顏色是淺藍色，固然，你能夠依據我的愛好進行各類顏色設置。下面代碼引用了典型的Webkit和Mozilla供應商前綴::selection 。
字體
|
1
2
3
|
::selection {
background
:
#e2eae2
; }
::-moz-selection {
background
:
#e2eae2
; }
::-webkit-selection {
background
:
#e2eae2
; }
|
10.隱藏Logo上的H1文本
|
1
2
3
4
5
6
7
|
h
1
{
text-indent
:
-9999px
;
margin
:
0
auto
;
width
:
320px
;
height
:
85px
;
background
:
transparent
url
(
"p_w_picpaths/logo.png"
)
no-repeat
scroll
;
}
|
相關文章
- 1. Web開發者不容錯過的20段CSS代碼
- 2. Web開發者不容錯過的10個HTML5工具
- 3. 開發者不容錯過的12款開源JavaScript庫
- 4. 60個開發者不容錯過的免費資源庫
- 5. Java 開發者不容錯過的 12 種高效工具
- 6. 不容錯過的Vue2.0組件開發
- 7. web開發者不可錯過的11個JavaScript工具
- 8. Web開發人員不容錯過的10大JavaScript工具
- 9. 不容錯過的CSS變量
- 10. 不容錯過，D2前端開發者大會來襲！
- 更多相關文章...
- • C# 不安全代碼 - C#教程
- • Markdown 代碼 - Markdown 教程
- • PHP開發工具
- • IntelliJ IDEA代碼格式化設置
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 融合阿里雲，牛客助您找到心儀好工作
- 2. 解決jdbc(jdbctemplate)在測試類時不報錯在TomCatb部署後報錯
- 3. 解決PyCharm GoLand IntelliJ 等 JetBrains 系列 IDE無法輸入中文
- 4. vue+ant design中關於圖片請求不顯示的問題。
- 5. insufficient memory && Native memory allocation (malloc) failed
- 6. 解決IDEA用Maven創建的Web工程不能創建Java Class文件的問題
- 7. [已解決] Error: Cannot download ‘https://start.spring.io/starter.zip?
- 8. 在idea讓java文件夾正常使用
- 9. Eclipse啓動提示「subversive connector discovery」
- 10. 帥某-技巧-快速轉帖博主文章（article_content）
歡迎關注本站公眾號,獲取更多信息
