« 上一篇下一篇 »

Zblog中相关文章两栏横排方法

过年这些天学了一些CSS,也用CSS做了一个网站,现在修改博客的主题已经相对比较轻松了。于是抽时间把Zblog中的相关文章和友情链接的单栏竖排改成了现在的两栏横排,相比之下感觉即节省了空间也美观了许多。

在Zblog中的相关文章主要用的<li class=”msgarticle”></li>,如果想实现双栏横排,那么只需要对li和li a进行手术即可。让竖排文章横排关键用到的是:float:left(right),用好这个基本就能实现横排效果了。但要注意的是用到float的class或id必须跟width或hight,下面秦爱把自己对msgarticle的更改列到下面供大家研究。

li.msgarticle  /*对li进行定义*/

{

float:left;  /*向左浮动*/

width:695px;  /*li的宽度为695像素*/

color:#000;  /*字体颜色为#000*/

line-height:150%;  /*设置行高*/

padding:5px 0 10px 30px;  /*距上边为5像素,距右边为0像素,距下边为10像素,距左边为30像素*/

margin:0;  /*外边距为0*/

border-bottom:1px dotted #000;  /*li的底部有点状的下划线*/

}

li.msgarticle a  /*对li中的链接文字进行定义*/

{

text-decoration:underline;  /*链接带下划线*/

width:330px;  /*li中的链接宽度为330像素*/

float:left;  /*向左浮动,正常应该只在li或li a中定义一个浮动就可以,可是秦爱网志却不可以,不知为什么*/

}

由于秦爱刚开始自己写CSS,代码可能复杂了一些或者笨了一点儿,但不妨碍两栏横排的实现,经秦爱测试,秦爱网志的相关文章与友情链接在FirefoxOperaIE6中表现正常。最后提醒一下的是,如果在你的Zblog中出现重叠问题可在相应的class中使用clear:both;

上面就是秦爱在Zblog中实现相关文章两栏横排的CSS方法,当然如果你直接使用表格来做就会更容易一些,但这就有些不符合XHTML的标准了吧。如果有不太清楚的,可以在评论中提出,我们共同研究。