emlog教程之在文章页实现判断百度是否收录你的文章

首先在这里感谢四少爷的blog的开发制作成插件，在这里我是将插件里面的一些东西移植到了主题module文件里面，这样就不用开启插件就可以使用了。这方便提交,查看,利于SEO.

首先将以下代码存放在module文件中：

<pre style="overflow:auto" ;class="prettyprint lang-php linenums"><?php
//判断内容页是否百度收录
function baidu($url){
$url='http://www.baidu.com/s?wd='.$url;
$curl=curl_init();
curl_setopt($curl,CURLOPT_URL,$url);
curl_setopt($curl,CURLOPT_RETURNTRANSFER,1);
$rs=curl_exec($curl);
curl_close($curl);
if(!strpos($rs,'没有找到')){
return 1;
}
else{
return 0;
}
}
function checkbaidu($id){
$url=Url::log($id);
if(baidu($url)==1){
echo "百度已收录";
} else {
echo "<a style=\"color:red;\" rel=\"external nofollow\"
title=\"点击提交收录！\" target=\"_blank\"
href=\"http://zhanzhang.baidu.com/sitesubmit/index?sitename=$url\"&gt;百度未收录&lt;/a&gt;";
}
}
?>
  然后再将以下代码:

<pre style="overflow:auto" ;class="prettyprint lang-php linenums"><?php echo checkbaidu($logid); ?>

放入你的echo_log.php文件中的合适位置即可使用.效果如下:

这是未收录的,

这是收录的.

 未收录的提示你收录,附带链接,方便提交,方便SEO.

注:参考独狼博客,原文链接:http://www.xlonewolf.net/work/282.html

这里总结了一些国外一些文章以及我的个人经验总结出来，我想对写CSS的前端用户来说是值得学习的。

CSS书写顺序

1. 位置属性(position, top, right, z-index, display, float等)
2. 大小(width, height, padding, margin)
3. 文字系列(font, line-height, letter-spacing, color- text-align等)
4. 背景(background, border等)
5. 其他(animation, transition等)

CSS书写规范

使用CSS缩写属性

CSS有些属性是可以缩写的，比如padding,margin,font等等，这样精简代码同时又能提高用户的阅读体验。

去掉小数点前的“0”

简写命名

很多用户都喜欢简写类名，但前提是要让人看懂你的命名才能简写哦！

16进制颜色代码缩写

有些颜色代码是可以缩写的，我们就尽量缩写吧，提高用户体验为主。

连字符CSS选择器命名规范

1. 长名称或词组可以使用中横线来为选择器命名。
2. 不建议使用“_”下划线来命名CSS选择器，为什么呢？
   • 输入的时候少按一个shift键；
   • 浏览器兼容问题 （比如使用_tips的选择器命名，在IE6是无效的）
   • 能良好区分JavaScript变量命名（JS变量命名是用“_”）

   • 这里有一篇破折号与下划线的详细讨论，英文：：点击查看 中文篇：点击查看

     

     不要随意使用Id

     id在JS是唯一的，不能多次使用，而使用class类选择器却可以重复使用，另外id的优先级优先与class，所以id应该按需使用，而不能滥用。

     

     为选择器添加状态前缀

     有时候可以给选择器添加一个表示状态的前缀，让语义更明了，比如下图是添加了“.is-”前缀。

     

     CSS命名规范（规则）

     常用的CSS命名规则

     • 头：header
     • 内容：content/container
     • 尾：footer
     • 导航：nav
     • 侧栏：sidebar
     • 栏目：column
     • 页面外围控制整体佈局宽度：wrapper
     • 左右中：left right center
     • 登录条：loginbar
     • 标志：logo
     • 广告：banner
     • 页面主体：main
     • 热点：hot
     • 新闻：news
     • 下载：download
     • 子导航：subnav
     • 菜单：menu
     • 子菜单：submenu
     • 搜索：search
     • 友情链接：friendlink
     • 页脚：footer
     • 版权：copyright
     • 滚动：scroll
     • 内容：content
     • 标签：tags
     • 文章列表：list
     • 提示信息：msg
     • 小技巧：tips
     • 栏目标题：title
     • 加入：joinus
     • 指南：guide
     • 服务：service
     • 注册：regsiter
     • 状态：status
     • 投票：vote
     • 合作伙伴：partner

     注释的写法:

     /* Header */ 内容区 /* End Header */

     Id的命名:

     1)页面结构

     • 容器: container
     • 页头：header
     • 内容：content/container
     • 页面主体：main
     • 页尾：footer
     • 导航：nav
     • 侧栏：sidebar
     • 栏目：column
     • 页面外围控制整体佈局宽度：wrapper
     • 左右中：left right center

     (2)导航

     • 导航：nav
     • 主导航：mainnav
     • 子导航：subnav
     • 顶导航：topnav
     • 边导航：sidebar
     • 左导航：leftsidebar
     • 右导航：rightsidebar
     • 菜单：menu
     • 子菜单：submenu
     • 标题: title
     • 摘要: summary

     (3)功能

     • 标志：logo
     • 广告：banner
     • 登陆：login
     • 登录条：loginbar
     • 注册：register
     • 搜索：search
     • 功能区：shop
     • 标题：title
     • 加入：joinus
     • 状态：status
     • 按钮：btn
     • 滚动：scroll
     • 标籤页：tab
     • 文章列表：list
     • 提示信息：msg
     • 当前的: current
     • 小技巧：tips
     • 图标: icon
     • 注释：note
     • 指南：guild
     • 服务：service
     • 热点：hot
     • 新闻：news
     • 下载：download
     • 投票：vote
     • 合作伙伴：partner
     • 友情链接：link
     • 版权：copyright

     注意事项::

     • 1.一律小写;
     • 2.尽量用英文;
     • 3.不加中槓和下划线;
     • 4.尽量不缩写，除非一看就明白的单词。

     CSS样式表文件命名

     • 主要的 master.css
     • 模块 module.css
     • 基本共用 base.css
     • 布局、版面 layout.css
     • 主题 themes.css
     • 专栏 columns.css
     • 文字 font.css
     • 表单 forms.css
     • 补丁 mend.css
     • 打印 print.css

     
     

我们使用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手册.

什么是XAMPP？

XAMPP是最流行的PHP开发环境

XAMPP是完全免费且易于安装的Apache发行版，其中包含MySQL、PHP和Perl。XAMPP开放源码包的设置让安装和使用出奇容易。

同时也是跨平台的,支持Windows,apple OS ,Linux三大平台.

v5.5.24/ v5.6.8 升级说明

更新PHP至5.5.24/5.6.8
最新的MySQL5.6.24到
更新的phpMyAdmin4.4.3
更新的OpenSSL到1.0.1m（OS X和Linux）
更新XAMPP欢迎页面（测试版）
修复字符集管理页面
新增OS X操作指南
PostgreSQL的PHP扩展启用SSL支持
新增PHP XMLRPC扩展
新增PHP扩展MSSQL

官方下载址:https://www.apachefriends.org/zh_cn/download.html

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

![](

一：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