Zblog中相关文章两栏横排方法 - 主题试发布 - ZBlogger社区,Dutory家...
来源:百度文库 编辑:神马文学网 时间:2024/10/06 23:50:57
在Zblog中的相关文章主要用的,如果想实现双栏横排,那么只需要对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,代码可能复杂了一些或者笨了一点儿,但不妨碍两栏横排的实现,经秦爱测试,秦爱网志的相关文章与友情链接在Firefox 、Opera 、IE6中表现正常。最后提醒一下的是,如果在你的Zblog中出现重叠问题可在相应的class中使用clear:both;
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,代码可能复杂了一些或者笨了一点儿,但不妨碍两栏横排的实现,经秦爱测试,秦爱网志的相关文章与友情链接在Firefox 、Opera 、IE6中表现正常。最后提醒一下的是,如果在你的Zblog中出现重叠问题可在相应的class中使用clear:both;