利用css3的属性来控制网页中被选中的文字颜色和背景色 代码人生

浏览器中默认的选中的文字颜色为白色,背景色为蓝色。并且在火狐和google两个不同的内核浏览器下效果也不一样,google浏览器的两段文字之间的空格也会添加上背景色,火狐的就不会,效果如下:

000112-2015-12-06.jpg

图一 是google浏览器下的效果截图

000113-2015-12-06.jpg

图二 是火狐浏览器下的效果截图

下面两图就是修改后的效果:

000114-2015-12-06.jpg

图一 是火狐浏览器下的效果

000115-2015-12-06.jpg

图二 是google浏览器下的效果

下面就来说说如何利用css3的属性来控制网页中被选中的文字颜色和背景色:

通过查阅资料得知,设置[code]body ::selection[/code]的css属性可以控制,我博客的效果设置代码如下:

[code] body ::selection {
    color:#12C141;
    background-color:#060606;
    text-shadow:none;
}
body ::-moz-selection {
    color:#12C141;
    background-color:#060606;
    text-shadow:none;
}
 [/code]

其中的颜色和背景色可以更具自己的喜好来设置。


关于代码的几点说明:

(1)注意这里是两个冒号,不同于一般伪类的单冒号,此属性应用的css3属性;

(2)由于本站文字采用了[code]text-shadow:none;[/code]属性,而在文字选中后阴影会导致文字模糊,所以这里将阴影去掉,如果你的博客没有使用可以不用添加

(3)ie6,7,8版本不支持此属性,ie9,10未测试;

经过测试,我的总结:

(1)IE9是支持此通过css定制选中文字的背景色的;IE7/IE8/IE9兼容性视图,都是不支持此效果的;

(2)关于选中的效果:IE9和FireFox都是存在行间距,而Chrome为整块选中状态,无行间距;

(3)上述背景色设置,使用[code]background-color[/code]或[code]background[/code],都是有效的



admin 发布于  2015-12-6 15:40 

css样式设置小技巧汇总 PHP

水平居中设置-行内元素


如果被设置元素为文本图片行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的。如下代码:

html代码:

<body>
  <div class="txtCenter">我是文本,哈哈,我想要在父容器中水平居中显示。</div>
</body>

css代码:

<style>
  div.txtCenter{ text-align:center; }
</style>

水平居中设置-定宽块状元素

当被设置元素为块状元素时用 text-align:center 就不起作用了,这时也分两种情况:定宽块状元素和不定宽块状元素。这一小节我们先来讲一讲定宽块状元素。

满足定宽块状两个条件的元素是可以通过设置左右margin”值为“auto”来实现居中的。我们来看个例子就是设置 div 这个块状元素水平居中:

html代码:

<body>
  <div>我是定宽块状元素,哈哈,我要水平居中显示。</div>
</body>

css代码:

<style>
div{
    border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/

    width:500px;/*定宽*/ margin:20px auto;/* margin-left 与 margin-right 设置为 auto */ }

</style>

也可以写成:

margin-left:auto;
margin-right:auto;

注意:元素的“上下 margin” 是可以随意设置的。

水平居中总结-不定宽块状元素方法(一)

在实际工作中我们会遇到需要为“不定宽度的块状元素”设置居中,比如网页上的分页导航,因为分页的数量是不确定的,所以我们不能通过设置宽度来限制它的弹性。

不定宽度的块状元素有三种方法居中(这三种方法目前使用的都比多):

  1. 加入 table 标签
  2. 设置 display;inline 方法
  3. 设置 position:relative 和 left:50%;

这一小节我们来讲一下第一种方法:

第一步:为需要设置的居中的元素外面加入一个 table 标签 ( 包括 <tbody>、<tr>、<td> )。

第二步:为这个 table 设置“左右 margin 居中”(这个和定宽块状元素的方法一样)。

举例如下:

html代码:

<div> <table> <tbody>
    <tr><td> <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>  </td></tr>
  </tbody>
</table> </div>

css代码:

<style> table{
    margin:0 auto;
} ul{list-style:none;margin:0;padding:0;}
li{float:left;display:inline;margin-right:8px;}
</style>

水平居中总结-不定宽块状元素方法(二)

第二种方法:改变块级元素的 dispaly 为 inline 类型,然后使用 text-align:center 来实现居中效果。如下例子:

html代码:

<body>
<div class="container">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>
</body>

css代码:

<style>
.container{ text-align:center; }
.container ul{
    list-style:none;
    margin:0;
    padding:0; display:inline; }
.container li{
    margin-right:8px;
    display:inline;
}
</style>

这种方法相比第一种方法的优势是不用增加无语义标签,简化了标签的嵌套深度,但也存在着一些问题:它将块状元素的 display 类型改为 inline,变成了行内元素,所以少了一些功能,比如设定长度值。

水平居中总结-不定宽块状元素方法(三)

方法三:通过给父元素设置 float,然后给父元素设置 position:relative 和 left:50%,子元素设置 position:relative 和 left:-50% 来实现水平居中。

代码如下:

<body>
<div class="container">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>
</body>

css代码:

<style>
.container{  float:left;
    position:relative;
    left:50% }

.container ul{
    list-style:none;
    margin:0;
    padding:0;  position:relative;
    left:-50%; }
.container li{float:left;display:inline;margin-right:8px;}
</style>

这种方法可以保留块状元素仍以 display:block 的形式显示,优点不添加无语议表标签,不增加嵌套深度,但它的缺点是设置了 position:relative,带来了一定的副作用。

这三种方法使用得都非常广泛,各有优缺点,具体选用哪种方法,可以视具体情况而定。

垂直居中-父元素高度确定的单行文本

父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 heightline-height 高度一致来实现的。如下代码:

<div class="container">
    hi,Mrxn!
</div>

css代码:

<style>
.container{ height:100px;
    line-height:100px; background:#999;
}
</style>

垂直居中-父元素高度确定的多行文本(方法一)

父元素高度确定的多行文本图片块状元素的竖直居中的方法有两种:

方法一:使用插入 table (包括tbody、tr、td)标签,同时设置 vertical-align:middle。

说到竖直居中,css 中有一个用于竖直居中的属性 vertical-align,但这个样式只有在父元素为 td 或 th 时,才会生效。所以又要插入 table 标签了。下面看一下例子:

html代码:

<body> <table><tbody><tr><td class="wrap"> <div>
    <p>看我是否可以居中。</p>
    <p>看我是否可以居中。</p>
    <p>看我是否可以居中。</p>
    <p>看我是否可以居中。</p>
    <p>看我是否可以居中。</p>
</div> </td></tr></tbody></table> </body>

css代码:

table td{height:500px;background:#ccc}

因为 td 标签默认情况下就默认设置了 vertical-align 为 middle,所以我们不需要显式地设置了。

垂直居中-父元素高度确定的多行文本(方法二)

在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell,激活 vertical-align 属性,但注意 IE6、7 并不支持这个样式。

html代码:

<div class="container">
    <div>
        <p>看我是否可以居中。</p>
        <p>看我是否可以居中。</p>
        <p>看我是否可以居中。</p>
        <p>看我是否可以居中。</p>
        <p>看我是否可以居中。</p>
    </div>
</div>

css代码:

<style>
.container{
    height:300px;
    background:#ccc;  display:table-cell;/*IE8以上及Chrome、Firefox*/ vertical-align:middle;/*IE8以上及Chrome、Firefox*/
}
</style>

这种方法的好处是不用添加多余的无意义的标签,但缺点也很明显,它的兼容性不是很好,不兼容 IE6、7。

隐性改变display类型

有一个有趣的现象就是当为元素(不论之前是什么类型元素,display:none 除外)设置以下 2 个句之一:

  1. position : absolute
  2. float : left 或 float:right

元素会自动变为以 display:inline-block 的方式显示,当然就可以设置元素的 width 和 height 了且默认宽度不占满父元素。

如下面的代码,小伙伴们都知道 a 标签是行内元素,所以设置它的 width 是 没有效果的,但是设置为 position:absolute 以后,就可以了。

<div class="container">
    <a href="#" title="">请单击这里</a>
</div>

css代码

<style>
.container a{ position:absolute; width:200px;
    background:#ccc;
}
</style>



admin 发布于  2015-8-19 19:09 

给emlog5.3.1版本验证码添加点击刷新功能的方法 emlog

Emlog默认模板下验证码是没有点击刷新功能的,要刷新验证码的话还是得按F5刷新整个页面重新获得验证码,虽然emlog验证码看得比较清楚,但要通过重新刷新网页来获得新的验证码的方法对于网站负荷和用户体验来讲都并不合适,所以有必要给验证码添加点击刷新功能了。

    若要给emlog验证码添加点击刷新功能,还是很简单的,因为emlog的验证码也是img形式存在的,所以和其它类似的验证码一样,为img标签添加onclick属性就行了。

    Emlog有用到验证码的源代码有如下文件:

Emlog碎语:/t/index.php

Emlog评论:/include/controller/log_controller.php

Emlog管理后台登录:include\lib\loginauth.php


将以上文件的验证码位置的img标签添加以下语句即可实现点击刷新验证码功能:


<pre style="overflow:auto" ;class="prettyprint lang-php linenums">style=\"cursor:pointer;\" alt=\"未显示?请点击刷新\" title=\"看不清楚?请点击刷新\" onclick=\"this.src=this.src+'?'\"
如Emlog评论:/include/controller/log_controller.php, 有以下验证码源码:



<pre style="overflow:auto" ;class="prettyprint lang-php linenums"><img src=\"".BLOG_URL."include/lib/checkcode.php\" align=\"absmiddle\" /><input name=\"imgcode\" type=\"text\" class=\"input\" size=\"5\" tabindex=\"5\" />
改成如下代码即可添加上点击刷新验证码功能:



<pre style="overflow:auto" ;class="prettyprint lang-php linenums"><img src=\"".BLOG_URL."include/lib/checkcode.php\" align=\"absmiddle\" style=\"cursor:pointer;\" alt=\"未显示?请点击刷新\" title=\"看不清楚?请点击刷新\" onclick=\"this.src=this.src+'?'\" /><input name=\"imgcode\" type=\"text\" class=\"input\" size=\"5\" tabindex=\"5\" />
其它几个页面中添加验证码刷新功能方法类似,此略,注:此方法在em5.3.1正常使用,其他版本未测试。



另一种方法,来源于论坛,简爱发布:前提是当前模板要加载过 jQuery,没有的可以自己添加一下,直接在后台 添加统计代码的位置添加即可 (下面的代码 也在此位置添加,适用于全部正规模板)



<pre style="overflow:auto" ;class="prettyprint lang-php linenums"><font size="4" face="黑体">$('img[src="checkcode.php"]') // jQuery 筛选器
.attr('title', '单击刷新验证码') // 添加 title
.click(function(){ // 单击事件
this.src = this.src.replace(/\?.
$/, "") +'?'+ new Date().getTime(); // 重新设置 验证码 图片地址 checkcode.php?r=当前毫秒数
});</font>



admin 发布于  2015-8-2 15:16 

自动压缩、加密 CSS/JavaScript 优化网站性能 PHP

关于压缩

压缩 CSS 的方法, 无外乎缩写代码和清除多余字符来实现, 平时只要养成使用缩写的技巧就可以明显减少最终代码的整体大小. 在此我就不做过多的描述, 后文也会有简单的压缩代码.

相比于前者, JavaScript 的压缩方式就比较丰富工具也很多, 常用的有: Packer/YUI-compressor/Dojo Compressor 等, 本人比较喜欢用 Packer 来压缩, 压缩比例可以达到 50% 上下.

我不知道读者是如何对 CSS/JavaScript 进行处理的, 但在此之前我都是线下压缩然后在上传, 但还是有些麻烦且不便于管理. 于是最近正好找到一个 Packer 的后端类, 在不改动原 CSS/JavaScript 的前提下实时压缩文件并输出, 可以更好的解决我目前的困扰.

实现过程

首先在下载:packer.php-1.1.zip 并解压 class.JavaScriptPacker.php 到你的当前主题目录, 然后在相同位置创建compress.php 文件, 内容如下:


<?php

'javascript', 'css' => 'css');

if (file_exists($path)) { // 判断文件存在的情况下在执行压缩工作
  Header('Content-Type: text/' . $head[$info] . '; charset=utf-8'); // 必需定义相应的文件头
  $script = file_get_contents($path); //读取文件

  if ($info != 'css') { // 判断不同的文件类型做处理
    require 'class.JavaScriptPacker.php'; // 引用 Packer 类
    $packer = new JavaScriptPacker($script, 'Normal', true, false); // 设置压缩参数
    $packed = $packer->pack(); // 压缩并写入变量
  } else { // 处理 CSS 文件
    $packer = preg_replace("!/\*[^*]*\*+([^/][^*]*\*+)*/!", "", $script); // 清除多余注释
    $packed = str_replace(array("\r\n", "\r", "\n", "\t", "  ", "    ", "    "), null, $packer); // 清除多余换行、空格、缩进符
  }

  echo $packed; // 输出所压缩的内容
}
;?>



然后在相同的位置创建一个 .htaccess 文件, 内容如下:



RewriteEngine On
RewriteRule (.*.(js|css))$ /compress.php?name=$1

后记

该方法在自己的vps+Apache 环境下通过, 直接访问相应文件的绝对路径就会自动压缩并输出, 但是如果你的主机不支持 Rewrite 功能的话, 可以跳过创建 .htaccess 然后通过 http://youdomain.com/content/templates/主题目录/compress.php?name=文件名称.css/js 来调用文件.



admin 发布于  2015-8-1 13:17 

css自适应宽度滑动门菜单 PHP

html css width 自适应

什么是CSS自适应宽度滑动门菜单?

CSS自适应宽度菜单指菜单的宽度可以随着内容的增加而变宽,就拿下边的实例来说,是按4个字的宽度来设计的,如果其中一项为5个字或更多,就放不下了。那么我们就需要让它的宽度可以随着内容的增减而变化,这就是css自适应宽度菜单。

自适应宽度按钮的效果是怎样的呢?

那么,自适应宽度按钮,是怎么实现的呢?

要想实现自适应宽度,需要在文字上增加一个辅助标签,如span,分别在a上和span上设置背景,一个左侧对齐,一个右侧对齐

绿色部分为span,然后定义它的背景图片靠右侧对齐,而左侧的部分为a的背景图片,定义靠左侧对齐。当文字多时,会把span撑开,这实现了自适应宽度的按钮了。这里需要一张如下的图片,它的宽度要宽于你所应用的最宽宽度,这样才能显示正常,同时根据以前学习的css Sprites技术,把背景图片和鼠标经过图片放到一张图片上。


admin 发布于  2015-7-23 15:42 

修复emlog绕过验证码刷评论的bug 代码人生

 最近博客常常被人刷评论,最狠的一次被刷了10000多广告。

    先看看评论验证码是怎么检查的。

    emlog/include/controller/comment_controller.php,先获得$imgcode:

<pre style="overflow:auto" ;class="prettyprint lang-php linenums">$imgcode = isset($_POST['imgcode']) ? addslashes(trim(strtoupper($_POST['imgcode']))) : '';

  检查:


<pre style="overflow:auto" ;class="prettyprint lang-php linenums">} elseif (ISLOGIN == false && Option::get('comment_code') == 'y' && session_start() && $imgcode != $_SESSION['code']) {
emMsg('评论失败:验证码错误');
}


上述代码,几个判断依次是:

  1. 没有登录(非管理员和作者)
  2. 后台开启了评论验证码
  3. 开启session
  4. 将session中的code与$imgcode比较,不相等则验证码错误


    第4步明显有问题。熟悉php验证码流程的同学应该清楚,验证码生成的时候将会设置一个session,这里就是code,再和POST过来的也就是用户输入的做比较。

    然而如果我们并没有访问验证码生成页面,那么也就没生成session。那么$_SESSION['code']就是NULL。

    php中==是弱类型比较,NULL和''(空字符串)比较的结果是TRUE的。

    所以这里,我们的$imgcode如果输入一个空值,并且不去访问生成验证码的页面,那么这个$imgcode != $_SESSION['code']就不成立,就不会提示验证码错误,从而绕过了验证码检查逻辑。

    所以,我这里做测试。

    先正常留言,填写验证码,中途抓包:

    QQ20150614-1@2x.png

    将PHPSESSID修改成随意一个值,目的是让其$_SESSION不存在。再将imgcode修改成空:

    QQ20150614-2@2x.png

    发送数据包,可见没有提示失败(302跳转了),说明评论成功:

    QQ20150614-3@2x.png

    载入一个字典,即可刷评论:

    QQ20150614-4@2x.png

    QQ20150614-5@2x.png


    修复方法是判断session是否为空:


<pre style="overflow:auto" ;class="prettyprint lang-php linenums">empty($_SESSION['code']) || $_SESSION['code'] != $imgcode


  不满足这个条件即提示错误。

    另外的方法是和我博客一样,使用第三方验证码,简洁又方便:极验

还有就是像我博客这样,增加一个打勾的措施也可以在一定程度上防止机器人刷评论.

注:  这只是对开了验证码的有效,没有开验证码想我博客这样的可以不修改.

原文地址:https://www.leavesongs.com/PENETRATION/emlog-comment-captcha-bypass.html


admin 发布于  2015-6-18 14:22 

css控制不溢出,不换行,溢出部分省略号显示 PHP

css控制不溢出,不换行,溢出部分省略号显示:white-space:nowrap;text-overflow:ellipsis;overflow:hidden;

ext-overflow 取值:
clip : 默认值。不显示省略标记(...),而是简单的裁切
ellipsis : 当对象内文本溢出时显示省略标记(...)
 
white-space : normal | pre | nowrap 取值:
normal : 默认值。默认处理方式。文本自动处理换行。假如抵达容器边界内容会转到下一行
pre : 换行和其他空白字符都将受到保护。这个值需要IE6+或者 !DOCTYPE 声明为 standards-compliant mode 支持。如果 !DOCTYPE 声明没有指定为 standards-compliant mode ,此属性可以使用,但是不会发生作用。结果等同于 normal 。参阅 pre 对象
nowrap : 强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象。参阅 noWrap 属性

overflow : visible | auto | hidden | scroll 取值:
visible : 默认值。不剪切内容也不添加滚动条。假如显式声明此默认值,对象将以包含对象的 window 或 frame 的尺寸裁切。并且 clip 属性设置将失效
auto : 在必需时对象内容才会被裁切或显示滚动条
hidden : 不显示超过对象尺寸的内容
scroll : 总是显示滚动条

标签: 编程 代码 css

admin 发布于  2015-6-8 23:41 

css 书写顺序、命名规则的指南 PHP

这里总结了一些国外一些文章以及我的个人经验总结出来,我想对写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等)

img.png

CSS书写规范

使用CSS缩写属性

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

img.png

去掉小数点前的“0”

img.png

简写命名

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

img.png

16进制颜色代码缩写

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

img.png

连字符CSS选择器命名规范

  1. 长名称或词组可以使用中横线来为选择器命名。
  2. 不建议使用“_”下划线来命名CSS选择器,为什么呢?
    • 输入的时候少按一个shift键;
    • 浏览器兼容问题 (比如使用_tips的选择器命名,在IE6是无效的)
    • 能良好区分JavaScript变量命名(JS变量命名是用“_”)
    • 这里有一篇破折号与下划线的详细讨论,英文::f点击查看 中文篇:f点击查看

      img.png

      不要随意使用Id

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

      img.png

      为选择器添加状态前缀

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

      img.png

      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


标签: 编程 代码 css

admin 发布于  2015-6-4 23:55 

利用border来设置emlog个性的边框 - 友情链接 emlog

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

05-30-000044.png

具体方法:

打开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手册.

标签: 代码 css

admin 发布于  2015-5-30 01:05 

多说自定义CSS动感头像和多说评论显示User Agent的那些小事 PHP

000.png#

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

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

---

##
更新历史

2015
0424 - 初稿

阅读原文 - 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

![](


admin 发布于  2015-5-8 08:53