实用的60个CSS代码片段,手把手教你用JS给博客动态增添目录

领悟伪成分 :before 和 :after

2013/10/09 · CSS · 2
评论 ·
CSS

原文出处: Thoriq
Firdaus   译文出处:听海阁(@听海JamiE)   

层叠样式表(CSS)的重大目标是给HTML成分添加样式,但是,在部分案例中给文档添加额外的要素是多余的或者不容许的。事实上CSS中有一个特色允许我们添加额外元素而不惊扰文档本人,那就是“伪成分”。

亚洲必赢官网 1

你一定传闻过那几个词,特别是当您一向关切着大家的学科。点此浏览原作者的其它文章

实则,的确有局地CSS家族的分子(CSS拔取器)被归类为伪成分比如::first-line,
:first-letter, ::selection, :before and
:after。不过,就本文而言,我们将把大家追究的限量限制在:before 和
:after那五个要素上。由此,本文中的“伪成分”将特指那多少个伪成分(:before 和
:after),大家将从基础出手,来商讨那些非凡的主旨。

1、垂直对齐

    提取密码e8pe

【轮子狂魔】手把手教你用JS给博客动态增添目录,狂魔js

至于语法和浏览器支持

伪成分实际上在CSS1中就存在了,不过我们前日所谈论的:before和:after则发布于CSS2.1中。在中期,伪成分的语法是运用“:”(一个冒号),随着web的进步,在CSS3中修订后的伪成分使用“::”(五个冒号),也就是::before
和 ::after—以界别伪成分和伪类(比如:hover,:active等)

亚洲必赢官网 2

然而,无论你使用单冒号如故双冒号,浏览器都将能辨别它们。由于IE8只协助单冒号的格式,安全起见假诺你想要更广大的浏览器包容性那么仍旧采纳单冒号的格式吧!

如若您用CSS,则你会有怀疑:我该怎么垂直对齐容器中的成分?现在,利用CSS3的Transform,可以很优雅的解决这几个困惑:

body,h1,h2,h3,p,ul,ol,form,fieldset,figure {

动态彰显目录的法力

绝不每便写博客的时候繁琐的人工整理目录,又足以动态变化在右下角,方便高效跳到感兴趣的职位同时也得以高速的对小说内容有一个差不多的刺探。

 

它是做什么的

简单的讲,伪成分将会在情节成分的前后插入额外的要素,因此当我们添加它们时,使用以下的号子形式,他们在技术上是同样的。

CSS

<p> <span>:before</span> This the main content.
<span>:after</span> </p>

1
2
3
4
5
<p>
<span>:before</span>
This the main content.
<span>:after</span>
</p>

不过那些成分实际上并不在文档中生成。它们将在表面可知,可是你将不会在文档的源代码中找到它们,因而,实际上它们是“虚假”的因素。

.verticalcenter{

margin: 0;

落到实处原理

率先依据个人爱好,我习惯了用 h1
来做分类。所以本篇内容也首倘若针对性h1来领取目录。

什么提取出来h1呢?

亚洲必赢官网 3

先来看那张图,以猎豹浏览器为例:

率先在博客内容第一行点击鼠标右键,然后拔取检查。那时会弹出左边的框,直接定位到自我的h1标签,就这么不难的找到了它的父级 cnblogs_post_body

然后选拔 jquery 选用器
来获得到这一个h1,对jquery选用器不熟的第一手跳那几个链接温习一下:

$('#cnblogs_post_body h1')

就这么简单的一个括号就到位了对 h1 的领到。

在遍历所有的h1,取出内容后边,大家须要一个目录的器皿。

$('#cnblogs_post_body').append('<div id="blog_catalog" class="blog_catalog"><ul><li><a id="blog_catalog_close" class="blog_catalog_close">>折叠目录</a></li></ul></div>');

那句简单表达就是在博客内容最末尾插入了一个 div,里面包涵ul和一个默许的li
用于折叠目录。

接下去就要提取h1的始最后,但在这些进程中大家还要做一件事,就是全自动给h1扩张一个id,作为一个专业的懒人,我一定连h1的id都不想写的,自动生成神马的最好了。

var id = 1;
$('#cnblogs_post_body h1').each(function(){
    $(this).attr('id','blog_catalog_id_'+id);
    $('#blog_catalog ul').append('<li><a href="#blog_catalog_id_'+id+'">'+$(this).text()+'</a></li>');
    id++;
});

有了折叠,当然必不可少展开。

$('#cnblogs_post_body').append('<div id="blog_catalog_open" class="blog_catalog_open">展开目录</div>');

说到底一步,让展开目录和折叠目录联动起来

$('#blog_catalog_open').click(function(){
$('#blog_catalog').show();
$('#blog_catalog_open').hide();
});

$('#blog_catalog_close').click(function(){
$('#blog_catalog').hide();
$('#blog_catalog_open').show();
});

整套制作进度实际上并不复杂,还有部分css样式应用上就竣工了。

 

动用伪成分

应用伪成分是相对不难的,:before将会在情节后边“添加”一个因素而:after将会在内容后“添加”一个成分。在它们之中添加内容大家可以动用content属性。

比喻来说,上边的代码片段将在引用的先头和以后分别添加添加一个引号。

亚洲必赢官网 4

 

CSS

blockquote:before { content: open-quote; } blockquote:after { content:
close-quote; }

1
2
3
4
5
6
blockquote:before {
content: open-quote;
}
blockquote:after {
content: close-quote;
}

    position: relative;

padding: 0;

不论是原理,我想直接用

 怎么自定义皮肤我就不多说了,一抓一大把。上边直接给您们代码。

css:

亚洲必赢官网 5.blog_catalog
{ display: none; width: auto; height: auto; float: right; position:
fixed; right: 180px; bottom: 200px; z-index: 9999; background-color:
#fff; font-size: 12px; margin: 10px 0 0 0; padding: 5px; text-align:
center; border: 3px solid #55895b; border-radius: 5px;
-webkit-box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px
rgba(0,0,0,.13); -moz-box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px
0px 18px 0px rgba(0,0,0,.13); box-shadow: 0px 1px 3px 0px
rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13); } .blog_catalog >
li > a { background-color: #616975; background-image:
-webkit-gradient(linear, left top, left bottom, from(rgb(114, 122,
134)),to(rgb(80, 88, 100))); background-image:
-webkit-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
background-image: -moz-linear-gradient(top, rgb(114, 122, 134), rgb(80,
88, 100)); background-image: -o-linear-gradient(top, rgb(114, 122, 134),
rgb(80, 88, 100)); background-image: -ms-linear-gradient(top, rgb(114,
122, 134), rgb(80, 88, 100)); background-image: linear-gradient(top,
rgb(114, 122, 134), rgb(80, 88, 100)); filter:
progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr=’#727a86′,
EndColorStr=’#505864′); -webkit-box-shadow: inset 0px 1px 0px 0px
#878e98; -moz-box-shadow: inset 0px 1px 0px 0px #878e98; box-shadow:
inset 0px 1px 0px 0px #878e98; width: 100%; height: 2.75em;
line-height: 2.75em; text-indent: 2.75em; display: block; position:
relative; font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif;
font-weight: 600; color: #fff; text-shadow: 0px 1px 0px rgba(0,0,0,.5);
} .blog_catalog ul li a { background: #fff; border-bottom: 1px solid
#efeff0; width: 100%; height: 2.75em; line-height: 2.75em; display:
block; position: relative; font-family: “Helvetica Neue”, Helvetica,
Arial, sans-serif; font-size: 0.923em; font-weight: 400; color:
#878d95; } .blog_catalog ul li a:hover { cursor: pointer; }
.blog_catalog > li > a:hover, .blog_catalog > li >
a.active, .blog_catalog > li:target > a; /*add this*/ {
background-color: #35afe3; background-image: -webkit-gradient(linear,
left top, left bottom, from(rgb(69, 199, 235)),to(rgb(38, 152, 219)));
background-image: -webkit-linear-gradient(top, rgb(69, 199, 235),
rgb(38, 152, 219)); background-image: -moz-linear-gradient(top, rgb(69,
199, 235), rgb(38, 152, 219)); background-image: -o-linear-gradient(top,
rgb(69, 199, 235), rgb(38, 152, 219)); background-image:
-ms-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
background-image: linear-gradient(top, rgb(69, 199, 235), rgb(38, 152,
219)); filter:
progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr=’#45c7eb’,
EndColorStr=’#2698db’); border-bottom: 1px solid #103c56;
-webkit-box-shadow: inset 0px 1px 0px 0px #6ad2ef; -moz-box-shadow:
inset 0px 1px 0px 0px #6ad2ef; box-shadow: inset 0px 1px 0px 0px
#6ad2ef; } .blog_catalog > li > a.active { border-bottom: 1px
solid #1a638f; } .blog_catalog > li > a:before { content: ”;
background-image: url(../images/sprite.png); background-repeat:
no-repeat; font-size: 36px; height: 1em; width: 1em; position: absolute;
left: 0; top: 50%; margin: -.5em 0 0 0; } .item1 > a:before {
background-position: 0 0; } .item2 > a:before { background-position:
-38px 0; } .item3 > a:before { background-position: 0 -38px; } .item4
> a:before { background-position: -38px -38px; } .item5 > a:before
{ background-position: -76px 0; } .blog_catalog > li > a span {
font-size: 0.857em; display: inline-block; position: absolute; right:
1em; top: 50%; background: #48515c; line-height: 1em; height: 1em;
padding: .4em .6em; margin: -.8em 0 0 0; color: #fff; text-indent: 0;
text-align: center; -webkit-border-radius: .769em; -moz-border-radius:
.769em; border-radius: .769em; -webkit-box-shadow: inset 0px 1px 3px 0px
rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15);
-moz-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px
0px rgba(255, 255, 255, .15); box-shadow: inset 0px 1px 3px 0px rgba(0,
0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15); text-shadow: 0px
1px 0px rgba(0,0,0,.5); font-weight: 500; } .blog_catalog > li >
a:hover span, .blog_catalog > li a.active span, .blog_catalog >
li:target > a span /*add this*/ { background: #2173a1; }
.blog_catalog > li > ul li a:before { font-size: 8px; color:
#bcbcbf; position: absolute; width: 1em; height: 1em; top: 0; left:
-2.7em; } .blog_catalog > li > ul li:hover a, .blog_catalog >
li > ul li:hover a span, .blog_catalog > li > ul li:hover
a:before { color: #32373D; } .blog_catalog ul > li > a span {
font-size: 0.857em; display: inline-block; position: absolute; right:
1em; top: 50%; / background: #fff; border: 1px solid #d0d0d3;
line-height: 1em; height: 1em; padding: .4em .7em; margin: -.9em 0 0 0;
color: #878d95; text-indent: 0; text-align: center;
-webkit-border-radius: .769em; -moz-border-radius: 769em; border-radius:
769em; text-shadow: 0px 0px 0px rgba(255,255,255,.01)); }
/*additional*/ .blog_catalog > li > ul { height: 0; overflow:
hidden; opacity: 0; filter: alpha(opacity=0); /* IE6-IE8 */
-webkit-transition: opacity 0.9s ease-in-out; -moz-transition: opacity
0.9s ease-in-out; -o-transition: opacity 0.9s ease-in-out;
-ms-transition: opacity 0.9s ease-in-out; transition: opacity 0.9s
ease-in-out; } .blog_catalog > li:target > ul { height: auto;
/*using auto nullifies the height transitions, but it makes things
flexible which is more important*/ border-bottom: 1px solid #51555a;
opacity: 1; filter: alpha(opacity=100); /* IE6-IE8 */ }
#cnblogs_post_body ul li { list-style-type: none; margin-left: -30px;
} .blog_catalog_open { width: auto; height: auto; float: right;
position: fixed; right: 180px; bottom: 200px; z-index: 9999;
background-color: #fff; font-size: 12px; width: 125px; margin: 10px 0 0
0; padding: 5px; text-align: center; border: 3px solid #55895b;
border-radius: 5px; -webkit-box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73),
0px 0px 18px 0px rgba(0,0,0,.13); -moz-box-shadow: 0px 1px 3px 0px
rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13); box-shadow: 0px 1px
3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13); cursor:
pointer; } View Code

js:

亚洲必赢官网 6$(‘#cnblogs_post_body’).append(‘<div
id=”blog_catalog_open”
class=”blog_catalog_open”>展开目录</div>’);
$(‘#cnblogs_post_body’).append(‘<div id=”blog_catalog”
class=”blog_catalog”><ul><li><a
id=”blog_catalog_close”
class=”blog_catalog_close”>>折叠目录</a></li></ul></div>’);
var id = 1; $(‘#cnblogs_post_body h1’).each(function(){
$(this).attr(‘id’,’blog_catalog_id_’+id); $(‘#blog_catalog
ul’).append(‘<li><a
href=”#blog_catalog_id_’+id+'”>’+$(this).text()+'</a></li>’);
id++; }); $(‘#blog_catalog_open’).click(function(){
$(‘#blog_catalog’).show(); $(‘#blog_catalog_open’).hide(); });
$(‘#blog_catalog_close’).click(function(){
$(‘#blog_catalog’).hide(); $(‘#blog_catalog_open’).show(); });
View Code

 

伪成分样式

即使作为“虚假”的因素,事实上伪成分表现上就像“真正”的成分,大家可以给它们增加其余样式,比如改变它们的颜料、添加背景观、调整字体大小、调整它们中的文本等等。

亚洲必赢官网 7

 

CSS

blockquote:before { content: open-quote; font-size: 24pt; text-align:
center; line-height: 42px; color: #fff; background: #ddd; float: left;
position: relative; top: 30px; } blockquote:after { content:
close-quote; font-size: 24pt; text-align: center; line-height: 42px;
color: #fff; background: #ddd; float: right; position: relative;
bottom: 40px; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
blockquote:before {
content: open-quote;
font-size: 24pt;
text-align: center;
line-height: 42px;
color: #fff;
background: #ddd;
float: left;
position: relative;
top: 30px;
 
}
blockquote:after {
content: close-quote;
font-size: 24pt;
text-align: center;
line-height: 42px;
color: #fff;
background: #ddd;
float: right;
position: relative;
bottom: 40px;
}

    top: 50%;

}

怎样接纳

<h1>你可以随意设置你的标题</h1>

正确,就是如此简单,其余什么都不必要。

指定伪元素尺寸

默认生成的元素是一个内联元素,于是当我们想要指定它们的高度和宽度的是偶,我们首先不得不使用display:
block把它们声明为块级元素。

是因为已经安装float,所以不必设置display:black。

亚洲必赢官网 8

 

CSS

blockquote:before { content: open-quote; font-size: 24pt; text-align:
center; line-height: 42px; color: #fff; background: #ddd; float: left;
position: relative; top: 30px; border-radius: 25px; height: 25px; width:
25px; } blockquote:after { content: close-quote; font-size: 24pt;
text-align: center; line-height: 42px; color: #fff; background: #ddd;
float: right; position: relative; bottom: 40px; border-radius: 25px;
height: 25px; width: 25px; }

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
blockquote:before {
content: open-quote;
font-size: 24pt;
text-align: center;
line-height: 42px;
color: #fff;
background: #ddd;
float: left;
position: relative;
top: 30px;
border-radius: 25px;
height: 25px;
width: 25px;
}
blockquote:after {
content: close-quote;
font-size: 24pt;
text-align: center;
line-height: 42px;
color: #fff;
background: #ddd;
float: right;
position: relative;
bottom: 40px;
border-radius: 25px;
height: 25px;
width: 25px;
}

    -webkit-transform: translateY(-50%);

div,figure,img,input,button {

自家不只要用目录,我还要完整皮肤

先申明,我这套皮肤是从旁人那扒下来的一个雏形然后本人再改了好多地方。可是从何地弄来的,忘了。。。很狼狈。

实际设置皮肤的也是一抓一大把就不多说了,上干货。

1.博客皮肤 接纳 Custom

2.页面定制css代码

亚洲必赢官网 9@charset
“utf-8”; /* CSS Document */ /* By rhinoc.cnblogs.com*/
/*率先局地*/ #EntryTag { margin-top: 20px; font-size: 9pt; color:
gray; } .topicListFooter { text-align: right; margin-right: 10px;
margin-top: 10px; } #divRefreshComments { text-align: right;
margin-right: 10px; margin-bottom: 5px; font-size: 9pt; } /*大局样式*/
{ margin: 0; padding: 0; } html { height: 100%; } body {
background-image:
url();
background-repeat: repeat; font-family: ‘Lucida
Console’,Georgia,’Microsoft YaHei’,Microsoft YaHei; \5B8B\4F53,
sans-serif; font: ‘Lucida Console’,Georgia,’Microsoft YaHei’,Microsoft
YaHei; font-size: 11.5px; min-height: 101%; } table { border-collapse:
collapse; border-spacing: 0; } fieldset, img { border: 0; } ul {
word-break: break-all; } li { list-style: none; } h1, h2, h3, h4, h5, h6
{ font-size: 100%; font-weight: normal; } a { outline: none; color:
#21759b; } address, cite, dfn, em, var { font-style: normal; } code,
kbd, pre, samp, tt { font-family: “Courier New”, Courier,Microsoft
Yahei, monospace; } .clear { clear: both; } /*其三有些*/
/*home和头部*/ #home { margin: 0 auto; width: 65%; min-width: 1000px;
background-color: #fff; padding: 30px; margin-top: 50px; margin-bottom:
50px; box-shadow: 0px 1px 10px #999; -moz-box-shadow: 0px 1px 10px
#999; -web-kit-shadow: 0px 1px 10px #999; } #header { padding-bottom:
5px; margin-top: 20px; } #blogTitle { height: 50px; clear: both;
font-family: Georgia,Serif; } #InkBlogLogo { display: none; }
/*博客名称*/ #blogTitle h1 { font-size: 28px; font-weight: bold;
line-height: 0.2em; margin-top: 20px; } #blogTitle h1 a { color:
#515151; } #blogTitle h1 a:hover { color: #21759b; } #blogTitle h2 {
font-weight: normal; font-size: 14.5px; line-height: 0.3em; color:
#515151; float: left; margin-left: 2em; margin-bottom: 2em; }
#blogLogo { float: right; } /*导航栏*/ #navigator { text-decoration:
none; font-size: 14px; font-family: ‘Lucida
Console’,Georgia,’FZYaoTi’,Microsoft YaHei; \5B8B\4F53, sans-serif;
font: ‘Lucida Console’,Georgia,’FZYaoTi’,Microsoft YaHei; border-bottom:
1px solid #515151; border-top: 1px solid #515151; height: 80px; clear:
both; margin-top: 20px; } #navList { width: 1200px; min-height: 30px;
float: left; } #navList .border { height: 28px; position: absolute;
width: 5px; left: 0px; top: 0px; overflow: hidden; opacity: 0;
background: #F90; -webkit-transition: 0.3s all ease; -moz-transition:
0.3s all ease; -ms-transition: 0.3s all ease; -o-transition: 0.3s all
ease; -webkit-transition: .5s left ease; } #navList li { float: left;
margin: 0px,40px,0px,0px; -webkit-transition: 0.3s all ease;
-moz-transition: 0.3s all ease; -ms-transition: 0.3s all ease;
-o-transition: 0.3s all ease; transition: 0.3s all ease; overflow:
hidden; position: relative; } #navList li:hover { background: #000;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4); } #navList li:hover .border
{ opacity: 1; left: 65px; } #navList li:hover a { color: #FFF;
text-shadow: 1px 2px 4px #333; } #navList li:hover .menu {
-webkit-animation-name: shake; -moz-animation-name: shake; } .menu {
-webkit-animation: .5s .2s ease both; -moz-animation: 1s .2s ease both;
} @-webkit-keyframes shake { 0%,100% { -webkit-transform: translateX(0);
} 20%,60% { -webkit-transform: translateX(-10px); } 40%,80% {
-webkit-transform: translateX(10px); } } @-moz-keyframes shake { 0%,100%
{ -moz-transform: translateX(0); } 20%,60% { -moz-transform:
translateX(-10px); } 40%,80% { -moz-transform: translateX(10px); } }
#navList a { text-decoration: none; display: block; width: 5em; height:
20px; float: left; text-align: center; font-weight: bold; padding-top:
8px; color: #515151; } .blogStats { float: right; font-style: italic;
font-family: Georgia,’FZYaoTi’,Microsoft YaHei; \5B8B\4F53,
sans-serif; color: #757575; margin-right: 1px; text-align: right; }
/*主页文章列表*/ #main { width: 100%; text-align: left; margin-top:
10px; } #mainContent .forFlow { margin-left: 22em; float: none; width:
auto; } #mainContent { min-height: 200px; padding: 0px 0px 10px 0;
-o-text-overflow: ellipsis; text-overflow: ellipsis; overflow: hidden;
word-break: break-all; float: left; margin-left: -22em; margin-top: 0;
width: 100%; } /*日期*/ .day { text-decoration: none; background:
#FFF; padding: 20px; margin-bottom: -1px; color: #515151; font-size:
21px; line-height: 1.5em; float: left; clear: right; } .day:hover {
border: 1px solid #21759B; position: relative; z-index: 10; }
.day:hover .postSeparator { border-top: 1px dashed #515151; } .dayTitle
{ text-decoration: none; } .dayTitle a { text-decoration: none; color:
#515151; font-size: 13px; font-weight: bold; font-family:
Georgia,Consolas,Microsoft YaHei, monospace; } /*小说标题*/ .postTitle
{ font-family: Georgia,’Consolas’,’FZYaoTi’,’STHeiti’,Microsoft YaHei;
\5B8B\4F53, sans-serif; font: ‘Lucida Console’,Georgia,’Microsoft
YaHei’,Microsoft YaHei; margin-bottom: 10px; font-size: 20px;
font-weight: bold; float: right; width: 100%; clear: both; } .postTitle
a:link, .postTitle a:visited, .postTitle a:active { color: #21759b;
font-weight: bold; transition: all 0.4s linear 0s; } .postTitle a:hover
{ text-decoration: none; margin-left: 30px; font-weight: bold; color:
#45bcf9; } .postTitle2 { text-decoration: none; font-size: 20px;
font-weight: bold; font-family:
Georgia,’Consolas’,’FZYaoTi’,’STHeiti’,Microsoft YaHei; \5B8B\4F53,
sans-serif; font: ‘Lucida Console’,Georgia,’Microsoft YaHei’,Microsoft
YaHei; padding-right: 64px; padding-left: 10px; border-left-style:
solid; border-left-width: 3px; border-left-color: #515151; } .postCon {
float: right; line-height: 1.5em; width: 100%; clear: both; padding:
10px 0; } .day .postTitle a { padding-left: 10px; } .postDesc {
border-right: 3px solid #21759b; font-size: 12px; color: #21759b;
float: right; width: 100%; clear: both; text-align: right; padding-left:
20px; padding-right: 5px; margin-top: 20px; line-height: 1.5; }
.postDesc a:link, .postDesc a:visited, .postDesc a:active { color:
#666; } .postDesc a:hover { color: #21759b; text-decoration: none; }
.postSeparator { clear: both; height: 1px; width: 100%; clear: both;
float: right; margin: 0 auto 15px auto; } /*侧边栏*/ #sideBar {
margin-top: -15px; width: 240px; min-height: 200px; padding: 0px 0 0px
5px; float: right; -o-text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; word-break: break-all; } #sideBar a { color:
#757575; } #sideBar a:hover { color: #21759b; } .mySearch {
background: #FFF; } .catListTitle { font-size: 16px; background-color:
#169FE6; color: white; font-weight: normal; margin-bottom: 5px; }
.catListEssay ul li { font-size: 12px; font-weight: normal; margin-left:
-2.3em; } .liScore { font-family:
Georgia,’Consolas’,’FZYaoTi’,’STHeiti’,Microsoft YaHei; font-size: 12px;
font-weight: normal; margin-left: -2.3em; } .liRank { font-family:
Georgia,’Consolas’,’FZYaoTi’,’STHeiti’,Microsoft YaHei; font-size: 12px;
font-weight: normal; margin-left: -2.3em; } .catListTag {
text-decoration: none; background: #FFF; margin-top: 10px;
margin-bottom: 20px; } .catListTag ul { border-top: none; } .catListTag
ul li { line-height: 44px; margin-left: -30px; color: #7e8c8d; }
.catListPostArchive { background: #FFF; } .catListPostArchive ul {
border-top: none; } .catListPostArchive ul li { line-height: 44px;
color: #7e8c8d; margin-left: -30px; } .catListArticleCategory { width:
290px; padding-top: 20px; background: #FFF; margin-top: 20px; }
.catListImageCategory { width: 290px; padding-top: 20px; background:
#FFF; margin-top: 20px; } .catListComment { background: #FFF;
margin-top: 20px; } #RecentCommentsBlock { padding: 10px; border: 1px
solid #dedede; border-top: none; } .recent_comment_title { font-size:
15px; color: #7e8c8d; } .recent_comment_body,
.recent_comment_author { border-bottom: 1px solid #E9E9E9; color:
#9fa4a4; font-size: 13px; } .recent_comment_body { border-bottom:
none; } .catListView { background: #FFF; margin-top: 20px; }
#TopViewPostsBlock { padding: 10px; border: 1px solid #dedede;
border-top: none; } .catListView ul li { border-bottom: 1px solid
#E9E9E9; margin-left: -30px; margin-bottom: 5px; } .catListFeedback {
background: #FFF; margin-top: 20px; } #TopFeedbackPostsBlock {
padding: 10px; border-top: none; } .catListFeedback ul li { margin-left:
-30px; } .catListLink { display: none; } .clearFix:after { clear: both;
display: block; height: 0; line-height: 0; content: “”; visibility:
hidden; } #myding { background: #99B16B; display: none; }
#myadd:hover { opacity: 1; } #goto-top:hover { background:
url()
no-repeat 0 -36px; } /*日历控件样式*/ #blog-calendar { float: center;
width: 238px; margin-top: 20px; padding-bottom: 5px; margin-bottom:
20px; box-shadow: 0 1px 1px #ccc; } #blog-calendar td { font-size:
12px; font-family: “Comic Sans MS”; } #blog-calendar th { font-size:
12px; } #calendar { width: 238px; padding-bottom: 5px; margin-bottom:
35px; box-shadow: 0 1px 1px #ccc; } #calendar .Cal { width: 100%;
line-height: 1.5em; } #calendar td { font-family: “Comic Sans MS”;
background: #FFFFFF; padding-top: 2px; } .Cal { border: none; color:
#666; text-decoration: none; } #calendar table a:hover { color: white;
text-decoration: none; } .CalTodayDay { background: #FFF !important;
text-decoration: none; } .CalWeekendDay { padding-top: 4px;
padding-bottom: 4px; text-decoration: none; } .CalOtherMonthDay { color:
#ccc; padding-top: 4px; padding-bottom: 4px; text-decoration: none; }
#calendar .CalNextPrev a:link, #calendar .CalNextPrev a:visited,
#calendar .CalNextPrev a:active { font-weight: bold; padding-left:
10px; padding-right: 15px; text-decoration: none; } .CalDayHeader {
background: #F8F8F8; font-weight: 100; color: #5E5F63;
text-decoration: none; } .CalTitle { /**日历年月底部样式**/
background: #6293bb; width: 100%; height: 25px; text-align: center;
font-size: 14px; font-weight: bold; padding: 5px 0; color: #FFF;
text-decoration: none; } .CalTitle td { background: #F8F8F8 !important;
border: 0px !important; color: #5E5F63; font-family: “Comic Sans MS”;
text-decoration: none; } .catListTitle { font-size: 13px; padding: 10px
20px; background-color: #515151; color: white; font-weight: normal; }
.catListComment { line-height: 1.5em; } .divRecentComment { text-indent:
2em; color: #494949; margin-bottom: 20px; } #sideBarMain ul {
line-height: 1.5em; } #sideBarMain li { line-height: 1.8; }
#widget_my_zzk { padding: 10px 0 0 15px; margin-bottom: 3px; }
#widget_my_google { padding: 10px 0 15px 15px; margin: 0 !important;
} .input_my_zzk { width: 122px; height: 35px; outline: none;
line-height: 35px; font-size: 13px; padding: 0 5px; } input.btn_my_zzk
{ font-size: 13px; height: 37px; width: 70px; background: #515151;
text-align: center; line-height: 37px; border: none; color: #FFF;
font-family: “Microsoft Yahei”, “Microsoft YaHei”, Arial; }
input.btn_my_zzk:hover { cursor: pointer; cursor: hand; }
/*查阅文章页面*/ #topics { width: 100%; min-height: 200px; padding:
0px 0px 10px 0; float: left; -o-text-overflow: ellipsis; text-overflow:
ellipsis; overflow: hidden; word-break: break-all; } #topics .postTitle
{ border: 0px; font-size: 130%; font-weight: bold; float: left;
line-height: 1.5em; width: 100%; padding-left: 5px; } #EntryTag {
color: #666; } #EntryTag a { margin-left: 5px; height: 20px;
line-height: 20px; color: #333333; padding: 3px 14px; border-radius:
10px; margin: 2px 5px 0; background: #e7e7e7; text-decoration: none; }
#EntryTag a:link, #EntryTag a:visited, #EntryTag a:active { color:
#666; } #EntryTag a:hover { color: #f5f5f5; background: #21759b;
transition: all 0.4s linear 0s; } #BlogPostCategory { color: #666; }
#BlogPostCategory a { margin-left: 5px; height: 20px; line-height:
20px; color: #333333; padding: 3px 14px; border-radius: 10px; margin:
2px 5px 0; background: #e7e7e7; text-decoration: none; }
#BlogPostCategory a:link, #BlogPostCategory a:visited,
#BlogPostCategory a:active { color: #666; } #BlogPostCategory a:hover
{ color: #f5f5f5; background: #21759b; } #topics .postDesc {
padding-left: 0px; width: 100%; text-align: right; color: #666;
margin-top: 5px; background: none; } .feedback_area_title { font:
normal normal 16px/35px “Microsoft YaHei”; margin: 10px 0 30px;
border-bottom: 2px solid #cccccc; } .louzhu { background: transparent
url()
no-repeat scroll right top; padding-right: 16px; } .feedbackListSubtitle
{ color: #A8A8A8; } .feedbackListSubtitle a:link, .feedbackListSubtitle
a:visited, .feedbackListSubtitle a:active { color: #21759b;
font-weight: bold; } .feedbackListSubtitle a:hover { color: #21759b;
text-decoration: underline; } .feedbackListSubtitle b { color: #21759b;
} .feedbackManage { width: 200px; text-align: right; float: right; }
.feedbackCon { border-bottom: 1px solid #EEE; padding: 10px 20px 10px
5px; min-height: 35px; _height: 35px; margin-bottom: 1em; line-height:
1.5; } #divRefreshComments { text-align: right; margin-bottom: 10px; }
.commenttb { padding: 8px; margin-bottom: 10px; width: 50%; color:
#555; border: 1px solid #ddd; border-radius: 3px; -moz-border-radius:
3px; -webkit-border-radius: 3px; width: 320px; } .commenttb:hover {
color: #333; border-color: rgba(82, 168, 236, 0.8); outline: 0;
-webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.075), 0 0 4px
rgba(82, 168, 236, 0.6); -moz-box-shadow: inset 1px 1px 1px rgba(0, 0,
0, 0.075), 0 0 4px rgba(82, 168, 236, 0.6); box-shadow: inset 1px 1px
1px rgba(0, 0, 0, 0.075), 0 0 4px rgba(82, 168, 236, 0.6); transition:
all 0.4s linear 0s; } .commentTextBox { width: 410px !important;
margin-top: 10px; margin-bottom: 10px; } .commentTextBox:hover { color:
#333; border-color: rgba(82, 168, 236, 0.8); outline: 0;
-webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.075), 0 0 4px
rgba(82, 168, 236, 0.6); -moz-box-shadow: inset 1px 1px 1px rgba(0, 0,
0, 0.075), 0 0 4px rgba(82, 168, 236, 0.6); box-shadow: inset 1px 1px
1px rgba(0, 0, 0, 0.075), 0 0 4px rgba(82, 168, 236, 0.6); transition:
all 0.4s linear 0s; } #AjaxHolder_PostComment_btnSubmit { padding:
8px 20px; text-align: center; font-size: 14px; color: #fff; border:
none; background: #21759b; border-radius: 3px; -moz-border-radius: 3px;
-webkit-border-radius: 3px; -webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease; -o-transition: all 0.4s ease;
-ms-transition: all 0.4s ease; transition: all 0.4s ease; cursor:
pointer; display: inline-block; vertical-align: middle; outline: none;
text-decoration: none; } #AjaxHolder_PostComment_btnSubmit:hover {
background: #333; } #AjaxHolder_PostComment_divCommnentArea tr {
margin-top: 10px; margin-bottom: 10px; } /*评论框*/ .comment_vote {
padding-right: 10px; } .comment_vote a { color: #999; } .comment_vote
a:hover { color: #21759b; } #commentform_title { font: normal normal
16px/35px “Microsoft YaHei”; margin: 10px 0 30px; border-bottom: 2px
solid #cccccc; background-image: none; padding: 0; }
#comment_form_container .author { padding-left: 10px; color: #555;
border: 1px solid #ddd; border-radius: 3px; -moz-border-radius: 3px;
-webkit-border-radius: 3px; width: 320px; height: 20px;
background-image: none; } #comment_form_container p { font-size:
14px; margin-bottom: 20px; } .commentbox_title_left { font-size: 14px;
} .commentbox_title_right { float: left; } #comment_form_container
.comment_textarea { width: 95%; height: 200px; font-size: 13px;
padding: 8px; margin-bottom: 10px; color: #555; border: 1px solid
#ddd; border-radius: 3px; -moz-border-radius: 3px;
-webkit-border-radius: 3px; } #comment_form_container
.comment_textarea:hover { border-color: rgba(82, 168, 236, 0.8);
outline: 0; transition: all 0.4s linear 0s; } #comment_form_container
.comment_textarea:focus { outline: 0; } .comment_btn { width: 100px;
height: 38px; padding: 8px 20px; text-align: center; font-size: 14px;
color: #fff; border: none; background: #21759b; border-radius: 3px;
-moz-border-radius: 3px; -webkit-border-radius: 3px; -webkit-transition:
all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s
ease; -ms-transition: all 0.4s ease; transition: all 0.4s ease; cursor:
pointer; display: inline-block; vertical-align: middle; outline: none;
text-decoration: none; } .comment_btn:hover { background: #333; }
#comment_form_container { } /*列表页面*/ .entrylistTitle,
.PostListTitle, .thumbTitle { margin-bottom: 25px; height: 38px;
line-height: 38px; font-size: 16px; border-bottom: 2px solid #e6e6e6; }
color: #21759b; .entrylistDescription { color: #666; text-align:
right; padding-top: 5px; padding-bottom: 5px; padding-right: 10px;
margin-bottom: 10px; } .entrylistItem { min-height: 20px; _height:
20px; margin-bottom: 30px; padding-bottom: 50px; padding-top: 10px;
width: 100%; } .entrylistPosttitle { padding-left: 15px; margin-bottom:
10px; border-left: 3px solid #21759b; font-size: 20px; width: 100%; }
.entrylistPosttitle a:link, .entrylistPosttitle a:visited,
.entrylistPosttitle a:active { color: #21759b; transition: all 0.4s
linear 0s; } .entrylistPosttitle a:hover { margin-left: 30px; color:
#0f3647; text-decoration: none; } .entrylistPostSummary { margin-top:
5px; margin-bottom: 5px; } .entrylistItemPostDesc { margin-top: 12px;
text-align: right; color: #757575; padding-left: 5px; }
.entrylistItemPostDesc a:link, .entrylistItemPostDesc a:visited,
.entrylistItemPostDesc a:active { color: #666; } .entrylistItemPostDesc
a:hover { color: #21759b; } .entrylist .postSeparator { clear: both;
width: 100%; font-size: 0; line-height: 0; margin: 0; padding: 0;
height: 0; border: none; } .divRecentCommentAticle a { color: #000; }
.pager { text-align: right; margin-right: 10px; } .pager a { box-shadow:
0 1px 3px #3671a5; border: 1px solid #3671a5; background: #3671a5;
color: white; transition: all 0.4s linear 0s; } .pager a:hover {
background: #000; } .PostList { border-bottom: 1px solid #ccc; clear:
both; min-height: 1.5em; _height: 1.5em; padding-top: 10px;
margin-bottom: 20px; padding-bottom: 20px; } .postTitl2 { float: left;
padding-top: 10px; padding-bottom: 10px; font-size: 14px; } .postDesc2 {
color: #666; float: right; } .postText2 { clear: both; color: #757575;
} /*留言*/ .pfl_feedback_area_title { text-align: right;
line-height: 1.5em; font-weight: bold; margin-bottom: 10px; }
.pfl_feedbackItem { border: 1px dashed #ccc; padding: 10px;
border-radius: 3px; margin-bottom: 20px; } .pfl_feedbacksubtitle {
width: 100%; height: 1.5em; } .pfl_feedbackname { float: left; }
.pfl_feedbackname a { color: #21759b; font-weight: bold; }
.pfl_feedbackManage { float: right; } .pfl_feedbackCon { color: black;
padding-top: 5px; padding-bottom: 5px; } .pfl_feedbackAnswer { color:
#F40; text-indent: 2em; } .tdSentMessage { text-align: right; }
.errorMessage { width: 300px; float: left; } #Profile1_panelAdd
input[type=text], #Profile1_txtContent { padding: 8px;
margin-bottom: 10px; color: #555; border: 1px solid #ddd;
border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px;
} #Profile1_panelAdd input[type=text]:hover,
#Profile1_txtContent:hover { color: #333; border-color: rgba(82, 168,
236, 0.8); outline: 0; -webkit-box-shadow: inset 1px 1px 1px rgba(0, 0,
0, 0.075), 0 0 4px rgba(82, 168, 236, 0.6); -moz-box-shadow: inset 1px
1px 1px rgba(0, 0, 0, 0.075), 0 0 4px rgba(82, 168, 236, 0.6);
box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.075), 0 0 4px rgba(82,
168, 236, 0.6); transition: all 0.4s linear 0s; } #Profile1_panelAdd
input[type=text]:focus, #Profile1_txtContent:focus { outline: 0;
border-color: rgba(82, 168, 236, 0.8); } #Profile1_panelAdd
input[type=submit] { padding: 8px 20px; text-align: center; font-size:
14px; color: #fff; border: none; background: #21759b; border-radius:
3px; -moz-border-radius: 3px; -webkit-border-radius: 3px;
-webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease; -ms-transition: all 0.4s ease; transition:
all 0.4s ease; cursor: pointer; display: inline-block; vertical-align:
middle; outline: none; text-decoration: none; } #Profile1_panelAdd
input[type=submit]:hover { background: #333; } .feedbackListSubtitle
{ clear: both; color: #A8A8A8; padding: 8px 5px; } .feedbackItem {
margin-top: 30px; } .divPhoto { border: 1px solid #ccc; padding: 2px;
margin-right: 10px; } .thumbDescription { color: #757575; text-align:
right; padding-top: 5px; padding-bottom: 5px; padding-right: 10px;
margin-bottom: 30px; } #实用的60个CSS代码片段,手把手教你用JS给博客动态增添目录。footer { color: #686868; text-align: center;
min-height: 15px; _height: 15px; border-top: 1px solid #ededed;
margin-top: 50px; padding-top: 10px; margin-bottom: 10px; }
/*留言查看页面的个人新闻*/ .personInfo { margin-bottom: 20px; }
/*留言分页区域*/ .pages { text-align: right; } #RSignature {
border-top: #45bcf9 1px dashed; border-right: #45bcf9 1px dashed;
border-bottom: #45bcf9 1px dashed; border-left: #45bcf9 1px dashed;
padding-top: 12px; padding-right: 12px; padding-bottom: 12px;
padding-left: 140px; color: #FFFFFF; font-family: 微软雅黑; font-size:
14px; background:
url()
#45bcf9 no-repeat 1% 30%; } #RSignature a { color: white; }
#RSignature div { line-height: 25px; }
/*第四片段:文章内容常用标签格式*/ /*文章内部常用竹签格式*/
.postBody { color: #000; line-height: 1.7; font-size: 14px; } .postBody
p, .postCon p { text-indent: 2em; margin: 0 auto 1em auto; } .postBody
h2 { font-size: 150%; margin: 15px auto 2px auto; font-weight: bold; }
.postBody h3 { font-size: 120%; margin: 15px auto 2px auto; font-weight:
bold; } .postBody h4 { background-color: #515151; color: white;
text-shadow: 0 1px rgba(33, 117, 188, 0.5); font-family: Consolas,
Microsoft YaHei, ‘Andale Mono’, monospace; direction: ltr; text-align:
center; white-space: pre; word-spacing: normal; word-break: normal;
line-height: 1.5; padding: 1em; margin: .5em 0; overflow: auto;
border-radius: 0.5em; -moz-tab-size: 4; -o-tab-size: 4; tab-size: 4;
-webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; hyphens:
none; font-size: 16.5px; margin-top: 3em; } .postBody h5 { font-size:
100%; margin: 15px auto 2px auto; font-weight: bold; color: #333; }
.postBody a:link, .postBody a:visited, .postBody a:active {
text-decoration: underline; } .postCon a:link, .postCon a:visited,
.postCon a:active { text-decoration: underline; } .postBody ul, .postCon
ul { margin-left: 2em; } .postBody li, .postCon li { list-style-type:
disc; } .postBody blockquote { background-repeat: no-repeat; quotes:
“\201C””\201D””\2018″”\2019″; } blockquote:before { color: #ccc;
content: open-quote; font-size: 4em; line-height: .1em; vertical-align:
-.4em; } blockquote p { display: inline; } .buryit { background:
url() no-repeat; } .burynum {
display: none; } #author_profile { display: none; } #green_channel {
float: left; } #div_digg { float: right; } .myposts_title {
font-weight: bold; text-align: center; } #sideBar { font-size: 12px; }
#sideBar h3 { font-size: 14px; } .c_b_p_desc { font-size: 14px;
line-height: 1.7; } /*页脚下一页*/ #nav_next_page { line-height:
50px; } #nav_next_page a { background-color: #515151; height: 40px;
line-height: 40px; color: #fff; display: inline-block; padding: 0 25px;
text-decoration: none; } /*躲藏多余音信*/
#ad_text_under_commentbox, #ad_under_post_holder { display:
none; } /*顶一下*/ .diggnum { font-size: 28px; color: #6DA47D;
font-family: ‘Microsoft Yahei’; } #div_digg { position: fixed; right:
180px; bottom: 20px; z-index: 9999; background-color: #fff; font-size:
12px; width: 125px; margin: 10px 0 0 0; padding: 5px; text-align:
center; border: 3px solid #55895b; border-radius: 5px; } .diggit {
float: left; width: 128px; height: 128px; background:
url(”)
no-repeat; background-position: 0 0; text-align: center; cursor:
pointer; } .diggit:hover { background-position: -128px 0; } .postBody h1
{ border-left: 5px solid #e84c3d; padding-left: 10px; background-color:
#ECECEC; } .postBody h2 { padding-left: 20px; border-bottom: 1px dashed
#f00; color: transparent; background-color: black; text-shadow:
rgba(255,255,255,0.5) 0 5px 6px, rgba(255,255,255,0.2) 1px 3px 3px;
-webkit-background-clip: text; } .blog_catalog { display: none; width:
auto; height: auto; float: right; position: fixed; right: 180px; bottom:
200px; z-index: 9999; background-color: #fff; font-size: 12px; margin:
10px 0 0 0; padding: 5px; text-align: center; border: 3px solid
#55895b; border-radius: 5px; -webkit-box-shadow: 0px 1px 3px 0px
rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13); -moz-box-shadow: 0px
1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);
box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px
rgba(0,0,0,.13); } .blog_catalog > li > a { background-color:
#616975; background-image: -webkit-gradient(linear, left top, left
bottom, from(rgb(114, 122, 134)),to(rgb(80, 88, 100)));
background-image: -webkit-linear-gradient(top, rgb(114, 122, 134),
rgb(80, 88, 100)); background-image: -moz-linear-gradient(top, rgb(114,
122, 134), rgb(80, 88, 100)); background-image: -o-linear-gradient(top,
rgb(114, 122, 134), rgb(80, 88, 100)); background-image:
-ms-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
background-image: linear-gradient(top, rgb(114, 122, 134), rgb(80, 88,
100)); filter:
progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr=’#727a86′,
EndColorStr=’#505864′); -webkit-box-shadow: inset 0px 1px 0px 0px
#878e98; -moz-box-shadow: inset 0px 1px 0px 0px #878e98; box-shadow:
inset 0px 1px 0px 0px #878e98; width: 100%; height: 2.75em;
line-height: 2.75em; text-indent: 2.75em; display: block; position:
relative; font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif;
font-weight: 600; color: #fff; text-shadow: 0px 1px 0px rgba(0,0,0,.5);
} .blog_catalog ul li a { background: #fff; border-bottom: 1px solid
#efeff0; width: 100%; height: 2.75em; line-height: 2.75em; display:
block; position: relative; font-family: “Helvetica Neue”, Helvetica,
Arial, sans-serif; font-size: 0.923em; font-weight: 400; color:
#878d95; } .blog_catalog ul li a:hover { cursor: pointer; }
.blog_catalog > li > a:hover, .blog_catalog > li >
a.active, .blog_catalog > li:target > a; /*add this*/ {
background-color: #35afe3; background-image: -webkit-gradient(linear,
left top, left bottom, from(rgb(69, 199, 235)),to(rgb(38, 152, 219)));
background-image: -webkit-linear-gradient(top, rgb(69, 199, 235),
rgb(38, 152, 219)); background-image: -moz-linear-gradient(top, rgb(69,
199, 235), rgb(38, 152, 219)); background-image: -o-linear-gradient(top,
rgb(69, 199, 235), rgb(38, 152, 219)); background-image:
-ms-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
background-image: linear-gradient(top, rgb(69, 199, 235), rgb(38, 152,
219)); filter:
progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr=’#45c7eb’,
EndColorStr=’#2698db’); border-bottom: 1px solid #103c56;
-webkit-box-shadow: inset 0px 1px 0px 0px #6ad2ef; -moz-box-shadow:
inset 0px 1px 0px 0px #6ad2ef; box-shadow: inset 0px 1px 0px 0px
#6ad2ef; } .blog_catalog > li > a.active { border-bottom: 1px
solid #1a638f; } .blog_catalog > li > a:before { content: ”;
background-image: url(../images/sprite.png); background-repeat:
no-repeat; font-size: 36px; height: 1em; width: 1em; position: absolute;
left: 0; top: 50%; margin: -.5em 0 0 0; } .item1 > a:before {
background-position: 0 0; } .item2 > a:before { background-position:
-38px 0; } .item3 > a:before { background-position: 0 -38px; } .item4
> a:before { background-position: -38px -38px; } .item5 > a:before
{ background-position: -76px 0; } .blog_catalog > li > a span {
font-size: 0.857em; display: inline-block; position: absolute; right:
1em; top: 50%; background: #48515c; line-height: 1em; height: 1em;
padding: .4em .6em; margin: -.8em 0 0 0; color: #fff; text-indent: 0;
text-align: center; -webkit-border-radius: .769em; -moz-border-radius:
.769em; border-radius: .769em; -webkit-box-shadow: inset 0px 1px 3px 0px
rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15);
-moz-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px
0px rgba(255, 255, 255, .15); box-shadow: inset 0px 1px 3px 0px rgba(0,
0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15); text-shadow: 0px
1px 0px rgba(0,0,0,.5); font-weight: 500; } .blog_catalog > li >
a:hover span, .blog_catalog > li a.active span, .blog_catalog >
li:target > a span /*add this*/ { background: #2173a1; }
.blog_catalog > li > ul li a:before { font-size: 8px; color:
#bcbcbf; position: absolute; width: 1em; height: 1em; top: 0; left:
-2.7em; } .blog_catalog > li > ul li:hover a, .blog_catalog >
li > ul li:hover a span, .blog_catalog > li > ul li:hover
a:before { color: #32373D; } .blog_catalog ul > li > a span {
font-size: 0.857em; display: inline-block; position: absolute; right:
1em; top: 50%; / background: #fff; border: 1px solid #d0d0d3;
line-height: 1em; height: 1em; padding: .4em .7em; margin: -.9em 0 0 0;
color: #878d95; text-indent: 0; text-align: center;
-webkit-border-radius: .769em; -moz-border-radius: 769em; border-radius:
769em; text-shadow: 0px 0px 0px rgba(255,255,255,.01)); }
/*additional*/ .blog_catalog > li > ul { height: 0; overflow:
hidden; opacity: 0; filter: alpha(opacity=0); /* IE6-IE8 */
-webkit-transition: opacity 0.9s ease-in-out; -moz-transition: opacity
0.9s ease-in-out; -o-transition: opacity 0.9s ease-in-out;
-ms-transition: opacity 0.9s ease-in-out; transition: opacity 0.9s
ease-in-out; } .blog_catalog > li:target > ul { height: auto;
/*using auto nullifies the height transitions, but it makes things
flexible which is more important*/ border-bottom: 1px solid #51555a;
opacity: 1; filter: alpha(opacity=100); /* IE6-IE8 */ }
#cnblogs_post_body ul li { list-style-type: none; margin-left: -30px;
} .blog_catalog_open { width: auto; height: auto; float: right;
position: fixed; right: 180px; bottom: 200px; z-index: 9999;
background-color: #fff; font-size: 12px; width: 125px; margin: 10px 0 0
0; padding: 5px; text-align: center; border: 3px solid #55895b;
border-radius: 5px; -webkit-box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73),
0px 0px 18px 0px rgba(0,0,0,.13); -moz-box-shadow: 0px 1px 3px 0px
rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13); box-shadow: 0px 1px
3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13); cursor:
pointer; } View Code

3.页角html代码

亚洲必赢官网 10<script>
var digg = $(‘#mainContent’);//the element I want to monitor
digg.bind(‘DOMNodeInserted’, function(e) { $(‘.buryit’).remove(); });
$(‘#navList’).children().each(function(){ $(this).prepend(‘<div
class=”border”></div>’); });
$(‘#cnblogs_post_body’).append(‘<div id=”blog_catalog_open”
class=”blog_catalog_open”>展开目录</div>’);
$(‘#cnblogs_post_body’).append(‘<div id=”blog_catalog”
class=”blog_catalog”><ul><li><a
id=”blog_catalog_close”
class=”blog_catalog_close”>>折叠目录</a></li></ul></div>’);
var id = 1; $(‘#cnblogs_post_body h1’).each(function(){
$(this).attr(‘id’,’blog_catalog_id_’+id); $(‘#blog_catalog
ul’).append(‘<li><a
href=”#blog_catalog_id_’+id+'”>’+$(this).text()+'</a></li>’);
id++; }); $(‘#blog_catalog_open’).click(function(){
$(‘#blog_catalog’).show(); $(‘#blog_catalog_open’).hide(); });
$(‘#blog_catalog_close’).click(function(){
$(‘#blog_catalog’).hide(); $(‘#blog_catalog_open’).show(); });
</script> View Code

 

动态突显目录的功用不用每一次写博客的时候繁琐的人工整理目录,又足以动态浮…

论及背景图像

大家也可以轮换用图形替换内容而不是唯有纯文本。纵然content属性提供了 url()来插入图片,
不过在越多的实例中,我更赞成于采纳背景(background)属性从而更好的主宰图片。

亚洲必赢官网 11

 

CSS

</pre> blockquote:before { content: ” “; font-size: 24pt;
text-align: center; line-height: 42px; color: #fff; float: left;
position: relative; top: 30px; border-radius: 25px; background:
url(images/quotationmark.png) -3px -3px #ddd; display: block; height:
25px; width: 25px; } blockquote:after { content: ” “; font-size: 24pt;
text-align: center; line-height: 42px; color: #fff; float: right;
position: relative; bottom: 40px; border-radius: 25px; background:
url(images/quotationmark.png) -1px -32px #ddd; display: block; height:
25px; width: 25px; }

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
</pre>
blockquote:before {
content: " ";
font-size: 24pt;
text-align: center;
line-height: 42px;
color: #fff;
float: left;
position: relative;
top: 30px;
border-radius: 25px;
 
background: url(images/quotationmark.png) -3px -3px #ddd;
 
display: block;
height: 25px;
width: 25px;
}
blockquote:after {
content: " ";
font-size: 24pt;
text-align: center;
line-height: 42px;
color: #fff;
float: right;
position: relative;
bottom: 40px;
border-radius: 25px;
 
background: url(images/quotationmark.png) -1px -32px #ddd;
 
display: block;
height: 25px;
width: 25px;
}

然则,正如您可见从地方的代码片段中来看的,大家如故申明了content属性,而且此时采取了空字符串。content属性是必须的同时应当时时被采纳。否则,伪成分无论如何都不大概正常工作。

    -o-transform: translateY(-50%);

box-sizing: border-box;

构成伪类

即便有例外门类的伪X(伪成分、伪类),大家能够利用伪类连同伪元素一起放入一个CSS规则中,例如,若是大家愿意当大家的鼠标移到blockqoute上时,引号的背景观可以略微变深。

亚洲必赢官网 12

 

CSS

blockquote:hover:after, blockquote:hover:before { background-color:
#555; }

1
2
3
blockquote:hover:after, blockquote:hover:before {
background-color: #555;
}

    transform: translateY(-50%);

}

增进联网效果

大家竟然可以在伪成分上利用transition属性来创制漂亮的颜料过渡效果。

JavaScript

transition: all 350ms; -o-transition: all 350ms; -moz-transition: all
350ms; -webkit-transition: all 350ms;

1
2
3
4
transition: all 350ms;
-o-transition: all 350ms;
-moz-transition: all 350ms;
-webkit-transition: all 350ms;

}

body {

更加多的灵感

为了振奋你的灵感,大家已经挑选了八个很酷的事例,可以在web设计上给您多多呼声。

应用这些技能,从单行文本、段落到box,都会笔直对齐。如今浏览器对Transform的支撑是急需关爱的,

background-color: #f5f5f5;

憨态可掬的阴影

在那一个科目中 Paul
Underwood 解释了何等创造越发维妙维肖和吸引人的影子效果。

使用
伪元素:before 和 :after 。它们八个都是相对定位,而且选用负z-index来放置到图片后方完结阴影效果。

亚洲必赢官网 13

3D按钮

这是一个丰盛聪明的完毕,利用伪成分结合CSS3 box-shadow
来绘制一个令人吃惊的3D按钮,仅仅使用了CSS和纯粹的锚文本。伪成分:before
被用来在按钮的左侧添加数字“1”。

亚洲必赢官网 14

叠加图像效果

动用伪成分来单独爱慕一个图纸标签创设一个“凌乱的”叠加图像效果也是只怕的。伪成分用于建立一个图片叠加的错觉,通过利用z-index负值使“叠加”的图纸在真的的图纸前面来促成。

亚洲必赢官网 15

Chrome 4, Opera 10, Safari 3, Firefox 3, and Internet Explorer
9均协理该属性

font-family: “Helvetica Neue”, Helvetica, Arial, “Microsoft Yahei UI”,
“Microsoft YaHei”, SimHei, “\5B8B\4F53”, simsun, sans-serif;

结论

伪成分很酷同时也是可利用到骨子里工作中的,基本上,每一种大家所拉长的要素都不会惊动现有的HTML结构,而且伪成分可以形成 差不多所有大家能体悟的工作。

实际有部分伪成分的改良工作,如今逐步展开,比如伪成分嵌套div::before::before
{ content: ”; }以及多重伪成分div::before(3) { content: ”;
}。很明确,在将来的web设计中,那一个改进会让我们的安排性有更加多的款式(更加多的或许性)。但是,他们将会在最新的浏览器中得到辅助,让大家现在耐心的等待吧!

1 赞 7 收藏 2
评论

亚洲必赢官网 16

2、伸展一个成分到窗口高度

}

在切实可行情状中,你或然想要将一个要素伸展到窗口中度,基本要素的调动只好调整容器的高低,因此要使一个因素伸展到窗口中度,

img {

大家需求展开顶层成分:html和body:

display: block;

html,

max-width: 100%;

body {

}

height: 100%;

ul,ol {

}

list-style: outside none none;

下一场将100%选取到任何因素的高

}

div {

a {

    height: 100%;

text-decoration: none;

}

}

3、基于文件格式使用差距的体裁

.none {

为了更便于通晓链接的目的,有时你想让有些链接看起来和其余的两样。上边的片段在文本链接前添加一个图标,对两样的资源利用差距的图标或图片:

display: none;

a[href^=”

}

    padding-right: 20px;

.sm-visible {

    background: url(external.gif) no-repeat center right;

display: none;

}

}

/* emails */

.clearfix:after {

a[href^=”mailto:”]{

content:”.”;

    padding-right: 20px;

height:0;

    background: url(email.png) no-repeat center right;

visibility:hidden;

}

display:block;

/* pdfs */

clear:both;

a[href$=”.pdf”]{

}

    padding-right: 20px;

#header {

    background: url(pdf.png) no-repeat center right;

width: 100%;

}

height: 70px;

功效演示

background-color: #333;

4、创制跨浏览器的图像灰度

box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);

灰度有时看起来大约和古雅,能为网站显示更深层次的色调。在演示中,大家将对一个SVG图像添加灰度过滤:

position: fixed;

为了跨浏览器,会用到filter属性:

top: 0;

img {

z-index: 9999;

    filter: url(filters.svg#grayscale); /* Firefox 3.5+ */

}

    filter: gray; /* IE6-9 */

#header .center {

    -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera
15+ */

max-width: 1263px;

}

height: 70px;

5、背景渐变动画

margin: 0 auto;

CSS中最具诱惑的一个职能是能添加动画功用,除了渐变,你可以给背景象、透明度、元素大小添加动画。近期,你不能为渐变添加动画片,但上边的代码大概有协理。它经过改动背景地方,让它看起来有动画效果。

}

button {

#header .logo {

    background-image: linear-gradient(#5187c4, #1c2f45);

width: 30%;

    background-size: auto 200%;

height: 70px;

    background-position: 0 100%;

background: url(../img/logo.png) no-repeat left center;

    transition: background-position 0.5s;

text-indent: -9999px;

}

float: left;

button:hover {

}

background-position: 0 0;

#header .link {

}

width: 55%;

效用演示

height: 70px;

6、CSS:表格列宽自适用

line-height: 70px;

对于表格,当谈到调整列宽时,是相比痛心的。然后,那里有一个可以应用的技能:给td成分添加white-space:
nowrap;能让文本正确的换行

color: #eee;

td {

float: right;

    white-space: nowrap;

}

}

#header .link li {

演示

width: 20%;

7、只在一派或两边彰显盒子阴影

text-align: center;

要是你要一个盒阴影,试试那几个技能,能为任一边添加阴影。为了落到实处这一个,首先定义一个有切实可行宽高的盒子,然后正确定位:after伪类。完成底边阴影的代码如下

float: left;

.box-shadow {

}

    background-color: #FF8020;

#header .link a {

    width: 160px;

color: #eee;

    height: 90px;

display: block;

    margin-top: -45px;

}

    margin-left: -80px;

#header .link a:hover,

    position: absolute;

#header .active a {

    top: 50%;

background-color: #000;

    left: 50%;

}

}

#adver {

.box-shadow:after {

max-width: 1920px;

    content: “”;

margin: 0 auto;

    width: 150px;

padding: 70px 0 0 0;

    height: 1px;

position: relative;

    margin-top: 88px;

}

    margin-left: -75px;

#adver .center {

    display: block;

width: 40%;

    position: absolute;

height: 60px;

    left: 50%;

background-color: #000;

    z-index: -1;

position: absolute;

    -webkit-box-shadow: 0px 0px 8px 2px #000000;

top: 50%;

      -moz-box-shadow: 0px 0px 8px 2px #000000;

left: 50%;

            box-shadow: 0px 0px 8px 2px #000000;

margin: -10px 0 0 -20%;

}

opacity: 0.6;

演示

border-radius: 10px;

8、包裹长文本

}

假如您蒙受一个比我容器长的文件,这么些技术对您很有用。在这些示例中,默许时,不管容器的大幅度,文本都将水平填充。

#adver .copy {

简单易行的CSS代码就能在容器中调整文本:

opacity: 1;

pre {

background-color: transparent;

    white-space: pre-line;

padding: 3px 3px 0 3px;

    word-wrap: break-word;

}

}

#adver .search {

功能看起来如下:

width: 70%;

9、创立模糊文本

height: 52px;

想要让文本模糊?可以应用color透明和text-shadow完成

background-color: #eee;

.blurry-text {

color: #666;

  color: transparent;

border: 1px solid #666;

  text-shadow: 0 0 5px rgba(0,0,0,0.5);

border-radius: 10px;

}

font-size: 24px;

演示

padding: 0 10px;

10、用CSS动画达成省略号动画

outline: none;

其一局部将帮衬你制作一个ellipsis的卡通片,对于简易的加载状态是很有用的,而不用去使用gif图像。

display: block;

.loading:after {

float: left;

    overflow: hidden;

}

    display: inline-block;

#adver .button {

    vertical-align: bottom;

width: 30%;

    animation: ellipsis 2s infinite;

height: 54px;

    content: “\2026”; /* ascii code for the ellipsis character */

background-color: #eee;

}

color: #666;

@keyframes ellipsis {

border: 1px solid #333;

    from {

border-left-width: 3px;

        width: 2px;

border-radius: 10px;

    }

font-size: 24px;

    to {

outline: none;

        width: 15px;

cursor: pointer;

    }

font-weight: bold;

}

display: block;

演示

float: right;

11、样式重置

}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6,
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 {

#tour {

  margin: 0;

max-width: 1263px;

  padding: 0;

height: 1150px;

  border: 0;

margin: 30px auto;

  font-size: 100%;

text-align: center;

  font: inherit;

}

  vertical-align: baseline;

#tour .center {

  outline: none;

text-align: center;

  -webkit-box-sizing: border-box;

}

  -moz-box-sizing: border-box;

#tour .center h2 {

  box-sizing: border-box;

margin: 10px 0;

}

font-size: 45px;

html { height: 101%; }

letter-spacing: 2px;

body { font-size: 62.5%; line-height: 1; font-family: Arial, Tahoma,
sans-serif; }

color: #666;

article, aside, details, figcaption, figure, footer, header, hgroup,
menu, nav, section { display: block; }

}

ol, ul { list-style: none; }

#tour .center p {

blockquote, q { quotes: none; }

color: #666;

blockquote:before, blockquote:after, q:before, q:after { content: ”;
content: none; }

margin: 10px;

strong { font-weight: bold; }

font-size: 16px;

table { border-collapse: collapse; border-spacing: 0; }

}

img { border: 0; max-width: 100%; }

#tour .tour_title {

p { font-size: 1.2em; line-height: 1.0em; color: #333; }

height: 40px;

12、典型的CSS清除浮动

overflow: hidden;

.clearfix:after { content: “.”; display: block; clear: both; visibility:
hidden; line-height: 0; height: 0; }

}

.clearfix { display: inline-block; }

#tour figure {

html[xmlns] .clearfix { display: block; }

border: 1px solid #ddd;

* html .clearfix { height: 1%; }

display: block;

13、新版清除浮动(2011)

padding: 4px;

.clearfix:before, .container:after { content: “”; display: table; }

border-radius: 4px;

.clearfix:after { clear: both; }

width: 32.4%;

/* IE 6/7 */

margin: 15px 0.4%;

.clearfix { zoom: 1; }

text-align: left;

14、跨浏览器的晶莹

float: left;

.transparent {

position: relative;

    filter: alpha(opacity=50); /* internet explorer */

}

    -khtml-opacity: 0.5;      /* khtml, old safari */

#tour figure img {

    -moz-opacity: 0.5;      /* mozilla, netscape */

vertical-align: middle;

    opacity: 0.5;          /* fx, safari, opera */

}

}

#tour figure figcaption {

15、CSS引用模板

color: #777;

blockquote {

font-size: 14px;

    background: #f9f9f9;

padding: 7px 0 0 0;

    border-left: 10px solid #ccc;

letter-spacing: 1px;

    margin: 1.5em 10px;

line-height: 1.5;

    padding: .5em 10px;

}

    quotes: “\201C””\201D””\2018″”\2019”;

#tour .title {

}

color: #333;

blockquote:before {

font-weight: normal;

    color: #ccc;

}

    content: open-quote;

#tour .info {

    font-size: 4em;

padding: 5px 0 0 0;

    line-height: .1em;

}

    margin-right: .25em;

#tour .price {

    vertical-align: -.4em;

color: #f60;

}

font-size: 14px;

blockquote p {

}

    display: inline;

#tour .price strong {

}

font-size: 20px;

16、个性圆角

letter-spacing: 1px;

#container {

}

    -webkit-border-radius: 4px 3px 6px 10px;

#tour .sat {

    -moz-border-radius: 4px 3px 6px 10px;

color: #999;

    -o-border-radius: 4px 3px 6px 10px;

font-size: 13px;

    border-radius: 4px 3px 6px 10px;

font-style: normal;

}

float: right;

/* alternative syntax broken into each line */

position: relative;

#container {

right: 5px;

    -webkit-border-top-left-radius: 4px;

top: 5px;

    -webkit-border-top-right-radius: 3px;

}

    -webkit-border-bottom-right-radius: 6px;

#tour .type {

    -webkit-border-bottom-left-radius: 10px;

width: 90px;

    -moz-border-radius-topleft: 4px;

height: 25px;

    -moz-border-radius-topright: 3px;

line-height: 25px;

    -moz-border-radius-bottomright: 6px;

text-align: center;

    -moz-border-radius-bottomleft: 10px;

border-bottom-right-radius: 4px;

}

background-color: #59b200;

17、通用媒体询问

font-size: 14px;

/* Smartphones (portrait and landscape) ———– */

color: #fff;

@media only screen

letter-spacing: 1px;

and (min-device-width : 320px) and (max-device-width : 480px) {

position: absolute;

/* Styles */

top: 4px;

}

left: 4px;

/* Smartphones (landscape) ———– */

}

@media only screen and (min-width : 321px) {

#headline {

/* Styles */

max-width: 1920px;

}

padding: 70px 0 0 0;

/* Smartphones (portrait) ———– */

margin: 0 auto;

@media only screen and (max-width : 320px) {

position: relative;

/* Styles */

}

}

#headline hgroup {

/* iPads (portrait and landscape) ———– */

position: absolute;

@media only screen and (min-device-width : 768px) and (max-device-width
: 1024px) {

top: 45%;

/* Styles */

left: 18%;

}

}

/* iPads (landscape) ———– */

#headline h2 {

@media only screen and (min-device-width : 768px) and (max-device-width
: 1024px) and (orientation : landscape) {

color: #eee;

/* Styles */

font-size: 45px;

}

letter-spacing: 1px;

/* iPads (portrait) ———– */

}

@media only screen and (min-device-width : 768px) and (max-device-width
: 1024px) and (orientation : portrait) {

#headline h3 {

/* Styles */

color: #eee;

}

letter-spacing: 1px;

/* Desktops and laptops ———– */

font-size: 24px;

@media only screen and (min-width : 1224px) {

}

/* Styles */

#container {

}

max-width: 1263px;

/* Large screens ———– */

margin: 30px auto;

@media only screen and (min-width : 1824px) {

}

/* Styles */

#container .sidebar {

}

width: 28%;

/* iPhone 4 ———– */

float: right;

@media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen
and (min-device-pixel-ratio:1.5) {

}

/* Styles */

#container .sidebar h2 {

}

height: 40px;

18、现代字体栈

line-height: 40px;

/* Times New Roman-based serif */

font-size: 20px;

font-family: Cambria, “Hoefler Text”, Utopia, “Liberation Serif”,
“Nimbus Roman No9 L Regular”, Times, “Times New Roman”, serif;

font-weight: normal;

/* A modern Georgia-based serif */

letter-spacing: 1px;

font-family: Constantia, “Lucida Bright”, Lucidabright, “Lucida Serif”,
Lucida, “DejaVu Serif,” “Bitstream Vera Serif”, “Liberation Serif”,
Georgia, serif;

color: #666;

/*A more traditional Garamond-based serif */

text-indent: 10px;

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;

background-color: #fafafa;

/*The Helvetica/Arial-based sans serif */

border-bottom: 1px solid #eee;

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;

text-align: left;

/*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;

#container .recommend {

/*The Trebuchet-based sans serif */

border: 1px solid #eee;

font-family: “Segoe UI”, Candara, “Bitstream Vera Sans”, “DejaVu Sans”,
“Bitstream Vera Sans”, “Trebuchet MS”, Verdana, “Verdana Ref”,
sans-serif;

margin: 0 0 10px;

/*The heavier “Impact” sans serif */

background-color: #fff;

font-family: Impact, Haettenschweiler, “Franklin Gothic Bold”, Charcoal,
“Helvetica Inserat”, “Bitstream Vera Sans Bold”, “Arial Black”,
sans-serif;

}

/*The monospace */

#container .tag {

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;

text-align: center;

19、自定义文本拔取

padding: 10px 0;

::selection { background: #e2eae2; }

}

::-moz-selection { background: #e2eae2; }

#container .tag li {

::-webkit-selection { background: #e2eae2; }

display: inline-block;

20、为logo隐藏H1

background-color: #eee;

h1 {

width: 100px;

    text-indent: -9999px;

height: 35px;

    margin: 0 auto;

line-height: 35px;

    width: 320px;

text-indent: 8px;

    height: 85px;

text-align: left;

    background: transparent url(“images/logo.png”) no-repeat scroll;

margin:2px 0;

}

}

21、图片边框偏光

#container .tag a {

img.polaroid {

display: block;

    background:#000; /*Change this to a background image or remove*/

color: #999;

    border:solid #fff;

}

    border-width:6px 6px 20px 6px;

#container .tag a:hover {

    box-shadow:1px 1px 5px #333; /* Standard blur at 5px. Increase for
more depth */

color: #fff;

    -webkit-box-shadow:1px 1px 5px #333;

background-color: #458B00;

    -moz-box-shadow:1px 1px 5px #333;

}

    height:200px; /*Set to height of your image or desired div*/

#container .hot {

    width:200px; /*Set to width of your image or desired div*/

border: 1px solid #eee;

}

margin: 0 0 10px;

22、锚链接伪类

text-align: center;

a:link { color: blue; }

background-color: #fff;

a:visited { color: purple; }

}

a:hover { color: red; }

#container .figure {

a:active { color: yellow; }

padding: 10px 0;

23、奇特的CSS引用

}

.has-pullquote:before {

#container .hot figure {

    /* Reset metrics. */

display: inline-block;

    padding: 0;

color: #666;

    border: none;

padding: 4px;

    /* Content */

}

    content: attr(data-pullquote);

#container .treasure {

    /* Pull out to the right, modular scale based margins. */

border: 1px solid #eee;

    float: right;

margin: 0 0 10px;

    width: 320px;

background-color: #fff;

    margin: 12px -140px 24px 36px;

}

    /* Baseline correction */

#container .box {

    position: relative;

text-align: center;

    top: 5px;

padding: 10px 0;

    /* Typography (30px line-height equals 25% incremental leading) */

}

    font-size: 23px;

#container .box a {

    line-height: 30px;

display: inline-block;

}

background-color: #eee;

.pullquote-adelle:before {

width: 150px;

    font-family: “adelle-1”, “adelle-2”;

height: 40px;

    font-weight: 100;

line-height: 40px;

    top: 10px !important;

text-indent: 35px;

}

text-align: left;

.pullquote-helvetica:before {

margin:3px 0;

    font-family: “Helvetica Neue”, Arial, sans-serif;

color: #999;

    font-weight: bold;

}

    top: 7px !important;

#container .box a.trea1 {

}

background: #eee url(../img/trea1.png) no-repeat 10px center;

.pullquote-facit:before {

}

    font-family: “facitweb-1”, “facitweb-2”, Helvetica, Arial,
sans-serif;

#container .box a.trea2 {

    font-weight: bold;

background: #eee url(../img/trea2.png) no-repeat 10px center;

    top: 7px !important;

}

}

#container .box a.trea3 {

24、CSS3:全屏背景

background: #eee url(../img/trea3.png) no-repeat 10px center;

html {

}

background: url(‘images/bg.jpg’) no-repeat center center fixed;

#container .box a.trea4 {

-webkit-background-size: cover;

background: #eee url(../img/trea4.png) no-repeat 10px center;

-moz-background-size: cover;

}

-o-background-size: cover;

.list {

background-size: cover;

width: 71%;

}

float: left;

25、内容垂直居中

}

.container {

.list h2 {

    min-height: 6.5em;

height: 40px;

    display: table-cell;

line-height: 40px;

    vertical-align: middle;

font-size: 30px;

}

font-weight: normal;

26、强制出现垂直滚动条

border-bottom: 1px dashed #999;

html { height: 101% }

padding: 0 0 15px 0;

27、CSS3渐变模板

color: #666;

#colorbox {

}

    background: #629721;

.about p {

    background-image: -webkit-gradient(linear, left top, left bottom,
from(#83b842), to(#629721));

font-size: 20px;

    background-image: -webkit-linear-gradient(top, #83b842, #629721);

color: #666;

    background-image: -moz-linear-gradient(top, #83b842, #629721);

line-height: 2;

    background-image: -ms-linear-gradient(top, #83b842, #629721);

margin: 20px 0;

    background-image: -o-linear-gradient(top, #83b842, #629721);

}

    background-image: linear-gradient(top, #83b842, #629721);

.about address {

}

font-style: normal;

28、@font-face模板

font-size: 20px;

@font-face {

color: #666;

    font-family: ‘MyWebFont’;

margin: 20px 0;

    src: url(‘webfont.eot’); /* IE9 Compat Modes */

line-height: 1.6;

    src: url(‘webfont.eot?#iefix’) format(’embedded-opentype’), /*
IE6-IE8 */

}

    url(‘webfont.woff’) format(‘woff’), /* Modern Browsers */

.list .more {

    url(‘webfont.ttf’)  format(‘truetype’), /* Safari, Android, iOS */

width: 200px;

    url(‘webfont.svg#svgFontName’) format(‘svg’); /* Legacy iOS */

height: 50px;

}

line-height: 50px;

body {

text-align: center;

    font-family: ‘MyWebFont’, Arial, sans-serif;

border: 1px solid #ccc;

}

border-radius: 10px;

29、缝合CSS3元素

font-size: 18px;

p {

margin: 0 auto;

    position:relative;

cursor: pointer;

    z-index:1;

background-color: #fafafa;

    padding: 10px;

}

    margin: 10px;

.scenery figure {

    font-size: 21px;

border: 1px solid #ddd;

    line-height: 1.3em;

display: block;

    color: #fff;

padding: 4px;

    background: #ff0030;

border-radius: 4px;

    -webkit-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px
rgba(10,10,0,.5);

width: 32.6%;

    -moz-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px
rgba(10,10,0,.5);

margin: 15px 5px 15px 0;

    box-shadow: 0 0 0 4px #ff0030, 2px 1px 6px 4px rgba(10,10,0,.5);

text-align: left;

    -webkit-border-radius: 3px;

float: left;

    -moz-border-radius: 3px;

}

    border-radius: 3px;

.scenery figcaption {

}

text-align: center;

p:before {

padding: 5px 0;

    content: “”;

font-size: 20px;

    position: absolute;

color: #666;

    z-index: -1;

}

    top: 3px;

.ticket {

    bottom: 3px;

color: #666;

    left :3px;

}

    right: 3px;

.ticket .type {

    border: 2px dashed #fff;

font-size: 20px;

}

margin: 20px 0 10px 0;

p a {

border: none;

    color: #fff;

}

    text-decoration:none;

.ticket .type mark {

}

color: #fff;

p a:hover, p a:focus, p a:active {

background-color: #458B00;

    text-decoration:underline;

padding: 5px 8px;

}

border-radius: 4px;

30、CSS3 斑马线

margin: 0 10px 0 16px;

tbody tr:nth-child(odd) {

}

    background-color: #ccc;

.ticket .form {

}

font-size: 20px;

31、有趣的&

border: none;

.amp {

}

    font-family: Baskerville, ‘Goudy Old Style’, Palatino, ‘Book
Antiqua’, serif;

.ticket .form p {

    font-style: italic;

line-height: 3;

    font-weight: normal;

}

}

.ticket .form input {

32、大字段落

width: 250px;

p:first-letter{

height: 30px;

    display: block;

border: 1px solid #ccc;

    margin: 5px 0 0 5px;

background-color: #fff;

    float: left;

border-radius: 4px;

    color: #ff3366;

padding: 5px;

    font-size: 5.4em;

font-size: 18px;

    font-family: Georgia, Times New Roman, serif;

color: #666;

}

margin: 0 0 0 16px;

33、内部CSS3 盒阴影

}

#mydiv {

.ticket .left {

-moz-box-shadow: inset 2px 0 4px #000;

width: 43%;

-webkit-box-shadow: inset 2px 0 4px #000;

display: inline-block;

box-shadow: inset 2px 0 4px #000;

}

}

.ticket .right {

34、外部CSS3 盒阴影

width: 43%;

#mydiv {

display: inline-block;

-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);

.ticket .button {

box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);

width: 9%;

}

display: inline-block;

35、三角形列表项目的志

}

ul {

.ticket .submit {

    margin: 0.75em 0;

display: inline-block;

    padding: 0 1em;

width: 90px;

    list-style: none;

height: 90px;

}

line-height: 90px;

li:before {

border-radius: 4px;

content: “”;

background-color: #f60;

border-color: transparent #111;

color: #fff;

border-style: solid;

font-size: 20px;

border-width: 0.35em 0 0.35em 0.45em;

text-align: center;

display: block;

border: none;

height: 0;

cursor: pointer;

width: 0;

position: relative;

left: -1em;

top: -28px;

top: 0.9em;

}

position: relative;

.ticket .new {

}

margin: 20px 0 0 0;

36、固定宽度的居中布局

font-size: 20px;

#page-wrap {

}

    width: 800px;

.ticket .new ul {

    margin: 0 auto;

margin: 20px 0 0 0;

}

}

37、CSS3 列文本

.ticket .new li {

#columns-3 {

display: inline-block;

    text-align: justify;

padding: 5px 10px;

    -moz-column-count: 3;

}

    -moz-column-gap: 12px;

.ticket .new li:first-child {

    -moz-column-rule: 1px solid #c4c8cc;

padding-left: 0;

    -webkit-column-count: 3;

}

    -webkit-column-gap: 12px;

.ticket .new li:nth-child(2) {

    -webkit-column-rule: 1px solid #c4c8cc;

background-color: #458B00;

}

border-radius: 4px;

38、CSS固定页脚

color: #fff;

#footer {

}

    position: fixed;

.ticket table {

    left: 0px;

width: 100%;

    bottom: 0px;

border-collapse:collapse;

    height: 30px;

margin: 20px 0 0 0;

    width: 100%;

border: 1px solid #ddd;

    background: #444;

}

}

.ticket table th {

/* IE 6 */

height: 50px;

* html #footer {

line-height: 50px;

    position: absolute;

border-bottom: 1px solid #ddd;

    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’);

font-weight: normal;

}

}

39、IE6的PNG透明修复

.ticket table td {

.bg {

height: 50px;

    width:200px;

line-height: 50px;

    height:100px;

text-align: center;

    background: url(/folder/yourimage.png) no-repeat;

border-bottom: 1px solid #ddd;

    _background:none;

}

   
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’/folder/yourimage.png’,sizingMethod=’crop’);

.ticket table tr:nth-child(2n) {

}

background-color: #fafafa;

/* 1px gif method */

}

img, .png {

.ticket table tr:hover {

    position: relative;

background-color: #eee;

    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’)”,

.ticket .price {

      this.src = “images/transparent.gif”):(this.origBg = this.origBg?
this.origBg
:this.currentStyle.backgroundImage.toString().replace(‘url(“‘,”).replace(‘”)’,”),

color: #f60;

      this.runtimeStyle.filter =
“progid:DXImageTransform.Microsoft.AlphaImageLoader(src='” + this.origBg

}

  • “‘, sizingMethod=’crop’)”,

.ticket .more2 {

      this.runtimeStyle.backgroundImage = “none”)),this.pngSet=true));

text-align: center;

}

font-size: 18px;

40、跨浏览器设置最小中度

margin: 0 auto;

#container {

cursor: pointer;

    min-height: 550px;

display: block;

    height: auto !important;

color: #666;

    height: 550px;

}

}

.ticket .reserve {

41、CSS3 鲜艳的输入

display: inline-block;

input[type=text], textarea {

width: 80px;

    -webkit-transition: all 0.30s ease-in-out;

height: 35px;

    -moz-transition: all 0.30s ease-in-out;

line-height: 35px;

    -ms-transition: all 0.30s ease-in-out;

border-radius: 4px;

    -o-transition: all 0.30s ease-in-out;

background-color: #f60;

    outline: none;

color: #fff;

    padding: 3px 0px 3px 3px;

font-size: 20px;

    margin: 5px 1px 3px 0px;

text-align: center;

    border: 1px solid #ddd;

}

}

.tour {

input[type=text]:focus, textarea:focus {

position: relative;

    box-shadow: 0 0 5px rgba(81, 203, 238, 1);

border: 1px solid #eee;

    padding: 3px 0px 3px 3px;

margin: 0 0 20px 0;

    margin: 5px 1px 3px 0px;

background-color: #fff;

    border: 1px solid rgba(81, 203, 238, 1);

overflow: hidden;

}

}

42、基于文件类型的链接样式

.tour:after{

/* external links */

content:”.”;

a[href^=”] {

height:0;

    padding-right: 13px;

visibility:hidden;

    background: url(‘external.gif’) no-repeat center right;

display:block;

}

clear:both;

/* emails */

}

a[href^=”mailto:”] {

.tour img {

    padding-right: 20px;

width: 45%;

    background: url(’email.png’) no-repeat center right;

float: left;

}

}

/* pdfs */

.tour figcaption {

a[href$=”.pdf”] {

width: 55%;

    padding-right: 18px;

float: right;

    background: url(‘acrobat.png’) no-repeat center right;

}

}

.tour hgroup {

43、强制换行

width: 300px;

pre {

}

    white-space: pre-wrap;      /* css-3 */

.tour h2 {

    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */

font-size: 24px;

    white-space: -pre-wrap;      /* Opera 4-6 */

font-weight: normal;

    white-space: -o-pre-wrap;    /* Opera 7 */

padding: 10px 0 10px 25px;

    word-wrap: break-word;      /* Internet Explorer 5.5+ */

color: #333;

}

border: none;

44、在可点击的档次上强制手型

}

a[href], input[type=’submit’], input[type=’image’], label[for],
select, button, .pointer {

.tour h3 {

    cursor: pointer;

font-size: 16px;

}

padding: 10px 0 10px 25px;

45、网页顶部盒阴影

line-height: 1.5;

body:before {

font-weight: normal;

    content: “”;

color: #666;

    position: fixed;

}

    top: -10px;

.tour ol {

    left: 0;

padding: 0 0 0 25px;

    width: 100%;

color: #666;

    height: 10px;

line-height: 2;

    -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);

}

    -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);

.tour mark {

    box-shadow: 0px 0px 10px rgba(0,0,0,.8);

padding: 0px 5px;

    z-index: 100;

border-radius: 4px;

}

color: #458B00;

46、CSS3对话气泡

border: 1px solid #458B00;

.chat-bubble {

background-color: #fff;

    background-color: #ededed;

}

    border: 2px solid #666;

.tour .buy {

    font-size: 35px;

position: absolute;

    line-height: 1.3em;

top: 55px;

    margin: 10px auto;

right: 30px;

    padding: 10px;

}

    position: relative;

.tour s {

    text-align: center;

font-size: 16px;

    width: 300px;

color: #999;

    -moz-border-radius: 20px;

}

    -webkit-border-radius: 20px;

.tour .price {

    -moz-box-shadow: 0 0 5px #888;

font-size: 20px;

    -webkit-box-shadow: 0 0 5px #888;

color: #f60;

    font-family: ‘Bangers’, arial, serif;

}

}

.tour strong {

.chat-bubble-arrow-border {

font-size: 36px;

border-color: #666 transparent transparent transparent;

}

border-style: solid;

.tour .reserve {

border-width: 20px;

margin: 10px 0 0 0;

height: 0;

}

width: 0;

.tour .reserve a {

position: absolute;

display: inline-block;

bottom: -42px;

width: 152px;

left: 30px;

height: 40px;

}

line-height: 40px;

.chat-bubble-arrow {

border-radius: 4px;

border-color: #ededed transparent transparent transparent;

background-color: #f60;

border-style: solid;

color: #fff;

border-width: 20px;

font-size: 20px;

height: 0;

text-align: center;

width: 0;

}

position: absolute;

.tour .type {

bottom: -39px;

width: 90px;

left: 30px;

height: 25px;

}

line-height: 25px;

47、H1-H5默许样式

text-align: center;

h1,h2,h3,h4,h5{

border-bottom-right-radius: 4px;

    color: #005a9c;

background-color: #59b200;

}

font-size: 14px;

h1{

color: #fff;

    font-size: 2.6em;

letter-spacing: 1px;

    line-height: 2.45em;

position: absolute;

}

top: 0;

h2{

left: 0;

    font-size: 2.1em;

}

    line-height: 1.9em;

.tour .disc {

}

width: 52px;

h3{

height: 52px;

    font-size: 1.8em;

background: url(../img/disc.png) no-repeat;

    line-height: 1.65em;

position: absolute;

}

top: 0;

h4{

right: 0;

    font-size: 1.65em;

}

    line-height: 1.4em;

.tour .disc span {

}

width: 52px;

h5{

height: 52px;

    font-size: 1.4em;

display: block;

    line-height: 1.25em;

font-size: 14px;

}

color: #ff7a4d;

48、纯CSS背景噪音

transform: rotate(45deg);

body {

text-indent: 7px;

    background-image:
url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAAG3RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR4XpWWB67c2BUFb3g557T/hRo9/WUMZHlgr4Bg8Z4qQgQJlHI4A8SzFVrapvmTF9O7dmYRFZ60YiBhJRCgh1FYhiLAmdvX0CzTOpNE77ME0Zty/nWWzchDtiqrmQDeuv3powQ5ta2eN0FY0InkqDD73lT9c9lEzwUNqgFHs9VQce3TVClFCQrSTfOiYkVJQBmpbq2L6iZavPnAPcoU0dSw0SUTqz/GtrGuXfbyyBniKykOWQWGqwwMA7QiYAxi+IlPdqo+hYHnUt5ZPfnsHJyNiDtnpJyayNBkF6cWoYGAMY92U2hXHF/C1M8uP/ZtYdiuj26UdAdQQSXQErwSOMzt/XWRWAz5GuSBIkwG1H3FabJ2OsUOUhGC6tK4EMtJO0ttC6IBD3kM0ve0tJwMdSfjZo+EEISaeTr9P3wYrGjXqyC1krcKdhMpxEnt5JetoulscpyzhXN5FRpuPHvbeQaKxFAEB6EN+cYN6xD7RYGpXpNndMmZgM5Dcs3YSNFDHUo2LGfZuukSWyUYirJAdYbF3MfqEKmjM+I2EfhA94iG3L7uKrR+GdWD73ydlIB+6hgref1QTlmgmbM3/LeX5GI1Ux1RWpgxpLuZ2+I+IjzZ8wqE4nilvQdkUdfhzI5QDWy+kw5Wgg2pGpeEVeCCA7b85BO3F9DzxB3cdqvBzWcmzbyMiqhzuYqtHRVG2y4x+KOlnyqla8AoWWpuBoYRxzXrfKuILl6SfiWCbjxoZJUaCBj1CjH7GIaDbc9kqBY3W/Rgjda1iqQcOJu2WW+76pZC9QG7M00dffe9hNnseupFL53r8F7YHSwJWUKP2q+k7RdsxyOB11n0xtOvnW4irMMFNV4H0uqwS5ExsmP9AxbDTc9JwgneAT5vTiUSm1E7BSflSt3bfa1tv8Di3R8n3Af7MNWzs49hmauE2wP+ttrq+AsWpFG2awvsuOqbipWHgtuvuaAE+A1Z/7gC9hesnr+7wqCwG8c5yAg3AL1fm8T9AZtp/bbJGwl1pNrE7RuOX7PeMRUERVaPpEs+yqeoSmuOlokqw49pgomjLeh7icHNlG19yjs6XXOMedYm5xH2YxpV2tc0Ro2jJfxC50ApuxGob7lMsxfTbeUv07TyYxpeLucEH1gNd4IKH2LAg5TdVhlCafZvpskfncCfx8pOhJzd76bJWeYFnFciwcYfubRc12Ip/ppIhA1/mSZ/RxjFDrJC5xifFjJpY2Xl5zXdguFqYyTR1zSp1Y9p+tktDYYSNflcxI0iyO4TPBdlRcpeqjK/piF5bklq77VSEaA+z8qmJTFzIWiitbnzR794USKBUaT0NTEsVjZqLaFVqJoPN9ODG70IPbfBHKK+/q/AWR0tJzYHRULOa4MP+W/HfGadZUbfw177G7j/OGbIs8TahLyynl4X4RinF793Oz+BU0saXtUHrVBFT/DnA3ctNPoGbs4hRIjTok8i+algT1lTHi4SxFvONKNrgQFAq2/gFnWMXgwffgYMJpiKYkmW3tTg3ZQ9Jq+f8XN+A5eeUKHWvJWJ2sgJ1Sop+wwhqFVijqWaJhwtD8MNlSBeWNNWTa5Z5kPZw5+LbVT99wqTdx29lMUH4OIG/D86ruKEauBjvH5xy6um/Sfj7ei6UUVk4AIl3MyD4MSSTOFgSwsH/QJWaQ5as7ZcmgBZkzjjU1UrQ74ci1gWBCSGHtuV1H2mhSnO3Wp/3fEV5a+4wz//6qy8JxjZsmxxy5+4w9CDNJY09T072iKG0EnOS0arEYgXqYnXcYHwjTtUNAcMelOd4xpkoqiTYICWFq0JSiPfPDQdnt+4/wuqcXY47QILbgAAAABJRU5ErkJggg==);

padding: 5px 0 0 0;

    background-color: #0094d0;

}

}

.tour footer {

49、持久的列表排序

width: 55%;

ol.chapters {

height: 35px;

    list-style: none;

line-height: 35px;

    margin-left: 0;

text-indent: 25px;

}

color: #666;

ol.chapters > li:before {

position: absolute;

    content: counter(chapter) “. “;

bottom: 0;

    counter-increment: chapter;

background-color: #fafafa;

    font-weight: bold;

letter-spacing: 1px;

    float: left;

}

    width: 40px;

.tour time {

}

color: #458B00;

ol.chapters li {

}

    clear: left;

#footer {

}

background-color: #222;

ol.start {

clear:both;

    counter-reset: chapter;

position: relative;

}

top: 20px;

ol.continue {

}

    counter-reset: chapter 11;

#footer .top {

}

max-width: 1263px;

50、CSS悬浮提示文本

height: 280px;

a {

margin: 0 auto;

border-bottom:1px solid #bbb;

text-align: center;

color:#666;

}

display:inline-block;

#footer .version {

position:relative;

color: #777;

text-decoration:none;

text-align: center;

}

padding: 10px 0;

a:hover,

}

a:focus {

#footer .block {

color:#36c;

width: 33.33%;

}

height: 320px;

a:active {

display: inline-block;

top:1px;

color: #ccc;

}

text-align: left;

/* Tooltip styling */

vertical-align: top;

a[data-tooltip]:after {

display: block;

border-top: 8px solid #222;

float: left;

border-top: 8px solid hsla(0,0%,0%,.85);

}

border-left: 8px solid transparent;

#footer .bottom {

border-right: 8px solid transparent;

padding: 15px 0;

content: “”;

text-align: center;

display: none;

color: #777;

height: 0;

background-color: #000;

width: 0;

border-top: 1px solid #444;

left: 25%;

}

position: absolute;

#footer h2 {

}

font-weight: normal;

a[data-tooltip]:before {

padding: 20px 0 0 20px;

background: #222;

font-size: 24px;

background: hsla(0,0%,0%,.85);

}

color: #f6f6f6;

#footer hr {

content: attr(data-tooltip);

width: 90%;

display: none;

border: 1px dashed #333;

font-family: sans-serif;

}

font-size: 14px;

#footer ul {

height: 32px;

color: #666;

left: 0;

font-size: 18px;

line-height: 32px;

text-indent: 20px;

padding: 0 15px;

line-height: 2;

position: absolute;

}

text-shadow: 0 1px 1px hsla(0,0%,0%,1);

/*传媒询问,参考部分Bootstrap 框架*/

white-space: nowrap;

/*当页面大于1200px 时,大显示器,重要是PC 端*/

-webkit-border-radius: 5px;

@media (min-width: 1200px) {

-moz-border-radius: 5px;

}

-o-border-radius: 5px;

/*在992 和1199 像素之间的显示屏里,中等显示屏,分辨率低的PC*/

border-radius: 5px;

@media (min-width: 992px) and (max-width: 1199px) {

}

#adver .center {

a[data-tooltip]:hover:after {

width: 50%;

display: block;

margin: -10px 0 0 -25%;

top: -9px;

}

}

#tour .center h2 {

a[data-tooltip]:hover:before {

font-size: 40px;

display: block;

}

top: -41px;

#headline hgroup {

}

left: 8%;

a[data-tooltip]:active:after {

}

top: -10px;

#headline h2 {

}

font-size: 36px;

a[data-tooltip]:active:before {

}

top: -42px;

#headline h3 {

}

font-size: 20px;

51、深藏黑色的圈子按钮

}

.graybtn {

.sidebar {

    -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;

display: none;

    -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;

}

    box-shadow:inset 0px 1px 0px 0px #ffffff;

.list {

    background:-webkit-gradient( linear, left top, left bottom,
color-stop(0.05, #ffffff), color-stop(1, #d1d1d1) );

width: 100%;

    background:-moz-linear-gradient( center top, #ffffff 5%, #d1d1d1
100% );

padding: 0 20px

   
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’#ffffff’,
endColorstr=’#d1d1d1′);

}

    background-color:#ffffff;

}

    -moz-border-radius:6px;

/*在768 和991 像素之间的屏幕里,小屏幕,紧假如PAD*/

    -webkit-border-radius:6px;

@media (min-width: 768px) and (max-width: 991px) {

    border-radius:6px;

#adver .center {

    border:1px solid #dcdcdc;

width: 60%;

    display:inline-block;

margin: -10px 0 0 -30%;

    color:#777777;

}

    font-family:arial;

#adver .search, #adver .button {

    font-size:15px;

font-size: 20px;

    font-weight:bold;

}

    padding:6px 24px;

#tour .center h2 {

    text-decoration:none;

font-size: 35px;

    text-shadow:1px 1px 0px #ffffff;

}

}

#headline hgroup {

.graybtn:hover {

left: 8%;

    background:-webkit-gradient( linear, left top, left bottom,
color-stop(0.05, #d1d1d1), color-stop(1, #ffffff) );

}

    background:-moz-linear-gradient( center top, #d1d1d1 5%, #ffffff
100% );

#headline h2 {

   
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’#d1d1d1′,
endColorstr=’#ffffff’);

font-size: 30px;

    background-color:#d1d1d1;

}

}

#headline h3 {

.graybtn:active {

font-size: 16px;

    position:relative;

}

    top:1px;

.sidebar {

}

display: none;

52、在可打印的网页中展现URLs

}

@media print  {

.list {

a:after {

width: 100%;

content: ” [” attr(href) “] “;

padding: 0 20px

}

}

}

.list h2 {

53、禁用移动Webkit的选用高亮

font-size: 28px;

body {

}

    -webkit-touch-callout: none;

.about p,.about address {

    -webkit-user-select: none;

font-size: 18px;

    -khtml-user-select: none;

}

    -moz-user-select: none;

.ticket .left, .ticket .right, .ticket .button {

    -ms-user-select: none;

width: 98%;

    user-select: none;

display: block;

}

}

54、CSS3 圆点图案

.ticket .form input {

body {

width: 98%;

    background: radial-gradient(circle, white 10%, transparent 10%),

height: 35px;

    radial-gradient(circle, white 10%, black 10%) 50px 50px;

margin: 0;

    background-size: 100px 100px;

}

}

.ticket .form p {

55、CSS3 方格图案

line-height: 2;

body {

}

    background-color: white;

.ticket .submit {

    background-image: linear-gradient(45deg, black 25%, transparent 25%,
transparent 75%, black 75%, black),

display: block;

linear-gradient(45deg, black 25%, transparent 25%, transparent 75%,
black 75%, black);

width: 30%;

background-size: 100px 100px;

height: auto;

background-position: 0 0, 50px 50px;

line-height: 2;

}

position: static;

56、Github的fork色带

margin:10px auto;

.ribbon {

}

    background-color: #a00;

.md-hidden {

    overflow: hidden;

display: none;

    /* top left corner */

}

    position: absolute;

.tour h2 {

    left: -3em;

font-size: 22px;

    top: 2.5em;

}

    /* 45 deg ccw rotation */

.tour .buy {

    -moz-transform: rotate(-45deg);

position: absolute;

    -webkit-transform: rotate(-45deg);

top: auto;

    /* shadow */

right: auto;

    -moz-box-shadow: 0 0 1em #888;

bottom: 0;

    -webkit-box-shadow: 0 0 1em #888;

padding: 0 0 0 25px;

}

}

.ribbon a {

}

    border: 1px solid #faa;

/*在480 和767 像素之间的显示器里,超小显示屏,首假如手机*/

    color: #fff;

@media (min-width: 480px) and (max-width: 767px) {

    display: block;

#header, #header .center, #header .link {

    font: bold 81.25% ‘Helvetiva Neue’, Helvetica, Arial, sans-serif;

height: 45px;

    margin: 0.05em 0 0.075em 0;

}

    padding: 0.5em 3.5em;

#header .logo, .sm-hidden,.sidebar,.md-hidden {

    text-align: center;

display: none;

    text-decoration: none;

}

    /* shadow */

#header .link {

    text-shadow: 0 0 0.5em #444;

width: 100%;

}

line-height: 45px;

57、CSS font属性缩写

}

p {

#adver {

  font: italic small-caps bold 1.2em/1.0em Arial, Tahoma, Helvetica;

padding: 45px 0 0 0;

}

}

58、散文页面的卷曲效果

#adver .center {

ul.box {

width: 70%;

    position: relative;

height: 53px;

    z-index: 1; /* prevent shadows falling behind containers with
backgrounds */

margin: -10px 0 0 -35%;

    overflow: hidden;

}

    list-style: none;

#adver .search, #adver .button {

    margin: 0;

height: 45px;

    padding: 0;

font-size: 18px;

}

}

ul.box li {

.sm-visible {

position: relative;

display: block;

float: left;

}

width: 250px;

#tour .center h2 {

height: 150px;

font-size: 30px;

padding: 0;

}

border: 1px solid #efefef;

#tour .center p {

margin: 0 30px 30px 0;

font-size: 15px;

background: #fff;

}

-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0,
0, 0.06) inset;

#tour figure {

-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0,
0.06) inset;

width: 49.2%;

box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06)
inset;

}

}

#headline {

ul.box li:before,

padding: 45px 0 0 0;

ul.box li:after {

}

content: ”;

#headline hgroup {

z-index: -1;

left: 8%;

position: absolute;

}

left: 10px;

#headline h2 {

bottom: 10px;

font-size: 26px;

width: 70%;

}

max-width: 300px; /* avoid rotation causing ugly appearance at large
container widths */

#headline h3 {

max-height: 100px;

font-size: 14px;

height: 55%;

}

-webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);

.list {

-moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);

width: 100%;

box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);

padding: 0 20px

-webkit-transform: skew(-15deg) rotate(-6deg);

}

-moz-transform: skew(-15deg) rotate(-6deg);

.list h2 {

-ms-transform: skew(-15deg) rotate(-6deg);

font-size: 25px;

-o-transform: skew(-15deg) rotate(-6deg);

}

transform: skew(-15deg) rotate(-6deg);

.about p,.about address {

}

font-size: 15px;

ul.box li:after {

}

left: auto;

.scenery figure {

right: 10px;

width: 48.2%;

-webkit-transform: skew(15deg) rotate(6deg);

}

-moz-transform: skew(15deg) rotate(6deg);

.scenery figcaption {

-ms-transform: skew(15deg) rotate(6deg);

font-size: 18px;

-o-transform: skew(15deg) rotate(6deg);

}

transform: skew(15deg) rotate(6deg);

.ticket .left, .ticket .right, .ticket .button {

}

width: 98%;

59、鲜艳的锚链接

display: block;

a {

}

    color: #00e;

亚洲必赢官网,.ticket .form input {

}

width: 98%;

a:visited {

height: 35px;

    color: #551a8b;

margin: 0;

}

}

a:hover {

.ticket .form p {

    color: #06e;

line-height: 2;

}

}

a:focus {

.ticket .submit {

    outline: thin dotted;

display: block;

}

width: 30%;

a:hover, a:active {

height: auto;

    outline: 0;

line-height: 2;

}

position: static;

a, a:visited, a:active {

margin:10px auto;

    text-decoration: none;

}

    color: #fff;

.ticket .type, .ticket .form, .ticket .new, .ticket .form input, .ticket
.submit, .ticket .reserve {

    -webkit-transition: all .3s ease-in-out;

font-size: 16px;

}

}

a:hover, .glow {

.tour h2 {

    color: #ff0;

font-size: 16px;

    text-shadow: 0 0 10px #ff0;

height: 20px;

}

padding: 5px 0 10px 15px;

60、带CSS3特色的横幅突显

}

.featureBanner {

.tour h3 {

    position: relative;

font-size: 14px;

    margin: 20px

padding: 5px 0 5px 15px;

}

}

.featureBanner:before {

.tour .buy {

    content: “Featured”;

position: absolute;

    position: absolute;

top: auto;

    top: 5px;

right: auto;

    left: -8px;

bottom: 0;

    padding-right: 10px;

padding: 0 0 0 15px;

    color: #232323;

}

    font-weight: bold;

.tour .buy strong {

    height: 0px;

font-size: 18px;

    border: 15px solid #ffa200;

}

    border-right-color: transparent;

}

    line-height: 0px;

/*在低于480 像素的显示屏,微小显示器,更低分辨率的手机*/

    box-shadow: -0px 5px 5px -5px #000;

@media (max-width: 479px) {

    z-index: 1;

#header, #header .center, #header .link {

}

height: 45px;

.featureBanner:after {

}

    content: “”;

#header .logo, .xs-hidden, .sm-hidden, .sidebar, .md-hidden  {

    position: absolute;

display: none;

    top: 35px;

}

    left: -8px;

#header .link {

    border: 4px solid #89540c;

width: 100%;

    border-left-color: transparent;

line-height: 45px;

    border-bottom-color: transparent;

}

}

#header .link li {

 

width: 25%;

   

}

#adver {

padding: 45px 0 0 0;

}

#adver .center {

width: 80%;

height: 48px;

margin: -10px 0 0 -40%;

}

#adver .search, #adver .button {

height: 40px;

font-size: 16px;

}

.sm-visible {

display: block;

}

#footer .bottom, #footer .version {

font-size: 13px;

}

#tour .center h2 {

font-size: 26px;

}

#tour .center p {

font-size: 14px;

}

#tour figure {

width: 99%;

}

#headline hgroup {

left: 8%;

}

#headline h2 {

font-size: 20px;

}

#headline h3 {

font-size: 12px;

}

#headline {

padding: 45px 0 0 0;

}

.list {

width: 100%;

padding: 0 20px

}

.list h2 {

font-size: 20px;

}

.about p,.about address {

font-size: 14px;

}

.scenery figure {

width: 99%;

}

.scenery figcaption {

font-size: 16px;

}

.ticket .left, .ticket .right, .ticket .button {

width: 98%;

display: block;

}

.ticket .form input {

width: 98%;

height: 35px;

margin: 0;

}

.ticket .form p {

line-height: 2;

}

.ticket .submit {

display: block;

width: 30%;

height: auto;

line-height: 2;

position: static;

margin:10px auto;

}

.ticket .type, .ticket .form, .ticket .new, .ticket .form input, .ticket
.submit, .ticket .reserve {

font-size: 14px;

}

.ticket .reserve {

display: inline-block;

width: auto;

height: auto;

line-height: 1;

border-radius: 4px;

background-color: #f60;

color: #fff;

padding: 8px;

text-align: center;

}

.tour h2 {

font-size: 16px;

height: 15px;

padding: 5px 0 5px 15px;

line-height: 15px;

}

.tour h3 {

font-size: 14px;

padding: 5px 0 5px 15px;

height: 15px;

overflow: hidden;

}

.tour .buy {

position: absolute;

top: auto;

right: auto;

bottom: 0;

padding: 0 0 0 15px;

}

.tour .buy strong,.tour .buy .price s, .tour .buy .price {

font-size: 15px;

}

}>

瓢城旅行社

网站导航

首页

骑行新闻

机票预约

景点欣赏

关于公司

搜索

热点旅游

境内旅游、国外旅游、自助旅游、自驾旅游、油轮签证、主旨骑行等各类新型热门旅游推介

<曼谷-芭提雅6日游>包团特惠,超丰盛景点,升级1晚国五,无自费,更捐赠600元/成人自费券

满意度 77%¥2864

国内长线

<塞班岛双鱼岛Olhuveli4晚6日自助游>上海出发,机+酒
包罗:早晚餐+快艇

满意度 97%¥8039

出境长线

<福建双飞5日游>含西宁接送,全程挂牌四星饭店,一价全含,零自费“自费项目”免费送

满意度 90%¥2709

自助旅游

<富山-大阪-东京8日游>暑期亲子,2天随便,无导游安排自费项目,全程不强求购物

满意度 97%¥9499

自助旅游

<法瑞意德12日游>4至5星,金色列车,少女峰,部分THE MALL

满意度 97%¥9199

境内短线

<兰卡威6日半自助游>蓝梦出海,独栋别墅,悦榕庄晚上茶,纯玩

满意度 95%¥6488

出国长线

<马尔代夫香港9日自助游>一游两国,4晚仙本这,2晚东京,香江EK往返

满意度 100%¥9669

游轮观光

<花样堂姐土耳其9日或10日游>摩天立减3000!中餐六菜一汤+土耳其(Turkey)地面美食满足你挑剔味蕾

满意度 93%¥9999

出境长线

<圣Peter堡-京都-箱根双飞6日游>唐山直飞,不走回头路,境外无自费,超值之旅

满意度 100%¥5284

境内短线

合营伙伴

途牛旅游网

驴阿姨旅游网

携程旅游

中华青春旅行社

旅游FAQ

旅游合同订立情势?

儿童价是依照什么制定的?

国旅的路线性能怎么界定的?

单房差是如何?

出行保证有那一个种类?

联系方式

微博:weibo.com/ycku

邮件:ycku@ycku.com

地点:山东临沂无名路123号

客户端 | 触屏版 | 电脑版

Copyright © YCKU 瓢城旅行社 | 苏ICP备120110119号|
旅行社高管许可证:L-YC-BK12345

网站地图xml地图