修改Blockquote让引用文段模块更漂亮

作者:matrix 被围观: 3,551 次 发布时间:2013-09-05 分类:Wordpress 兼容并蓄 | 7 条评论 »

💡NOTICE:这是一个创建于 2084 天前的主题,其中的信息可能已经有所发展或是发生改变。最近修改:2019-01

更换主题-七彩之家BLUE2.0以及后续的修改 提过修改cssBlockquote样式来让引用样式更beautiful。

样式一:

修改Blockquote让引用文段模块更漂亮 样式一

代码:

blockquote{    
background: #d9e9ff;    
padding: 10px 15px 10px 15px;    
margin: 1em 3em 1em 3em;    
font-size:.8em;    
border-style:dotted dotted dotted solid;    
border-width:1px 1px 1px 5px;    
border-color:#5bbcdd;    
line-height:200%;    
}   

样式二:

样式二

 

代码:

blockquote{color:#2b2b2b; background:url(images/patt.png) repeat;margin:10px 20px;padding:8px 16px;border:1px solid  #CCC;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;}  

背景图片patt.png可自定义。

patt.png下载:

http://link.hhtjim.com/bdwl/2952143733/3238236832/patt.png

百度网盘源地址:http://pan.baidu.com/share/link?shareid=2952143733&uk=3238236832

样式三:

样式三

代码:

blockquote:before, blockquote:after, q:before, q:after { content: ""; }  
blockquote, q { quotes: "" ""; }  
blockquote  { margin: 1.5em; color: #666; font-style: italic; }  

blockquote{padding:0 0 0 15px;margin:0 0 18px;border-left:5px solid #eee}  
blockquote{border-color:#ddd;border-color:rgba(0,0,0,0.15)}  
找相似:
本文固定链接:https://www.hhtjim.com/modify-the-blockquote-quoted-passage-module-is-more-beautiful.html
matrix
本文章由 matrix 于2013年09月05日发布在Wordpress, 兼容并蓄分类下,目前没有通告,你可以至底部留下评论。
转载请注明:修改Blockquote让引用文段模块更漂亮-HHTjim'S 部落格
关键字:,

有7 条评论 »

  1. 望星湖畔 望星湖畔 2013-12-27 10:17:11 +0800#4

    不需要修改《pre》标签吗?

    • Matrix Matrix Moderator 2013-12-27 11:28:25 +0800

      不需要。
      引用文字段是blockquote标签
      代码段才是pre标签

  2. 望星湖畔 望星湖畔 2013-12-27 10:16:26 +0800#3

    不需要修改&ltpre>标签吗?

  3. xilouqingzhu xilouqingzhu 2013-10-2 18:34:45 +0800#2

    额,,就是给引用加上css吧

    • Matrix Matrix Moderator 2013-10-2 20:43:15 +0800

      是啊 就因为那主题太简单了,引用段样式都没有。

  4. 逗婦乳 逗婦乳 2013-9-29 17:31:19 +0800#1

    博主啊,从哪里盗来的写个源地址嘛

    • Matrix Matrix Moderator 2013-9-29 22:33:11 +0800

      额~ 忘了留地址,罪过罪过。

添加新评论 »

 🙈 😱 😂 😛 😭 😳 😀 😆 👿 😉 😯 😮 😕 😎 😐 😥 😡 😈 💡

NOTICE: You should type some Chinese word (like “你好”) in your comment to pass the spam-check, thanks for your patience!