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

前言

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

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

更新历史

2015年04月25日 - 修复Font Awesome图标显示，增加动态效果图展示

2015年04月24日 - 初稿

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

扩展阅读

多说自定义CSS

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

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

头像水平翻转

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

多说评论显示UA(User Agent)

主要参考@myhloli和@搜索客，灰常感谢

多说评论框UA显示/博主标记 - http://myhloli.com/duoshuo-ua-and-admin-tab.html

多说回复后显示浏览器及操作系统信息（Useragent） - http://ssk.91txh.com/209

本地化embed.js

1.下载embed.js

多说官方 - http://static.duoshuo.com/embed.js

偷懒可以下载我当前使用的 - http://wsgzao.github.io/embed.js

2.获取多说ID

方法一：在文章下方登录后评论点击头像可获取多说ID

方法二：访问多说后台，http://duoshuo.com/settings/ ，点击你的用户名，地址栏中会出现如如下的ID地址

http://duoshuo.com/profile/867394/

3.本地修改embed.js

注意修改e.user_id多说ID，可以自定义ssk前端显示昵称

//移动客户端判断开始
function checkMobile() {
    var isiPad = navigator.userAgent.match(/iPad/i) != null;
    if (isiPad) {
        return false;
    }
    var isMobile = navigator.userAgent.match(/iphone|android|phone|mobile|wap|netfront|x11|java|opera mobi|opera mini|ucweb|windows ce|symbian|symbianos|series|webos|sony|blackberry|dopod|nokia|samsung|palmsource|xda|pieplus|meizu|midp|cldc|motorola|foma|docomo|up.browser|up.link|blazer|helio|hosin|huawei|novarra|coolpad|webos|techfaith|palmsource|alcatel|amoi|ktouch|nexian|ericsson|philips|sagem|wellcom|bunjalloo|maui|smartphone|iemobile|spice|bird|zte-|longcos|pantech|gionee|portalmmm|jig browser|hiptop|benq|haier|^lct|320x320|240x320|176x220/i) != null;
    if (isMobile) {
        return true;
    }
    return false;
}
//移动客户端判断结束
//管理员判断开始
function sskadmin(e) {
    var ssk = ‘‘;
    if (e.user_id == 867394) {
        if (checkMobile()) {
            ssk = ‘<span class="ua"><span class="sskadmin">R00T</span></span><br><br>‘;
        } else {
            ssk = ‘<span class="ua"><span class="sskadmin">R00T</span></span>‘;
        }
    } else {
        if (checkMobile()) {
            ssk = ‘<br><br>‘;
        }
    }
    return ssk;
}
//管理员判断结束
//显UA开始
function ua(e) {
    var r = new Array;
    var outputer = ‘‘;
    if (r = e.match(/FireFox\/([^\s]+)/ig)) {
        var r1 = r[0].split("/");
        outputer = ‘<span class="ua_firefox"><i class="fa fa-globe"></i> Mozilla FireFox‘ + ‘ ‘ + r1[1]
    } else if (r = e.match(/Maxthon([\d]*)\/([^\s]+)/ig)) {
        var r1 = r[0].split("/");
        outputer = ‘<span class="ua_maxthon"><i class="fa fa-globe"></i> Maxthon‘ + ‘ ‘ + r1[1]
    } else if (r = e.match(/BIDUBrowser([\d]*)\/([^\s]+)/ig)) {
        var r1 = r[0].split("/");
        outputer = ‘<span class="ua_ucweb"><i class="fa fa-globe"></i> 百度浏览器‘ + ‘ ‘ + r1[1]
    } else if (r = e.match(/UBrowser([\d]*)\/([^\s]+)/ig)) {
        var r1 = r[0].split("/");
        outputer = ‘<span class="ua_ucweb"><i class="fa fa-globe"></i> UCBrowser‘ + ‘ ‘ + r1[1]
    } else if (r = e.match(/UCBrowser([\d]*)\/([^\s]+)/ig)) {
        var r1 = r[0].split("/");
        outputer = ‘<span class="ua_ucweb"><i class="fa fa-globe"></i> UCBrowser‘ + ‘ ‘ + r1[1]
    } else if (r = e.match(/MetaSr/ig)) {
        outputer = ‘<span class="ua_sogou"><i class="fa fa-globe"></i> 搜狗浏览器‘
    } else if (r = e.match(/2345Explorer/ig)) {
        outputer = ‘<span class="ua_2345explorer"><i class="fa fa-globe"></i> 2345王牌浏览器‘
    } else if (r = e.match(/2345chrome/ig)) {
        outputer = ‘<span class="ua_2345chrome"><i class="fa fa-globe"></i> 2345加速浏览器‘
    } else if (r = e.match(/LBBROWSER/ig)) {
        outputer = ‘<span class="ua_lbbrowser"><i class="fa fa-globe"></i> 猎豹安全浏览器‘
    } else if (r = e.match(/MicroMessenger\/([^\s]+)/ig)) {
        var r1 = r[0].split("/");
        outputer = ‘<span class="ua_qq"><i class="fa fa-weixin"></i> 微信‘ + ‘ ‘ + r1[1]
        /*.split(‘/‘)[0]*/
    } else if (r = e.match(/QQBrowser\/([^\s]+)/ig)) {
        var r1 = r[0].split("/");
        outputer = ‘<span class="ua_qq"><i class="fa fa-globe"></i> QQ浏览器‘ + ‘ ‘ + r1[1]
        /*.split(‘/‘)[0]*/
    } else if (r = e.match(/QQ\/([^\s]+)/ig)) {
        var r1 = r[0].split("/");
        outputer = ‘<span class="ua_qq"><i class="fa fa-globe"></i> QQ浏览器‘ + ‘ ‘ + r1[1]
        /*.split(‘/‘)[0]*/
    } else if (r = e.match(/MiuiBrowser\/([^\s]+)/ig)) {
        var r1 = r[0].split("/");
        outputer = ‘<span class="ua_mi"><i class="fa fa-globe"></i> Miui浏览器‘ + ‘ ‘ + r1[1]
        /*.split(‘/‘)[0]*/
    } else if (r = e.match(/Chrome([\d]*)\/([^\s]+)/ig)) {
        var r1 = r[0].split("/");
        outputer = ‘<span class="ua_chrome"><i class="fa fa-globe"></i> Chrome‘ + ‘ ‘ + r1[1]
        /*.split(‘.‘)[0]*/
    } else if (r = e.match(/safari\/([^\s]+)/ig)) {
        var r1 = r[0].split("/");
        outputer = ‘<span class="ua_apple"><i class="fa fa-globe"></i> Apple Safari‘ + ‘ ‘ + r1[1]
    } else if (r = e.match(/Opera[\s|\/]([^\s]+)/ig)) {
        var r1 = r[0].split("/");
        outputer = ‘<span class="ua_opera"><i class="fa fa-globe"></i> Opera‘ + ‘ ‘ + r1[1]
    } else if (r = e.match(/Trident\/7.0/gi)) {
        outputer = ‘<span class="ua_ie"><i class="fa fa-globe"></i> Internet Explorer 11‘
    } else if (r = e.match(/MSIE\s([^\s|;]+)/gi)) {
        outputer = ‘<span class="ua_ie"><i class="fa fa-globe"></i> Internet Explorer‘ + ‘ ‘ + r[0]
        /*.replace(‘MSIE‘, ‘‘).split(‘.‘)[0]*/
    } else {
        outputer = ‘<span class="ua_other"><i class="fa fa-globe"></i> 其它浏览器‘
    }
    if (checkMobile()) {
        Mobile = ‘<br><br>‘;
    } else {
        Mobile = ‘‘;
    }
    return outputer + "</span>" + Mobile;
}
function os(e) {
    var os = ‘‘;
    if (e.match(/win/ig)) {
        if (e.match(/nt 5.1/ig)) {
            os = ‘<span class="os_xp"><i class="fa fa-desktop"></i> Windows XP‘
        } else if (e.match(/nt 6.1/ig)) {
            os = ‘<span class="os_7"><i class="fa fa-desktop"></i> Windows 7‘
        } else if (e.match(/nt 6.2/ig)) {
            os = ‘<span class="os_8"><i class="fa fa-desktop"></i> Windows 8‘
        } else if (e.match(/nt 6.3/ig)) {
            os = ‘<span class="os_8_1"><i class="fa fa-desktop"></i> Windows 8.1‘
        } else if (e.match(/nt 10.0/ig)) {
            os = ‘<span class="os_8_1"><i class="fa fa-desktop"></i> Windows 10‘
        } else if (e.match(/nt 6.0/ig)) {
            os = ‘<span class="os_vista"><i class="fa fa-desktop"></i> Windows Vista‘
        } else if (e.match(/nt 5/ig)) {
            os = ‘<span class="os_2000"><i class="fa fa-desktop"></i> Windows 2000‘
        } else {
            os = ‘<span class="os_windows"><i class="fa fa-desktop"></i> Windows‘
        }
    } else if (e.match(/android/ig)) {
        os = ‘<span class="os_android"><i class="fa fa-android"></i> Android‘
    } else if (e.match(/ubuntu/ig)) {
        os = ‘<span class="os_ubuntu"><i class="fa fa-desktop"></i> Ubuntu‘
    } else if (e.match(/linux/ig)) {
        os = ‘<span class="os_linux"><i class="fa fa-linux"></i> Linux‘
    } else if (e.match(/mac/ig)) {
        os = ‘<span class="os_mac"><i class="fa fa-desktop"></i> Mac OS X‘
    } else if (e.match(/unix/ig)) {
        os = ‘<span class="os_unix"><i class="fa fa-desktop"></i> Unix‘
    } else if (e.match(/symbian/ig)) {
        os = ‘<span class="os_nokia"><i class="fa fa-mobile"></i> Nokia SymbianOS‘
    } else {
        os = ‘<span class="os_other"><i class="fa fa-desktop"></i> 其它操作系统‘
    }
    return os + "</span>";
}
//显UA结束

4.上传embed.js

我的做法上传到GitHub，其它类似七牛或者云主机的方法都可以

http://wsgzao.github.io/embed.js

5.修改多说调用地址

其它平台以此类推，我自己的做法ds.src = ‘//wsgzao.github.io/embed.js’;

<script type="text/javascript">
  var duoshuoQuery = {short_name:"<%= theme.duoshuo_shortname %>"};
  (function() {
    var ds = document.createElement(‘script‘);
    ds.type = ‘text/javascript‘;ds.async = true;
    ds.src = ‘//wsgzao.github.io/embed.js‘;
    ds.charset = ‘UTF-8‘;
    (document.getElementsByTagName(‘head‘)[0]
    || document.getElementsByTagName(‘body‘)[0]).appendChild(ds);
  })();
</script>

6.增加Font Awesome

官方下载压缩包 - http://fontawesome.io/

解压其中的fonts和css，根据你的Blog类型上传至指定目录引入CSS链接即可生效

7.多说后台自定义CSS

请参考上文方法加入多说自定义CSS

/*UA Start*/
span.ua {
    margin: 0 1px!important;
    color: #FFFFFF!important;
    /*text-transform: Capitalize!important;
    float: right!important;
    line-height: 18px!important;*/;
}

.ua_other.os_other {
    background-color: #ccc!important;
    color: #fff;
    border: 1px solid #BBB!important;
    border-radius: 4px;
}

.ua_ie {
    background-color: #428bca!important;
    border-color: #357ebd!important;
    border-radius: 4px;
    padding: 0 5px!important;
}

.ua_firefox {
    background-color: #f0ad4e!important;
    border-color: #eea236!important;
    border-radius: 4px;
    padding: 0 5px!important;
}

.ua_maxthon {
    background-color: #7373B9!important;
    border-color: #7373B9!important;
    border-radius: 4px;
    padding: 0 5px!important;
}

.ua_ucweb {
    background-color: #FF740F!important;
    border-color: #d43f3a!important;
    border-radius: 4px;
    padding: 0 5px!important;
}

.ua_sogou {
    background-color: #78ACE9!important;
    border-color: #4cae4c!important;
    border-radius: 4px;
    padding: 0 5px!important;
}

.ua_2345explorer {
    background-color: #2478B8!important;
    border-color: #4cae4c!important;
    border-radius: 4px;
    padding: 0 5px!important;
}

.ua_2345chrome {
    background-color: #F9D024!important;
    border-color: #4cae4c!important;
    border-radius: 4px;
    padding: 0 5px!important;
}

.ua_mi {
    background-color: #FF4A00!important;
    border-color: #4cae4c!important;
    border-radius: 4px;
    padding: 0 5px!important;
}

.ua_lbbrowser {
    background-color: #FC9D2E!important;
    border-color: #4cae4c!important;
    border-radius: 4px;
    padding: 0 5px!important;
}

.ua_chrome {
    background-color: #EE6252!important;
    border-color: #4cae4c!important;
    border-radius: 4px;
    padding: 0 5px!important;
}

.ua_qq {
    background-color: #3D88A8!important;
    border-color: #4cae4c!important;
    border-radius: 4px;
    padding: 0 5px!important;
}

.ua_apple {
    background-color: #E95620!important;
    border-color: #4cae4c!important;
    border-radius: 4px;
    padding: 0 5px!important;
}

.ua_opera {
    background-color: #d9534f!important;
    border-color: #d43f3a!important;
    border-radius: 4px;
    padding: 0 5px!important;
}

.os_vista,.os_2000,.os_windows,.os_xp,.os_7,.os_8,.os_8_1 {
    background-color: #39b3d7!important;
    border-color: #46b8da!important;
    border-radius: 4px;
    padding: 0 5px!important;
}

.os_android {
    background-color: #98C13D!important;
    border-color: #01B171!important;
    border-radius: 4px;
    padding: 0 5px!important;
}

.os_ubuntu {
    background-color: #DD4814!important;
    border-color: #01B171!important;
    border-radius: 4px;
    padding: 0 5px!important;
}

.os_linux {
    background-color: #3A3A3A!important;
    border-color: #1F1F1F!important;
    border-radius: 4px;
    padding: 0 5px!important;
}

.os_mac {
    background-color: #666666!important;
    border-color: #1F1F1F!important;
    border-radius: 4px;
    padding: 0 5px!important;
}

.os_unix {
    background-color: #006600!important;
    border-color: #1F1F1F!important;
    border-radius: 4px;
    padding: 0 5px!important;
}

.os_nokia {
    background-color: #014485!important;
    border-color: #1F1F1F!important;
    border-radius: 4px;
    padding: 0 5px!important;
}

.sskadmin {
    background-color: #00a67c!important;
    border-color: #01B171!important;
    border-radius: 4px;
    padding: 0 5px!important;
}
/*UA End*/

其它开源方案

欢迎大家积极反馈，提出自己的想法^_^

Make DUOSHUO Show UA - http://git.oschina.net/huhuhuhu/Make-DUOSHUO-Show-UA/tree/master

ua-parser-js - https://github.com/faisalman/ua-parser-js

duoshuo-mod - https://github.com/wsgzao/duoshuo-mod

前端识别

大家可以猛击测试各种UA

Useragent.js - http://zsxsoft.github.io/useragent.js/withimage.html

UAParser.js - http://faisalman.github.io/ua-parser-js/

时间： 2024-10-31 13:10:26

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

博客园自定义CSS样式设置

关于博客园自定义CSS样式设置 关于博客园自定义CSS样式设置 首先,选择一个博客皮肤模板,如下 然后,F12审查元素,可对右侧的元素规则进行自定义更改,然后覆盖原CSS 譬如看看取消掉自定义背景图片是什么样子,同理也可以添加CSS样式代码 如此修改完后,就可在页面定制CSS代码框中填上你所需要修改的代码 下面是我的页面定制CSS代码: 1.html,body{2. color: #807C7C;3. font-family: "Helvetica Neue",Helvetica,Ar

利用自定义View实现头像截取页面

在一些应用中,特别是有帐号体系的应用,通过相册选择图片和照相机拍照,然后对所获取的头像进行截取,最后获取选择框中的内容作为头像,一般效果会如下显示: 那么,如何制作这样一个效果呢,关键点在哪里呢? 做法其实可以有多种, 1)可以直接继承ImageView,然后在ImageView的OnDraw函数中直接绘制圆形或者方形的高亮圈: 2)也可以直接继承View,自己将Bitmap给传进来,在onDraw函数中先绘制图片,接着利用Path来绘制这个圆形或者方形的选择区域,利用Region.OP.DIF

微信公众平台多客服新增自定义客服头像和消息转发接口功能

多客服一般是开放给微信认证服务号的一个便捷功能,可以将消息转发到多客服方便回复.对有些“选择综合症“的客服,看到那一层不变的客服头像就想吐槽.现在好了,多客服新增自定义客服头像和接口功能,也可以自定义昵称 一.开通“多客服”的公众号可为客服工号配置自定义头像. 使用6.0.2版微信的用户在同公众号进行客服沟通时,可以看到配置的客服头像和昵称. 二.为满足公众号个性化客服需求,公众平台为开发者提供了“多客服”相关接口,可将消息转发到多客服 和 消息转发到指定客服. A:如果公众号处于开发模式,普通

博客园自定义CSS美化 屏蔽广告等

通过自定义CSS,实现在博客园屏蔽广告.美化排版等. 需要禁用模板CSS 1 body{ 2 background: url(http://images.cnblogs.com/cnblogs_com/storyicon/1107385/o_Z.jpg); 3 font-family: "Hiragino Sans GB","Microsoft YaHei",\5FAE\8F6F\96C5\9ED1,tahoma,arial,simsun,\5B8B\4F53; 4

Confluence 6 考虑使用自定义 CSS

CSS 的知识储备 如果你没有有关 CSS 的相关知识,请参考页面  CSS Resources section 中的内容.当你打算开始对 Confluence 的样式表进行修改之前,你应该对 CSS 有一些相关的了解和知识储备. 安全 自定义 CSS 有可能被在页面中注入脚本,有跨站点攻击的风险 cross-site scripting (XSS) .当自定义脚本上传功能被启用后,空间管理员可以用自己的用户名和密码上传 CSS 样式表,然后触发浏览器在页面载入的时候运行脚本,这些脚本可能连空间

vue项目引入自定义.css的样式文件

ES6的引入方式: .vue文件中 css文件引入 <template></template> <style scoped> @import "../assets/common/common.css";//自定义.css的样式路径 </style> js文件的引入 在main.js中: import API from './assets/api/api.config.js' Vue.prototype.$API = API; P.S.:传

第十一篇：Vue全局配置自定义css与js

全局配置自定义css与js 配置全局css 首先在src下的assets目录下创建css文件夹,用于存放css全局文件 1.在创建好的css文件夹下创建global.css文件,内容如下: html, body { margin: 0; } a { color: black; text-decoration: none; } ul { margin: 0; padding: 0; } 2.在全局入口文件main.js中导入 //1) 配置全局css import '@/assets/css/gl

laravel项目中css样式表的背景图片不显示

刚学laravel,遇到了很多坑,感觉laravel是挺强大的. 建好后台项目,奈何css样式表的背景图片不显示 .mainhd { background: url(../images/sky/body_bg.png) repeat-x 0px 0px; } 按理上面的写法没错,因为是从别的后台搬过来的,但是图片一直不显示,访问绝对路径却又能显示图片,坑. 原因是因为图片路径要使用单引号或者双引号的,下面是正确的写法 .mainhd { background: url('../images/sk

自定义plain 样式的 tableview,模拟器上不显示分割线,真机上却显示分割线.

一, 经历 1> 自定义plain 样式的 tableview,模拟器上不显示分割线,真机上却显示cell 下面的分割线. 2> 尝试使用表格的separatorStyle属性,尝试失败.尝试使用 grouped 类型的表格,设置 headerview 和 footview 的代理方法或tableFooterView属性都不生效. 3> 同事定位到问题应该出在,已经设置过separatorStyle属性,接着又被系统的某些属性覆盖了,而且没有数据的单元格被系统自动创建了. 4> 同