思章老师

When your legs get tired, run with your heart.

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

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

2010/05 22
  • 9286 次点击
  • 个人杂烩
  • 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.05.12

    关闭WordPress自动修订和自动保存功能

    蓦然已经写了几篇日志了,结果回过头来发现各日…

  2. 没有图片

    2010.05.07

    腾讯微博:世界感情之最

    世界最难断的是感情,最难求的是爱情,最难还的…

  3. 没有图片

    2010.09.13

    Dynamic Blog Protector 动态保护您的博客

    WordPress插件Dynamic Blo…

  4. 没有图片

    2010.09.12

    老师,您还记得什么是育人吗?

    前天是教师节,和平常一样,平平淡淡地过,当然…

  5. 没有图片

    2010.09.19

    PHP解析 KU6视频真实地址

    虽然KU6提供视频下载,但需要安装他们的极速…

  6. 越狱 第五季

    2017.04.11

    2017年 越狱第五季[Prison Break Season 5] 全集下载

    美剧我追过为数不多的其中一部,最喜欢的当然是…

评论

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

返回顶部