思章老师

When your legs get tired, run with your heart.

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

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

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

    Discuz! X1 首页显示论坛的修改方法

    解决了Discuz! X1 UC后台应用通讯…

  2. 没有图片

    2011.01.14

    给WordPress的下载链接自动添加图片

    有时想让你的下载链接直接变成漂亮的图片按钮,…

  3. 没有图片

    2010.06.10

    Dreamweaver CS5开启WordPress代码提示功能

    Dreamweaver CS5是对动态语言的…

  4. 2016.01.24

    马拉生活第一天

    此文是记录我跑步生涯的第一天,以此鼓励,希望…

  5. 没有图片

    2011.01.10

    自定义WordPress登录页面Logo

    通常自己设计WordPress主题,很少把后…

  6. 2017.06.02

    让热爱运动从小扎根孩子们的心灵

    今天是六一儿童节,首先祝孩子们节日快乐,也祝…

评论

  • 1 评论
  1. G字头老大 2011.05.06 9:02下午

    请问如果想实现“相片堆叠”样式的图片边框效果,可以吗?

    回复
« 上一页 1 2
点击这里取消回复。

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

返回首页

avatar
客服小美
Powered by   萌芽科技

© 2009 思章老师Themed by WP盒子

返回顶部