beautify» blog» css» picture» wordpress»

在这个读图时代，图片以其简单的形式和丰富的内涵，可以吸引更多的眼球。

通过css，可以方便地为本来朴素的wordpress页面加上图片，增添一份生气。

效果如下：

 你知道左边的图片是怎样加上去的么？

1。css语法

要用到的css语法很简单

li {list-style-image:ulr();}

比如

<li style=”list-style-image:url(http://blog.kenbeyond.com/wp-content/themes/aquasoft/images/chat.gif);“> sample </li>

得到的效果如下：

• sample
• sample
• sample

当然，一般是在style设置放在样式表中，如style.css

另外，为了便于控制不同的区域使用的不同的背景图片，需要为不同区域添加层(div),并编上号，比如：

<div id=”comments”>[内容]</div>

然后在style.css中可以这样控制：

#comments li {

list-style-image:url(http://blog.kenbeyond.com/wp-content/themes/aquasoft/images/chat.gif);

}

2。图片

图片一般大小在10px~25px之间，也就是一倍字体高度或者2倍字体高度

有的时候，图片会略大，这时可以通过控制行距和纵向对齐方式来达到理想的效果，比如：

line-height:18pt;(选择一个你觉得适合的行高)

vertical-align:super;(可选项有sub,super,top,middle,baseline,bottom,text-bottom,text-top)

beautify blog css picture wordpress

This entry was posted on Thursday, July 20th, 2006 at 9:40 am and is filed under Blog. 2,847 Views You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.