轱辘狂魔,实用的六十个CSS代码片段

清楚伪成分 :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),我们将从基础入手,来讨论这些极度的核心。

一,垂直对齐

    提取密码e8pe

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

关于语法和浏览器资助

伪成分实际上在CSS1中就存在了,可是大家前天所切磋的:before和:after则宣布于CSS2.1中。在中期,伪成分的语法是利用“:”(3个冒号),随着web的前进,在CSS3中修订后的伪元素使用“::”(多个冒号),相当于::before
和 ::after—以界别伪成分和伪类(比如:hover,:active等)

美高梅开户网址 2

然而,无论你拔取单冒号如故双冒号,浏览器都将能鉴别它们。由于IE九只协助单冒号的格式,安全起见若是你想要更常见的浏览器包容性那么还是利用单冒号的格式吧!

一旦你用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

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

率先在博客内容第1行点击鼠标右键,然后选用检查。那时会弹出左边的框,直接固定到自小编的h1标签,就那样不难的找到了它的父级 cnblogs_post_body

下一场使用 jquery 采用器
来得到到这一个h1,对jquery拔取器不熟的直接跳那么些链接温习一下:

$('#cnblogs_post_body h1')

就像此不难的1个括号就成功了对 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>');

那句不难解释就是在博客内容最末尾插入了1个 div,里面包蕴ul和2个暗中同意的li
用于折叠目录。

接下去就要提取h1的情节了,但在那么些进度中大家还要做一件事,就是电动给h1增添一个id,作为1个正式的懒人,作者自然连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将会在情节前面“添加”3个成分而:after将会在内容后“添加”2个因素。在它们之中添加内容大家得以应用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; } #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; }
/*第4部分:小说内容常用标签格式*/ /*文章内部常用竹签格式*/
.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
来绘制1个让人吃惊的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

二,伸展二个成分到窗口中度

}

在切实意况中,你或者想要将三个因素伸展到窗口中度,基本因素的调整只可以调整容器的轻重缓急,由此要使3个成分伸展到窗口中度,

img {

小编们须求展开顶层元素:html和body:

display: block;

html,

max-width: 100%;

body {

}

height: 100%;

ul,ol {

}

list-style: outside none none;

然后将百分百运用到其余因素的高

}

div {

a {

    height: 100%;

text-decoration: none;

}

}

三,基于文件格式使用差其余体制

.none {

为了更便于驾驭链接的对象,有时你想让部分链接看起来和其它的两样。上边的一部分在文本链接前添加贰个图标,对不一样的财富使用不一致的图标或图表:

display: none;

a[href^=”

}

    padding-right: 20px;

.sm-visible {

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

display: none;

}

轱辘狂魔,实用的六十个CSS代码片段。}

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

肆,创造跨浏览器的图像灰度

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;

五,背景渐变动画

margin: 0 auto;

CSS中最具诱惑的1个效应是能添加动画成效,除了渐变,你可以给背景观、反射率、成分大小添加动画。方今,你不大概为渐变添加卡通片,但上面的代码大概有救助。它通过改变背景地点,让它看起来有动画效果。

}

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;

陆,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;

捌,包裹长文本

}

比方你遇见2个比作者容器长的文书,这一个技术对你很有用。在这些示例中,默许时,不管容器的宽度,文本都将水平填充。

#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%;

玖,创立模糊文本

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;

十,用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;

1一,样式重置

}

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;

1二,典型的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;

1三,新版清除浮动(二零一三)

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;

1四,跨浏览器的晶莹

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 {

1五,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;

1六,本性圆角

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;

1捌,现代字体栈

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;

1九,自定义文本选取

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 {

2四,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;

2六,强制出现垂直滚动条

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 {

3二,大字段落

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;

3五,三角形列表项目的志

}

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;

3六,固定宽度的居中布局

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;

3八,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 {

4一,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;

}

}

4二,基于文件类型的链接样式

.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 {

4三,强制换行

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;

4七,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 {

4九,持久的列表排序

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、在可打印的网页中显示U君越Ls

}

@media print  {

.list {

a:after {

width: 100%;

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

padding: 0 20px

}

}

}

.list h2 {

5三,禁用移动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;

}

}

5四,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;

5七,CSS font属性缩写

}

p {

#adver {

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

padding: 45px 0 0 0;

}

}

5八,诗歌页面的卷曲效果

#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晚三十一日自助游>新加坡出发,机+酒
包罗:早晚餐+游艇

满意度 97%¥8039

出国长线

<新疆双飞五日游>含宜春接送,全程挂牌四星商旅,一价全含,零自费“自费项目”免费送

满意度 90%¥2709

自助旅游

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

满意度 97%¥9499

自助旅游

<法瑞意德5日游>4至5星,深草绿列车,少女峰,部分THE MALL

满意度 97%¥9199

国内短线

<阿萨蒂格岛六日半自助游>蓝梦出海,独栋别墅,悦榕庄早晨茶,纯玩

满意度 95%¥6488

出境长线

<夏威夷上海二十五日自助游>一游两国,4晚苏梅岛,2晚上海,香岛EK来回

满意度 100%¥9669

木造船观光

<花样堂妹土耳其(Turkey)6日或十一日游>最高立减3000!中餐六菜一汤+土耳其共和国(Türkiye Cumhuriyeti)当地美食满意你挑剔味蕾

满意度 93%¥9999

出国长线

<阿塞拜疆巴库-京都-箱根双飞十八日游>南阳直飞,不走回头路,境外无自费,超值之旅

满意度 100%¥5284

国内短线

协作伙伴

途牛旅游网

驴岳母旅游网

携程出境游

中华青年旅行社

旅游FAQ

游览合同签订形式?

孩童价是按照什么制定的?

漫游的路线质量怎么界定的?

单房差是怎么?

游览保障有那多少个种类?

联系格局

微博:weibo.com/ycku

邮件:ycku@ycku.com

地点:西藏赣州无名路123号

客户端 | 触屏版 | 电脑版

Copyright © YCKU 瓢城旅行社 | 苏ICP备1二零一二0119号|
旅行社经营执照:L-YC-BK12345

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图