思章老师

When your legs get tired, run with your heart.

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

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

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

    2015.06.09

    关于中搜互联网业务的评价(转)

    这几天,因一位年近60的老朋友商大叔接到来自…

  2. 没有图片

    2010.05.27

    Fusion – Joomla Template

    Joomla也是一个非常强大的CMS系统,大…

  3. 没有图片

    2010.05.07

    日.月.春.秋

    秦国占春秋一半,明朝开日月成双。 这是从中国…

  4. 没有图片

    2010.09.04

    Windows 7 硬盘技术大全

    该Windows 7硬盘安装方法大全介绍了W…

  5. 没有图片

    2011.01.14

    给WordPress添加Flash音乐播放器

    今天从自立博客那看到这个通过主题functi…

  6. 没有图片

    2011.03.20

    菠萝筐终于被驱逐出境!博客空间搬入美国!

    不知道为什么,菠萝的博客备案被无故注销了,于…

评论

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

返回顶部