思章老师

When your legs get tired, run with your heart.

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

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

2010/05 22
  • 9523 次点击
  • 个人杂烩
  • 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. 没有图片

    2010.12.10

    移除WordPress评论者和内容链接

    期 WordPress Spam 制造者横行…

  2. 没有图片

    2010.05.07

    CCAV正解

    终于从网上找到了CCAV的正解:CHINA …

  3. 没有图片

    2010.10.08

    谷歌新Logo 纪念约翰·列侬诞辰

    谷歌今日放出了纪念The Beatles(甲…

  4. 没有图片

    2010.05.07

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

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

  5. 没有图片

    2010.05.07

    愤怒.鲁迅《华盖集》

    勇者愤怒,抽刃向更强者;怯者愤怒,却抽刃向更…

  6. 没有图片

    2010.06.16

    Web2.0网页配色方案之二

    不同风格的网页配色方案,已经进行适当的分类,…

评论

  • 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盒子

返回顶部