理解伪元素,手把手教你用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; 5B8B4F53, 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; 5B8B4F53, 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; 5B8B4F53, 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; 5B8B4F53, 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; 5B8B4F53, 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; } /*第四部分:文章内容常用标签格式*/ /*文章内部常用标签格式*/ .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, "5B8B4F53", 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!中餐六菜一汤 土耳其当地美食满足您挑剔味蕾

满意度 93%¥9999

出境长线

<大阪-京都-箱根双飞6日游>盐城直飞,不走回头路,境外无自费,超值之旅

满意度 100%¥5284

国内短线

合作伙伴

途牛旅游网

驴妈妈旅游网

携程旅游

中国青年旅行社

旅游FAQ

旅游合同签订方式?

儿童价是基于什么制定的?

旅游的线路品质怎么界定的?

单房差是什么?

旅游保险有那些种类?

联系方式

微博:weibo.com/ycku

邮件:ycku@ycku.com

地址:江苏盐城无名路123号

客户端 | 触屏版 | 电脑版

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

本文由星彩网app下载发布于前端技术,转载请注明出处:理解伪元素,手把手教你用JS给博客动态增加目录

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。