思章老师

When your legs get tired, run with your heart.

  • 学学技术
  • 资源分享
  • 引领视觉
  • 个人杂烩
    • 必应壁纸
    • 我的马拉松
    • 马拉松训练
    • 我爱我家
    • 生活百态
  • 关于我们
菜单
  1. 首页
  2. 个人杂烩
  3. 给WordPress日志图片添加默认边框样式

给WordPress日志图片添加默认边框样式

2010/05 22
  • 9223 次点击
  • 个人杂烩
  • 4 条评论

很多WordPress的日志内容里或多或少地会添加一些图片,但不是所有的WordPress日志图片都带样式,本文就教大家如何简单实现WordPress日志图片添加边框样式。

以35款不同风格的RSS图标下载为例,文章里有很多图片,但所有的图片都是原生态的,没什么修饰,看起来有点呆板,如果在内容页面里添加上默认的样式表,让图片自带上边框,效果一定会不错。

首先,我们要先确认在哪里定义图片的CSS样式,本文讲的是对日志内容里的图片进行修饰,那图片的CSS样式肯定要放在内容样式下了,看图:

http://www.xbaidu.net/pic/images/2010052212.gif

我们在博客里随便找到一篇日志,之后选中日志内容的开头查看源码,千百度的内容开始源码如下:

到这里,我们就可以确定图片样式应该放在postcontent样式表里面了,于是去后台的主题编辑,编辑style.css,CTL+F,找到“postcontent”,之后在其下添加代码:

div.postcontent img { padding:3px 3px; border:#CCCCCC solid thin; }
div.postcontent img a { padding:3px 3px; border:#CCCCCC solid thin; }
div.postcontent img a:hover { padding:3px 3px; border:#FF0000 solid thin; }

这三行代码,就可以实现不带链接、带链接、鼠标放在链接上之后的效果,这里没定义图片大小,还可以添加上图片限制大小,在以后的教程中,我还会为大家献上。

思章老师

认准了方向,就要勇敢地走下去,十年磨一剑,我相信,只要坚持,一切都有可能。

相关日志

  1. 没有图片

    2013.06.30

    Your Account Has Been Limited PayPal Case ID

    第一次收到这封标题为“Your Accoun…

  2. 没有图片

    2010.05.11

    还可以做个尿检吗?

    害羞男在医院做血检,漂亮的女护士扎破他手指后…

  3. 没有图片

    2010.05.31

    165个矢量图标 5种不同颜色

    小百度今天为大家分享165种矢量图标,5种不…

  4. 没有图片

    2010.05.07

    中国人的两个极端:自卑与自傲

    我们民族没有包容性的性格,如此造成中国人两个…

  5. 没有图片

    2010.05.20

    月光论坛事件与国王的故事

    曾经有一个人,骂国王是笨蛋,后来他被抓起来交…

  6. 没有图片

    2012.09.14

    中国解决钓鱼岛问题的关键不在动用武力而在于加快国内政治体制改革

    此文是转自天涯的一篇文章,仔细读来,我发现作…

评论

  • 3 评论
  1. goldmili 2011.02.12 11:45下午

    非常感谢!找了好久,终于在你这里找到解决的方法~~

    回复
  2. RuiAlessio 2011.01.31 4:57上午

    可是,如果日志内容的class不是postcontent而是content,和表情的class一致,上述方法就需要修正了。不然日志内容加了边框,表情也会被加上边框。

    回复
  3. Billow 2010.10.14 9:40上午

    感谢分享,正需要这个!我收藏了!

    回复
1 2 下一页 »
点击这里取消回复。

一组超炫丽的电脑桌面主题 Photo Story Platinum v3.5.0.12 绿色便携版 | 照片故事白金版

返回首页

avatar
客服小美
Powered by   萌芽科技

© 2009 思章老师Themed by WP盒子

返回顶部