- 浏览: 483991 次
文章分类
最新评论
Web开发者不容错过的50段CSS代码
Web开发技术每年都在革新,浏览器已逐渐支持CSS3特性,并且网站设计师和前端开发者普遍采用这种新技术进行设计与开发。但仍然有一些开发者迷恋着一些CSS2代码。
本文将分享20段非常专业的CSS2/CSS3代码供大家使用,你可以把它们保存在IDE里、或者存储在CSS文档里,这些代码片段绝对会给你带来意外的惊喜。
1. CSS Resets
网络上关于CSS重置的代码非常多。本段代码是根据Eric Meyer’s reset codes进行改编的,里面包含一点响应式图片和所有核心元素的边界框设置,这样就可以保持页边距和填充可以很好地对齐。
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 Clearfix
这个clearfix代码已在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。
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模板
这段代码主要用在页面上进行分离引用或复制内容,并且给页面文字提供了默认样式。
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引用到视网膜设备上。
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。
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 ;
|
源码地址:http://www.sitepoint.com/eight-definitive-font-stacks/
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 ( "images/logo.png" ) no-repeat scroll ;
}
|
11. 为图片创建拍立得效果边框
运用下面代码可以在图片上实现拍立得相片效果——一大片白色边框和细微的阴影。你需要修改图片的宽度/高度值来与你的网站布局相匹配。
1
2
3
4
5
6
7
8
9
10
|
img.polaroid {
background : #000 ; /*Change
this to a background image or remove*/
border : solid #fff ;
border-width : 6px 6px 20px 6px ;
box-shadow: 1px 1px 5px #333 ; /*
Standard blur at 5px. Increase for more depth *
-webkit-box-shadow:1px 1px 5px #333;
-moz-box-shadow:1px 1px 5px #333;
height:200px; /*Set to height of your image or desired
div*/
width : 200px ; /*Set
to width of your image or desired div*/
}
|
12. 锚链接伪类选择器
1
2
3
4
|
a:link { color : blue ;
}
a:visited { color : purple ;
}
a:hover { color : red ;
}
a:active { color :
yellow; }
|
13. 花俏地CSS3 Pull-Quotes
Pull-quotes不同于页面里的blockquote,它们通常用在文章中来引用文本。
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
|
.has-pullquote:before {
/* Reset metrics. */
padding : 0 ;
border : none ;
/* Content */
content : attr (data-pullquote);
/* Pull out to the right, modular scale based margins.
*/
float :
rightright;
width : 320px ;
margin : 12px -140px 24px 36px ;
/* Baseline correction */
position : relative ;
top : 5px ;
/* Typography (30px line-height equals 25% incremental
leading) */
font-size : 23px ;
line-height : 30px ;
}
.pullquote-adelle:before {
font-family : "adelle-1" , "adelle-2" ;
font-weight : 100 ;
top : 10px !important ;
}
.pullquote- helvetica :before
{
font-family : "Helvetica
Neue" , Arial , sans-serif ;
font-weight : bold ;
top : 7px !important ;
}
.pullquote-facit:before {
font-family : "facitweb-1" , "facitweb-2" , Helvetica , Arial , sans-serif ;
font-weight : bold ;
top : 7px !important ;
}
|
14. CSS3的全屏背景效果
如果你想使用大图片作为网站背景,并希望在页面滚动时保持固定,该代码片段非常适合,不过这段代码无法在旧的浏览器上工作。
1
2
3
4
5
6
7
|
html {
background : url ( 'images/bg.jpg' ) no-repeat center center fixed ;
-webkit-background- size :
cover;
-moz-background- size :
cover;
-o-background- size :
cover;
background- size :
cover;
}
|
15. 内容垂直集中
相对于内容在水平位置,内容在垂直方向是不好把控的,尤其当考虑到滚动条这些因素时。这段纯CSS代码可以很好的工作。
1
2
3
4
5
|
.container {
min-height : 6.5em ;
display : table-cell ;
vertical-align : middle ;
}
|
16. 垂直滚动条
这段代码将确保你的HTML元素总是稍微高于浏览器滚动条所停留的位置。
1
|
html { height : 101% }
|
17. CSS3 Gradients模板
1
2
3
4
5
6
7
8
9
|
#colorbox {
background : #629721 ;
background-image :
-webkit-gradient(linear, left top , left bottombottom,
from( #83b842 ), to( #629721 ));
background-image :
-webkit-linear-gradient( top , #83b842 , #629721 );
background-image :
-moz-linear-gradient( top , #83b842 , #629721 );
background-image :
-ms-linear-gradient( top , #83b842 , #629721 );
background-image :
-o-linear-gradient( top , #83b842 , #629721 );
background-image :
linear-gradient( top , #83b842 , #629721 );
}
|
18. @Font-Face模板
使用@font-face可以把TTF/OTF/SVG/WOFF文件嵌入到网站,并生成自定义font families。
1
2
3
4
5
6
7
8
9
10
11
|
@font-face {
font-family : 'MyWebFont' ;
src : url ( 'webfont.eot' ); /*
IE9 Compat Modes */
src : url ( 'webfont.eot?#iefix' ) format ( 'embedded-opentype' ), /*
IE6-IE8 */
url ( 'webfont.woff' ) format ( 'woff' ), /*
Modern Browsers */
url ( 'webfont.ttf' ) format ( 'truetype' ), /*
Safari, Android, iOS */
url ( 'webfont.svg#svgFontName' ) format ( 'svg' ); /*
Legacy iOS */
}
body {
font-family : 'MyWebFont' , Arial , sans-serif ;
}
|
19.创建缝合效果
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
|
p {
position : relative ;
z-index : 1 ;
padding : 10px ;
margin : 10px ;
font-size : 21px ;
line-height : 1.3em ;
color : #fff ;
background : #ff0030 ;
-webkit-box-shadow: 0 0 0 4px #ff0030 , 2px 1px 4px 4px rgba( 10 , 10 , 0 ,. 5 );
-moz-box-shadow: 0 0 0 4px #ff0030 , 2px 1px 4px 4px rgba( 10 , 10 , 0 ,. 5 );
box-shadow: 0 0 0 4px #ff0030 , 2px 1px 6px 4px rgba( 10 , 10 , 0 ,. 5 );
-webkit-border-radius: 3px ;
-moz-border-radius: 3px ;
border-radius: 3px ;
}
p:before {
content : "" ;
position : absolute ;
z-index : -1 ;
top : 3px ;
bottombottom: 3px ;
left : 3px ;
rightright: 3px ;
border : 2px dashed #fff ;
}
p a {
color : #fff ;
text-decoration : none ;
}
p a:hover, p a:focus, p a:active {
text-decoration : underline ;
}
|
20. CSS3 斑马线效果
当用户在浏览许多行数据时,很难分清哪一个单元格是属于哪一行的。默认情况下,通过添加斑马线,用户可以给奇偶行更新不同的背景色。
1
2
3
|
tbody tr:nth-child(odd) {
background-color : #ccc ;
}
|
这个类应该在span元素里使用,并且里面包括&字符。它使用经典的serif字体和斜体来增强&符号。
1
2
3
4
5
|
.amp {
font-family :
Baskerville, 'Goudy Old Style' , Palatino, 'Book
Antiqua' , serif ;
font-style : italic ;
font-weight : normal ;
}
|
2.段落首字符下沉
通常,这种效果会出现在印刷媒体上,如报纸或书籍。同样,如果网页布局合理,它也可以使用在Web页面上,它仅针对段落使用,但你也可以与单个元素绑定。
1
2
3
4
5
6
7
8
|
p:first-letter{
display : block ;
margin : 5px 0 0 5px ;
float : left ;
color : #ff3366 ;
font-size : 5.4em ;
font-family :
Georgia, Times New Roman, serif ;
}
|
盒阴影(box shadow)属性几乎可以运用在任何元素上,它们看起来都非常好看。下面这段代码主要聚焦内层阴影的设计。
1
2
3
4
5
|
#mydiv {
-moz-box-shadow: inset 2px 0 4px #000 ;
-webkit-box-shadow: inset 2px 0 4px #000 ;
box-shadow: inset 2px 0 4px #000 ;
}
|
下面介绍一段外层阴影代码设计,注意,代码里的第三个参数表示模糊距离(blur distance),而第四个参数表示铺开的(spread)距离。关于这些值的设计,你可以前往W3Schools学习。
1
2
3
4
5
|
#mydiv {
-webkit-box-shadow: 0 2px 2px -2px rgba( 0 , 0 , 0 , 0.52 );
-moz-box-shadow: 0 2px 2px -2px rgba( 0 , 0 , 0 , 0.52 );
box-shadow: 0 2px 2px -2px rgba( 0 , 0 , 0 , 0.52 );
}
|
该符号只能在CSS3里生成,在主流浏览器中,这是一项非常酷的技术。而其唯一的潜在问题是缺乏对后退方法的支持。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
ul {
margin : 0.75em 0 ;
padding : 0 1em ;
list-style : none ;
}
li:before {
content : "" ;
border-color : transparent #111 ;
border-style : solid ;
border-width : 0.35em 0 0.35em 0.45em ;
display : block ;
height : 0 ;
width : 0 ;
left : -1em ;
top : 0.9em ;
position : relative ;
}
|
6.居中对齐并设置固定宽度
1
2
3
4
|
#page-wrap {
width : 800px ;
margin : 0 auto ;
}
|
7.CSS3列文本
1
2
3
4
5
6
7
8
9
|
#columns -3 {
text-align : justify ;
-moz-column-count: 3 ;
-moz-column-gap: 12px ;
-moz-column-rule: 1px solid #c4c8cc ;
-webkit-column-count: 3 ;
-webkit-column-gap: 12px ;
-webkit-column-rule: 1px solid #c4c8cc ;
}
|
8.固定页脚
在网页里添加固定的页脚其实非常简单,并且也很实用。有些网站的页脚设计得很漂亮,可以给网站呈现出一个完美的结尾。
1
2
3
4
5
6
7
8
9
10
11
12
13
|
#footer {
position : fixed ;
left : 0px ;
bottom : 0px ;
height : 30px ;
width : 100% ;
background : #444 ;
}
/* IE 6 */
* html #footer {
position : absolute ;
top :
expression(( 0 -(footer.offsetHeight)+(document.documentElement.clientHeight
? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+ 'px' );
}
|
9.IE 6下修复PNG格式的透明度
在网站里使用透明的图像已成为一种很普遍的做法,其始于.gif图片格式,但现在也涉及到.png图片格式。而一些老版本的IE不支持透明度,下面这段代码会很好地解决这一问题。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
.bg {
width : 200px ;
height : 100px ;
background : url (/folder/yourimage.png) no-repeat ;
_background : none ;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src= '/folder/yourimage.png' ,sizingMethod= 'crop' );
}
/* 1px gif method */
img, .png {
position : relative ;
behavior: expression((this.runtimeStyle.behavior= "none" )&&(this.pngSet?this.pngSet=true:(this.nodeName
== "IMG" && this.src.toLowerCase().indexOf( '.png' )> -1 ?(this.runtimeStyle.backgroundImage
= "none" ,
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" +
this.src + "', sizingMethod='image')" ,
this.src = "images/transparent.gif" ):(this.origBg
= this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace( 'url("' , '' ).replace( '")' , '' ),
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" +
this.origBg + "', sizingMethod='crop')" ,
this.runtimeStyle.backgroundImage = "none" )),this.pngSet=true));
}
|
10.跨浏览器设置最小高度
有时开发者需要对HTML元素设置最小高度,然而,这个效果却无法兼容IE和老版本的Firefox,下面这段代码可以修复这个问题。
1
2
3
4
5
|
#container {
min-height : 550px ;
height : auto !important ;
height : 550px ;
}
|
11.CSS3发光输入框
下面的这段代码重写了浏览器的默认行为,可以让Chrome和Safari浏览器下普通的表单输入框产生发光效果。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
input[type=text], textarea {
-webkit-transition: all 0.30 s
ease-in-out;
-moz-transition: all 0.30 s
ease-in-out;
-ms-transition: all 0.30 s
ease-in-out;
-o-transition: all 0.30 s
ease-in-out;
outline : none ;
padding : 3px 0px 3px 3px ;
margin : 5px 1px 3px 0px ;
border : 1px solid #ddd ;
}
input[type=text]:focus, textarea:focus {
box-shadow: 0 0 5px rgba( 81 , 203 , 238 , 1 );
padding : 3px 0px 3px 3px ;
margin : 5px 1px 3px 0px ;
border : 1px solid rgba( 81 , 203 , 238 , 1 );
}
|
12.基于文件类型来创建链接样式
下面这段代码通过使用CSS选择器和图像图标来实现各种类型的链接样式,可能会用到各种协议(HTTP、FTP、IRC,mailto),或者是文件本身的类型(mp3、avi、pdf)。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
/* external links */
padding-right : 13px ;
background : url ( 'external.gif' ) no-repeat center right ;
}
/* emails */
a[href^= "mailto:" ]
{
padding-right : 20px ;
background : url ( 'email.png' ) no-repeat center right ;
}
/* pdfs */
a[href$= ".pdf" ]
{
padding-right : 18px ;
background : url ( 'acrobat.png' ) no-repeat center right ;
}
|
13.pre标签封装代码
pre标签常用来对代码进行布局,可以解决因为行太多带来的滚动条问题。下面这段代码就使用pre来封装代码,让内容直接显示在页面中。
1
2
3
4
5
6
7
|
pre {
white-space :
pre-wrap; /* css-3 */
white-space :
-moz-pre-wrap; /* Mozilla, since 1999 */
white-space :
-pre-wrap; /* Opera 4-6 */
white-space :
-o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /*
Internet Explorer 5.5+ */
}
|
14.鼠标指向时变成手型
网页中有许多item在点击时,鼠标不会变成小手的形状。这套CSS选择器会强迫鼠标越过一些关键元素和其他对象一起来使用.pointer这个类。
1
2
3
|
a[href], input[type= 'submit' ],
input[type= 'image' ], label[for], select, button, . pointer {
cursor : pointer ;
}
|
15.页面顶部阴影
简单地把下面这段代码拷贝到页面里,它会在body元素之前产生黑色的,渐渐变淡的阴影。这种效果通常用来给一个文本框或网页元素加阴影。
1
2
3
4
5
6
7
8
9
10
11
12
|
body:before {
content : "" ;
position : fixed ;
top : -10px ;
left : 0 ;
width : 100% ;
height : 10px ;
-webkit-box-shadow: 0px 0px 10px rgba( 0 , 0 , 0 ,. 8 );
-moz-box-shadow: 0px 0px 10px rgba( 0 , 0 , 0 ,. 8 );
box-shadow: 0px 0px 10px rgba( 0 , 0 , 0 ,. 8 );
z-index : 100 ;
}
|
16.气泡引用效果
这种效果常出现在论坛、创建公告牌或者是文本引用上。你只需把下面这段代码拷贝到样式表文件即可。这里(需)提供了许多关于语音泡泡的代码片段和使用技巧,欢迎去围观。
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
|
.chat-bubble {
background-color : #ededed ;
border : 2px solid #666 ;
font-size : 35px ;
line-height : 1.3em ;
margin : 10px auto ;
padding : 10px ;
position : relative ;
text-align : center ;
width : 300px ;
-moz-border-radius: 20px ;
-webkit-border-radius: 20px ;
-moz-box-shadow: 0 0 5px #888 ;
-webkit-box-shadow: 0 0 5px #888 ;
font-family : 'Bangers' , arial , serif ;
}
.chat-bubble-arrow-border {
border-color : #666 transparent transparent transparent ;
border-style : solid ;
border-width : 20px ;
height : 0 ;
width : 0 ;
position : absolute ;
bottom : -42px ;
left : 30px ;
}
.chat-bubble-arrow {
border-color : #ededed transparent transparent transparent ;
border-style : solid ;
border-width : 20px ;
height : 0 ;
width : 0 ;
position : absolute ;
bottom : -39px ;
left : 30px ;
}
|
17.指定标题样式
该模板提供了所有头元素的主要样式,从H1到H5。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
h 1 ,h 2 ,h 3 ,h 4 ,h 5 {
color : #005a9c ;
}
h 1 {
font-size : 2.6em ;
line-height : 2.45em ;
}
h 2 {
font-size : 2.1em ;
line-height : 1.9em ;
}
h 3 {
font-size : 1.8em ;
line-height : 1.65em ;
}
h 4 {
font-size : 1.65em ;
line-height : 1.4em ;
}
h 5 {
font-size : 1.4em ;
line-height : 1.25em ;
}
|
18.利用CSS生成纹理图案背景
通过CSS来为背景图片添加噪点,从而形成漂亮的纹理图案。你可以使用NoiseTextureGenerator生成器自定义噪点的纹理图案。
1
2
3
4
|
body {
background-image : url (data:image/png;base 64 ,iVBORw 0 KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp 4 XiDAAAAUVBMVEWFhYWDg 4 N 3 d 3 dtbW 17 e 3 t 1 dXWBgYGHh 4 d 5 eXlzc 3 OLi 4 ubm 5 uVlZWPj 4 +NjY 19 fX 2 JiYl/f 39 ra 2 uRkZGZmZlpaWmXl 5 dvb 29 xcXGTk 5 NnZ 2 c 8 TV 1 mAAAAG 3 RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR 4 XpWWB 67 c 2 BUFb 3 g 557 T/hRo 9 /WUMZHlgr 4 Bg 8 Z 4 qQgQJlHI 4 A 8 SzFVrapvmTF 9 O 7 dmYRFZ 60 YiBhJRCgh 1 FYhiLAmdvX 0 CzTOpNE 77 ME 0 Zty/nWWzchDtiqrmQDeuv 3 powQ 5 ta 2 eN 0 FY 0 InkqDD 73 lT 9 c 9 lEzwUNqgFHs 9 VQce 3 TVClFCQrSTfOiYkVJQBmpbq 2 L 6 iZavPnAPcoU 0 dSw 0 SUTqz/GtrGuXfbyyBniKykOWQWGqwwMA 7 QiYAxi+IlPdqo+hYHnUt 5 ZPfnsHJyNiDtnpJyayNBkF 6 cWoYGAMY 92 U 2 hXHF/C 1 M 8 uP/ZtYdiuj 26 UdAdQQSXQErwSOMzt/XWRWAz 5 GuSBIkwG 1 H 3 FabJ 2 OsUOUhGC 6 tK 4 EMtJO 0 ttC 6 IBD 3 kM 0 ve 0 tJwMdSfjZo+EEISaeTr 9 P 3 wYrGjXqyC 1 krcKdhMpxEnt 5 JetoulscpyzhXN 5 FRpuPHvbeQaKxFAEB 6 EN+cYN 6 xD 7 RYGpXpNndMmZgM 5 Dcs 3 YSNFDHUo 2 LGfZuukSWyUYirJAdYbF 3 MfqEKmjM+I 2 EfhA 94 iG 3 L 7 uKrR+GdWD 73 ydlIB+ 6 hgref 1 QTlmgmbM 3 /LeX 5 GI 1 Ux 1 RWpgxpLuZ 2 +I+IjzZ 8 wqE 4 nilvQdkUdfhzI 5 QDWy+kw 5 Wgg 2 pGpeEVeCCA 7 b 85 BO 3 F 9 DzxB 3 cdqvBzWcmzbyMiqhzuYqtHRVG 2 y 4 x+KOlnyqla 8 AoWWpuBoYRxzXrfKuILl 6 SfiWCbjxoZJUaCBj 1 CjH 7 GIaDbc 9 kqBY 3 W/Rgjda 1 iqQcOJu 2 WW+ 76 pZC 9 QG 7 M 00 dffe 9 hNnseupFL 53 r 8 F 7 YHSwJWUKP 2 q+k 7 RdsxyOB 11 n 0 xtOvnW 4 irMMFNV 4 H 0 uqwS 5 ExsmP 9 AxbDTc 9 JwgneAT 5 vTiUSm 1 E 7 BSflSt 3 bfa 1 tv 8 Di 3 R 8 n 3 Af 7 MNWzs 49 hmauE 2 wP+ttrq+AsWpFG 2 awvsuOqbipWHgtuvuaAE+A 1 Z/ 7 gC 9 hesnr+ 7 wqCwG 8 c 5 yAg 3 AL 1 fm 8 T 9 AZtp/bbJGwl 1 pNrE 7 RuOX 7 PeMRUERVaPpEs+yqeoSmuOlokqw 49 pgomjLeh 7 icHNlG 19 yjs 6 XXOMedYm 5 xH 2 YxpV 2 tc 0 Ro 2 jJfxC 50 ApuxGob 7 lMsxfTbeUv 07 TyYxpeLucEH 1 gNd 4 IKH 2 LAg 5 TdVhlCafZvpskfncCfx 8 pOhJzd 76 bJWeYFnFciwcYfubRc 12 Ip/ppIhA 1 /mSZ/RxjFDrJC 5 xifFjJpY 2 Xl 5 zXdguFqYyTR 1 zSp 1 Y 9 p+tktDYYSNflcxI 0 iyO 4 TPBdlRcpeqjK/piF 5 bklq 77 VSEaA+z 8 qmJTFzIWiitbnzR 794 USKBUaT 0 NTEsVjZqLaFVqJoPN 9 ODG 70 IPbfBHKK+/q/AWR 0 tJzYHRULOa 4 MP+W/HfGadZUbfw 177 G 7 j/OGbIs 8 TahLyynl 4 X 4 RinF 793 Oz+BU 0 saXtUHrVBFT/DnA 3 ctNPoGbs 4 hRIjTok 8 i+algT 1 lTHi 4 SxFvONKNrgQFAq 2 /gFnWMXgwffgYMJpiKYkmW 3 tTg 3 ZQ 9 Jq+f 8 XN+A 5 eeUKHWvJWJ 2 sgJ 1 Sop+wwhqFVijqWaJhwtD 8 MNlSBeWNNWTa 5 Z 5 kPZw 5 +LbVT 99 wqTdx 29 lMUH 4 OIG/D 86 ruKEauBjvH 5 xy 6 um/Sfj 7 ei 6 UUVk 4 AIl 3 MyD 4 MSSTOFgSwsH/QJWaQ 5 as 7 ZcmgBZkzjjU 1 UrQ 74 ci 1 gWBCSGHtuV 1 H 2 mhSnO 3 Wp/ 3 fEV 5 a+ 4 wz// 6 qy 8 JxjZsmxxy 5 + 4 w 9 CDNJY 09 T 072 iKG 0 EnOS 0 arEYgXqYnXcYHwjTtUNAcMelOd 4 xpkoqiTYICWFq 0 JSiPfPDQdnt+ 4 /wuqcXY 47 QILbgAAAABJRU 5 ErkJggg==);
background-color : #0094d0 ;
}
|
你可能会遇到这种列表情况,需要把这个列表拆分成两个UL元素,你不妨看看下面这段代码。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
ol.chapters {
list-style : none ;
margin-left : 0 ;
}
ol.chapters > li:before {
content : counter (chapter) ".
" ;
counter-increment :
chapter;
font-weight : bold ;
float : left ;
width : 40px ;
}
ol.chapters li {
clear : left ;
}
ol.start {
counter-reset :
chapter;
}
ol.continue {
counter-reset :
chapter 11 ;
}
|
20.为文本添加悬停提示框
把这段代码拷贝到样式表中,使用新的HTML5数据属性,通过使用data-tooltip你就可以给文本添加悬停提示框了。
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
50
51
52
53
54
55
56
57
58
59
60
61
62
|
a {
border-bottom : 1px solid #bbb ;
color : #666 ;
display :inline- block ;
position : relative ;
text-decoration : none ;
}
a:hover,
a:focus {
color : #36c ;
}
a:active {
top : 1px ;
}
/* Tooltip styling */
a[data-tooltip]:after {
border-top : 8px solid #222 ;
border-top : 8px solid hsla( 0 , 0% , 0% ,. 85 );
border-left : 8px solid transparent ;
border-right : 8px solid transparent ;
content : "" ;
display : none ;
height : 0 ;
width : 0 ;
left : 25% ;
position : absolute ;
}
a[data-tooltip]:before {
background : #222 ;
background :
hsla( 0 , 0% , 0% ,. 85 );
color : #f6f6f6 ;
content : attr (data-tooltip);
display : none ;
font-family : sans-serif ;
font-size : 14px ;
height : 32px ;
left : 0 ;
line-height : 32px ;
padding : 0 15px ;
position : absolute ;
text-shadow : 0 1px 1px hsla( 0 , 0% , 0% , 1 );
white-space : nowrap ;
-webkit-border-radius: 5px ;
-moz-border-radius: 5px ;
-o-border-radius: 5px ;
border-radius: 5px ;
}
a[data-tooltip]:hover:after {
display : block ;
top : -9px ;
}
a[data-tooltip]:hover:before {
display : block ;
top : -41px ;
}
a[data-tooltip]:active:after {
top : -10px ;
}
a[data-tooltip]:active:before {
top : -42px ;
}
11.CSS3发光输入框
下面的这段代码重写了浏览器的默认行为,可以让Chrome和Safari浏览器下普通的表单输入框产生发光效果。
12.基于文件类型来创建链接样式 下面这段代码通过使用CSS选择器和图像图标来实现各种类型的链接样式,可能会用到各种协议(HTTP、FTP、IRC,mailto),或者是文件本身的类型(mp3、avi、pdf)。
13.pre标签封装代码 pre标签常用来对代码进行布局,可以解决因为行太多带来的滚动条问题。下面这段代码就使用pre来封装代码,让内容直接显示在页面中。
14.鼠标指向时变成手型 网页中有许多item在点击时,鼠标不会变成小手的形状。这套CSS选择器会强迫鼠标越过一些关键元素和其他对象一起来使用.pointer这个类。
15.页面顶部阴影 简单地把下面这段代码拷贝到页面里,它会在body元素之前产生黑色的,渐渐变淡的阴影。这种效果通常用来给一个文本框或网页元素加阴影。
16.气泡引用效果 这种效果常出现在论坛、创建公告牌或者是文本引用上。你只需把下面这段代码拷贝到样式表文件即可。这里(需)提供了许多关于语音泡泡的代码片段和使用技巧,欢迎去围观。
17.指定标题样式
该模板提供了所有头元素的主要样式,从H1到H5。
18.利用CSS生成纹理图案背景
通过CSS来为背景图片添加噪点,从而形成漂亮的纹理图案。你可以使用NoiseTextureGenerator生成器自定义噪点的纹理图案。
你可能会遇到这种列表情况,需要把这个列表拆分成两个UL元素,你不妨看看下面这段代码。
20.为文本添加悬停提示框
把这段代码拷贝到样式表中,使用新的HTML5数据属性,通过使用data-tooltip你就可以给文本添加悬停提示框了。
21.创建暗灰色的按钮样式 下面这段代码创建了CSS3按钮类,并根据按钮颜色命名为.graybtn。当然你也可以根据自己的网站风格对颜色进行更改。
22.打印的页面上显示URL 这条规则会使打印出来的页面在超链接文字后面加上URL,URL会被放在一组括号里面,前后各留一个空格。
23.屏蔽Webkit移动浏览器中元素高亮效果在访问移动网站时,你会发现,在选中的元素周围会出现一些灰色的框框,而下面这段代码即可屏蔽这种样式。
通过下面的代码,可以让你的网站背景上产生一些小圆点装饰图案。默认情况下,它是使用在body元素上,但你也可以把它使用在网页里的其他容器上。
25.CSS3棋盘格效果
和上面的小圆点设计一样,这个效果需要一些额外的语法才可以工作,它需要在支持CSS3的浏览器上运行,效果很艳丽。当然,你可以根据需要自定义颜色。
26.Github Fork红丝带
下面这段代码是利用CSS3的transform属性生成Fork me on Github红丝带效果。
27.字体压缩 在样式表里使用如下代码能够帮你节省许多网页空间。
28.纸页面卷曲效果 这种效果可以被广泛的使用在多种容器中,查看demo page页面来更好地掌握该函数的使用吧。
29.发光的锚链接 下面这段代码可以创建自定义的锚链接,鼠标悬浮在上面会发光。
30.创建CSS3 Banner 在支持CSS3的浏览器中,下面的代码可以生成漂亮的纯CSS图案。这种效果常见于电子商务网站的产品图片、缩略图、视频预览等。
|
11.CSS3发光输入框
下面的这段代码重写了浏览器的默认行为,可以让Chrome和Safari浏览器下普通的表单输入框产生发光效果。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
input[type=text], textarea {
-webkit-transition: all 0.30 s
ease-in-out;
-moz-transition: all 0.30 s
ease-in-out;
-ms-transition: all 0.30 s
ease-in-out;
-o-transition: all 0.30 s
ease-in-out;
outline : none ;
padding : 3px 0px 3px 3px ;
margin : 5px 1px 3px 0px ;
border : 1px solid #ddd ;
}
input[type=text]:focus, textarea:focus {
box-shadow: 0 0 5px rgba( 81 , 203 , 238 , 1 );
padding : 3px 0px 3px 3px ;
margin : 5px 1px 3px 0px ;
border : 1px solid rgba( 81 , 203 , 238 , 1 );
}
|
12.基于文件类型来创建链接样式
下面这段代码通过使用CSS选择器和图像图标来实现各种类型的链接样式,可能会用到各种协议(HTTP、FTP、IRC,mailto),或者是文件本身的类型(mp3、avi、pdf)。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
/* external links */
padding-right : 13px ;
background : url ( 'external.gif' ) no-repeat center right ;
}
/* emails */
a[href^= "mailto:" ]
{
padding-right : 20px ;
background : url ( 'email.png' ) no-repeat center right ;
}
/* pdfs */
a[href$= ".pdf" ]
{
padding-right : 18px ;
background : url ( 'acrobat.png' ) no-repeat center right ;
}
|
13.pre标签封装代码
pre标签常用来对代码进行布局,可以解决因为行太多带来的滚动条问题。下面这段代码就使用pre来封装代码,让内容直接显示在页面中。
1
2
3
4
5
6
7
|
pre {
white-space :
pre-wrap; /* css-3 */
white-space :
-moz-pre-wrap; /* Mozilla, since 1999 */
white-space :
-pre-wrap; /* Opera 4-6 */
white-space :
-o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /*
Internet Explorer 5.5+ */
}
|
14.鼠标指向时变成手型
网页中有许多item在点击时,鼠标不会变成小手的形状。这套CSS选择器会强迫鼠标越过一些关键元素和其他对象一起来使用.pointer这个类。
1
2
3
|
a[href], input[type= 'submit' ],
input[type= 'image' ], label[for], select, button, . pointer {
cursor : pointer ;
}
|
15.页面顶部阴影
简单地把下面这段代码拷贝到页面里,它会在body元素之前产生黑色的,渐渐变淡的阴影。这种效果通常用来给一个文本框或网页元素加阴影。
1
2
3
4
5
6
7
8
9
10
11
12
|
body:before {
content : "" ;
position : fixed ;
top : -10px ;
left : 0 ;
width : 100% ;
height : 10px ;
-webkit-box-shadow: 0px 0px 10px rgba( 0 , 0 , 0 ,. 8 );
-moz-box-shadow: 0px 0px 10px rgba( 0 , 0 , 0 ,. 8 );
box-shadow: 0px 0px 10px rgba( 0 , 0 , 0 ,. 8 );
z-index : 100 ;
}
|
16.气泡引用效果
这种效果常出现在论坛、创建公告牌或者是文本引用上。你只需把下面这段代码拷贝到样式表文件即可。这里(需)提供了许多关于语音泡泡的代码片段和使用技巧,欢迎去围观。
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
|
.chat-bubble {
background-color : #ededed ;
border : 2px solid #666 ;
font-size : 35px ;
line-height : 1.3em ;
margin : 10px auto ;
padding : 10px ;
position : relative ;
text-align : center ;
width : 300px ;
-moz-border-radius: 20px ;
-webkit-border-radius: 20px ;
-moz-box-shadow: 0 0 5px #888 ;
-webkit-box-shadow: 0 0 5px #888 ;
font-family : 'Bangers' , arial , serif ;
}
.chat-bubble-arrow-border {
border-color : #666 transparent transparent transparent ;
border-style : solid ;
border-width : 20px ;
height : 0 ;
width : 0 ;
position : absolute ;
bottom : -42px ;
left : 30px ;
}
.chat-bubble-arrow {
border-color : #ededed transparent transparent transparent ;
border-style : solid ;
border-width : 20px ;
height : 0 ;
width : 0 ;
position : absolute ;
bottom : -39px ;
left : 30px ;
}
|
17.指定标题样式
该模板提供了所有头元素的主要样式,从H1到H5。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
h 1 ,h 2 ,h 3 ,h 4 ,h 5 {
color : #005a9c ;
}
h 1 {
font-size : 2.6em ;
line-height : 2.45em ;
}
h 2 {
font-size : 2.1em ;
line-height : 1.9em ;
}
h 3 {
font-size : 1.8em ;
line-height : 1.65em ;
}
h 4 {
font-size : 1.65em ;
line-height : 1.4em ;
}
h 5 {
font-size : 1.4em ;
line-height : 1.25em ;
}
|
18.利用CSS生成纹理图案背景
通过CSS来为背景图片添加噪点,从而形成漂亮的纹理图案。你可以使用NoiseTextureGenerator生成器自定义噪点的纹理图案。
1
2
3
4
|
body {
background-image : url (data:image/png;base 64 ,iVBORw 0 KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp 4 XiDAAAAUVBMVEWFhYWDg 4 N 3 d 3 dtbW 17 e 3 t 1 dXWBgYGHh 4 d 5 eXlzc 3 OLi 4 ubm 5 uVlZWPj 4 +NjY 19 fX 2 JiYl/f 39 ra 2 uRkZGZmZlpaWmXl 5 dvb 29 xcXGTk 5 NnZ 2 c 8 TV 1 mAAAAG 3 RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR 4 XpWWB 67 c 2 BUFb 3 g 557 T/hRo 9 /WUMZHlgr 4 Bg 8 Z 4 qQgQJlHI 4 A 8 SzFVrapvmTF 9 O 7 dmYRFZ 60 YiBhJRCgh 1 FYhiLAmdvX 0 CzTOpNE 77 ME 0 Zty/nWWzchDtiqrmQDeuv 3 powQ 5 ta 2 eN 0 FY 0 InkqDD 73 lT 9 c 9 lEzwUNqgFHs 9 VQce 3 TVClFCQrSTfOiYkVJQBmpbq 2 L 6 iZavPnAPcoU 0 dSw 0 SUTqz/GtrGuXfbyyBniKykOWQWGqwwMA 7 QiYAxi+IlPdqo+hYHnUt 5 ZPfnsHJyNiDtnpJyayNBkF 6 cWoYGAMY 92 U 2 hXHF/C 1 M 8 uP/ZtYdiuj 26 UdAdQQSXQErwSOMzt/XWRWAz 5 GuSBIkwG 1 H 3 FabJ 2 OsUOUhGC 6 tK 4 EMtJO 0 ttC 6 IBD 3 kM 0 ve 0 tJwMdSfjZo+EEISaeTr 9 P 3 wYrGjXqyC 1 krcKdhMpxEnt 5 JetoulscpyzhXN 5 FRpuPHvbeQaKxFAEB 6 EN+cYN 6 xD 7 RYGpXpNndMmZgM 5 Dcs 3 YSNFDHUo 2 LGfZuukSWyUYirJAdYbF 3 MfqEKmjM+I 2 EfhA 94 iG 3 L 7 uKrR+GdWD 73 ydlIB+ 6 hgref 1 QTlmgmbM 3 /LeX 5 GI 1 Ux 1 RWpgxpLuZ 2 +I+IjzZ 8 wqE 4 nilvQdkUdfhzI 5 QDWy+kw 5 Wgg 2 pGpeEVeCCA 7 b 85 BO 3 F 9 DzxB 3 cdqvBzWcmzbyMiqhzuYqtHRVG 2 y 4 x+KOlnyqla 8 AoWWpuBoYRxzXrfKuILl 6 SfiWCbjxoZJUaCBj 1 CjH 7 GIaDbc 9 kqBY 3 W/Rgjda 1 iqQcOJu 2 WW+ 76 pZC 9 QG 7 M 00 dffe 9 hNnseupFL 53 r 8 F 7 YHSwJWUKP 2 q+k 7 RdsxyOB 11 n 0 xtOvnW 4 irMMFNV 4 H 0 uqwS 5 ExsmP 9 AxbDTc 9 JwgneAT 5 vTiUSm 1 E 7 BSflSt 3 bfa 1 tv 8 Di 3 R 8 n 3 Af 7 MNWzs 49 hmauE 2 wP+ttrq+AsWpFG 2 awvsuOqbipWHgtuvuaAE+A 1 Z/ 7 gC 9 hesnr+ 7 wqCwG 8 c 5 yAg 3 AL 1 fm 8 T 9 AZtp/bbJGwl 1 pNrE 7 RuOX 7 PeMRUERVaPpEs+yqeoSmuOlokqw 49 pgomjLeh 7 icHNlG 19 yjs 6 XXOMedYm 5 xH 2 YxpV 2 tc 0 Ro 2 jJfxC 50 ApuxGob 7 lMsxfTbeUv 07 TyYxpeLucEH 1 gNd 4 IKH 2 LAg 5 TdVhlCafZvpskfncCfx 8 pOhJzd 76 bJWeYFnFciwcYfubRc 12 Ip/ppIhA 1 /mSZ/RxjFDrJC 5 xifFjJpY 2 Xl 5 zXdguFqYyTR 1 zSp 1 Y 9 p+tktDYYSNflcxI 0 iyO 4 TPBdlRcpeqjK/piF 5 bklq 77 VSEaA+z 8 qmJTFzIWiitbnzR 794 USKBUaT 0 NTEsVjZqLaFVqJoPN 9 ODG 70 IPbfBHKK+/q/AWR 0 tJzYHRULOa 4 MP+W/HfGadZUbfw 177 G 7 j/OGbIs 8 TahLyynl 4 X 4 RinF 793 Oz+BU 0 saXtUHrVBFT/DnA 3 ctNPoGbs 4 hRIjTok 8 i+algT 1 lTHi 4 SxFvONKNrgQFAq 2 /gFnWMXgwffgYMJpiKYkmW 3 tTg 3 ZQ 9 Jq+f 8 XN+A 5 eeUKHWvJWJ 2 sgJ 1 Sop+wwhqFVijqWaJhwtD 8 MNlSBeWNNWTa 5 Z 5 kPZw 5 +LbVT 99 wqTdx 29 lMUH 4 OIG/D 86 ruKEauBjvH 5 xy 6 um/Sfj 7 ei 6 UUVk 4 AIl 3 MyD 4 MSSTOFgSwsH/QJWaQ 5 as 7 ZcmgBZkzjjU 1 UrQ 74 ci 1 gWBCSGHtuV 1 H 2 mhSnO 3 Wp/ 3 fEV 5 a+ 4 wz// 6 qy 8 JxjZsmxxy 5 + 4 w 9 CDNJY 09 T 072 iKG 0 EnOS 0 arEYgXqYnXcYHwjTtUNAcMelOd 4 xpkoqiTYICWFq 0 JSiPfPDQdnt+ 4 /wuqcXY 47 QILbgAAAABJRU 5 ErkJggg==);
background-color : #0094d0 ;
}
|
你可能会遇到这种列表情况,需要把这个列表拆分成两个UL元素,你不妨看看下面这段代码。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
ol.chapters {
list-style : none ;
margin-left : 0 ;
}
ol.chapters > li:before {
content : counter (chapter) ".
" ;
counter-increment :
chapter;
font-weight : bold ;
float : left ;
width : 40px ;
}
ol.chapters li {
clear : left ;
}
ol.start {
counter-reset :
chapter;
}
ol.continue {
counter-reset :
chapter 11 ;
}
|
20.为文本添加悬停提示框
把这段代码拷贝到样式表中,使用新的HTML5数据属性,通过使用data-tooltip你就可以给文本添加悬停提示框了。
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
50
51
52
53
54
55
56
57
58
59
60
61
62
|
a {
border-bottom : 1px solid #bbb ;
color : #666 ;
display :inline- block ;
position : relative ;
text-decoration : none ;
}
a:hover,
a:focus {
color : #36c ;
}
a:active {
top : 1px ;
}
/* Tooltip styling */
a[data-tooltip]:after {
border-top : 8px solid #222 ;
border-top : 8px solid hsla( 0 , 0% , 0% ,. 85 );
border-left : 8px solid transparent ;
border-right : 8px solid transparent ;
content : "" ;
display : none ;
height : 0 ;
width : 0 ;
left : 25% ;
position : absolute ;
}
a[data-tooltip]:before {
background : #222 ;
background :
hsla( 0 , 0% , 0% ,. 85 );
color : #f6f6f6 ;
content : attr (data-tooltip);
display : none ;
font-family : sans-serif ;
font-size : 14px ;
height : 32px ;
left : 0 ;
line-height : 32px ;
padding : 0 15px ;
position : absolute ;
text-shadow : 0 1px 1px hsla( 0 , 0% , 0% , 1 );
white-space : nowrap ;
-webkit-border-radius: 5px ;
-moz-border-radius: 5px ;
-o-border-radius: 5px ;
border-radius: 5px ;
}
a[data-tooltip]:hover:after {
display : block ;
top : -9px ;
}
a[data-tooltip]:hover:before {
display : block ;
top : -41px ;
}
a[data-tooltip]:active:after {
top : -10px ;
}
a[data-tooltip]:active:before {
top : -42px ;
}
|
相关推荐
web开发者不容错过的20段css代码
Web开发者不容错过的20段CSS代码[文].pdf
C#.NET WEB开发者指南教程(附源代码)
60个开发者不容错过的免费资源库
网页前端开发技术,三十段超实用CSS代码,的各种效果
C#.net web开发者指南教程PDF+源代码,非常实用.
微信Web开发者工具,可用于微信小程序,微信公众号的开发
C#.net Web 开发者必备 web开发指南 带原代码
微信web开发者工具
C#.net web开发者指南.rar 附源码
Web开发者必备速查表,动手写代码是提高能力的最快途径,能力是信心de来源!
微信小程序,web开发者
微信web开发者工具1.0正式版,版本号:1.01.1711160_x64
HTML5 和CSS3是一入门就能用的最好的语言,最简单同时也最好的的方式就是直接开始做!本文由脚本之家小编给大家分享几个web开发者最佳html5和css3代码生成器,需要的朋友参考下
最新微信小程序开发工具。微信web开发者工具是一款...微信web开发者工具采用的是集成Chrome DevTools和基本的移动调试模块,小伙伴们可以借助微信web开发者工具更方便、安全的开发或是针对调试基于微信开发的网页代码。
为了帮助开发者简单和高效地开发和调试微信小程序,我们在原有的公众号网页调试工具的基础上,推出了全新的 微信开发者工具,集成了公众号网页调试和小程序调试两种开发模式。版本号:1.02.1808080
C#web开发者指南教程PDF(含源代码),很适合入门学习C#web制作web应用程序。附带源代码。