四

11

11月

2010

jimdo美化-jimdo留言、评论部分的修饰|留言、评论框添加背景

资讯知识 · 美化相关 · 网页浏览 · jimdo · 分页19

        最近在浏览一些网站的时候经常看到很漂亮的留言框，也学着在jimdo上做做，下图是我今天刚刚修改之后的效果：

留言评论-诸葛草帽

        其实现在的样子只是在以前的效果上添加了背景而已，以前写过的相关文章：《Jimdo教程：Jimdo网站留言、评论部分的修饰与美化》《jimdo技巧-jimdo留言、评论、博文中含有较长网址链接导致网页出现问题的解决方法》《jimdo技巧-jimdo留言、博文评论输入框在IE6下的小“bug”修复》，感兴趣的朋友可以去看看，下面说下诸葛草帽这次修改的代码，在css里添加以下代码：

ul.com-list textarea

{width:560px!important;background:#fff url("http://u.jimdo.com/www24/o/sea6d17695a9c2b53/userlayout/img/comment-bg.gif?t=1289453117") no-repeat center;}

ul.com-list input.single

{background:#dcdcdc;}

代码中红色部分是修饰评论和留言框的，添加了一个背景图片，而且居中显示，蓝色部分是上面姓名和主页框部分的，只修改了背景颜色，喜欢的朋友可以自己修改成自己喜欢的样式。如果你也喜欢这个背景的话，你可以直接引用我的图片链接地址或者下载这张图片之后传到你自己的网站上去。图片在下面：

jimdo=诸葛草帽

撰写评论

评论: 9

  • JimdoPro
    #1

    网型网秀 (星期四, 11 十一月 2010 17:24)

    无觅给我发个邮件说你也介绍了它，要求删掉之前的代码，换成：
    <script type="text/javascript">
    var wumiiSitePrefix = "http://wxwx.jimdo.com/";
    </script>
    undefined
    没有弄懂是个什么意思。好像没有这段代码还是一样的。

  • #2

    诸葛草帽 (星期四, 11 十一月 2010 18:38)

    回复网型网秀：现在的无觅和以前的代码稍有不同，具体我也不太清楚，感觉这段代码会影响到相关文章的关联度等方面吧

  • JimdoPro
    #3

    王滨音乐空间 (星期四, 11 十一月 2010 19:52)

    诸葛草帽：你好！我是在你和邻居及网型网秀站里学到很多建站的知识，闲来无事时就把布局重新调整一下，衷心希望得到你的建议和指点。谢谢你。

  • #4

    网上邻居 (星期四, 11 十一月 2010 21:37)

    呵呵，这个很好玩。

  • #5

    诸葛草帽 (星期五, 12 十一月 2010 08:38)

    回复王滨音乐空间：圆角用得很出色，只是ie不能显示这个效果有点可惜，中间有片空白，看着有点别扭，呵呵

  • #6

    诸葛草帽 (星期五, 12 十一月 2010 08:40)

    回复网上邻居：每天都去邻居那里看几次，怎么最近不搞jimdo了呢？^_^

  • #7

    wshy (星期二, 07 六月 2011 20:32)

    你好！你做的评论留言版好靓，我想问你这样可以做留言框的四个角半圆，还需要加什么代码，可以指点下吗？

  • #8

    诸葛草帽 (星期二, 07 六月 2011 20:38)

    @wshy:这个效果也比较容易实现，需要以下代码：
    .commententry{padding:8px;border:1px solid #acacac;border-bottom-left-radius:5px 5px;border-bottom-right-radius: 5px 5px;}
    .com-meta{background:#eee;border:1px solid #acacac;border-bottom:0;padding:8px;border-top-left-radius: 5px 5px;border-top-right-radius: 5px 5px;}
    ，这个效果在ie内核浏览器下貌似不能生效

  • #9

    wshy (星期二, 07 六月 2011 21:07)

    你的解答真好快，多谢你的指点！

  • loading