[组图]GetArticleList以div输出定义一行四列效果

作者:雅虎 来源:本站原创 点击数: 发布时间:2006年12月29日

  文章列表标签GetArticleList以div格式输出如何定义一行四列效果?如果四列的总宽度为720,应该怎样定义?是在上边基础上加呢,还是另写?

   这个解决方法请先参阅《CssNameA、 CssName1和 CssName2自定义CSS参数使用实例》篇文章看一下并理解相应输出效果,然后重点看修改五:显示方式为5(输出DIV式)这一段,下面我们重点以这一段为例解决这个的问题。

   在模板中您若定义了以下最新文章代码:


本站最新文章








                                                                     
      
        

        

   其中红色5为DIV输出方式;红色1是列数,即使这里您改成4,页面也不会出现您所需要的四列的效果,因为div输出格式并不受这个控制列数参数的影响。要想显示四列的效,您必需控制输出时每个div的宽度。

   例:以上面模板中的代码输出后,在前台页面源代码查看,可以看到以下代码:

前台网页代码:
     
       




                                                     
本站最新文章

           
class="LinkAbg01"> 固顶文章  class="LinkA" href="/Article/ShowArticle.asp?ArticleID=3241" title="[上海]都只要2000 三星飞利浦对轰17英寸液晶" target="_blank">[上海]都只要2000 三星飞利[3月27日]
class="LinkAbg02"> 推荐文章  class="LinkA" href="/Article/ShowArticle.asp?ArticleID=3270" title="Web2.0--新一波互联网大潮的到来" target="_blank">Web2.0--新一波互联网大[4月12日]

……

   请注意红色的部分,

class="LinkAbg01">、
class="LinkAbg02">表示这二个区块是受样式 LinkAbg01LinkAbg02所控制。假设您这里可允许文章显示的总宽度为720px,这时您应该定义 LinkAbg01LinkAbg02的宽度为720px的1/4或更小(宽度小于1/4是因为如果您在横向二个div区块中有间距时,要将间距考虑在内),这样当显示到第5个div区块时页面就会自动会换行以循环显示下一个四列……显示样式依此类推。蓝色的 class="LinkA" 是定义了有链接文字的a.样式名,您可以通过定义a.LinkA这样的CSS控制有链接文字的样式。
   即,在CSS定义中,您应该这样定义 LinkAbg01LinkAbg02的样式:

.LinkAbg01, .LinkAbg02 { width:180px; overflow:hidden; float:left;}

   完整的CSS样式定义为:

完整的CSS样式定义:
/* 请注意以下定义中,第12个参数 ShowType -----显示方式,1为普通样式,2为表格式,3为各项独立式,4为智能多列式,5为输出DIV,6为输出RSS ,以下的设置对2和3都会有效。*/
/* ******LinkA表示首页最新文章中带有链接的文字的风格样式,带下划线****** */
a.LinkA:link {color: #0000ff;text-decoration: underline;}
a.LinkA:visited {color: blue;text-decoration: underline;}
a.LinkA:hover{color: #ff0000;text-decoration: underline;}
a.LinkA:active {color: blue;text-decoration: underline;}

/* ******首页最新文章中间隔各行的风格样式,分奇数行与偶数行****** */
.LinkAbg01 /* --奇数行文章列表内容间隔颜色的定义1-- */
{
background:#E3F0FB;color:#F500D0;
}
.LinkAbg02 /* --偶数行栏目文章列表内容间隔颜色的定义2-- */
{
background:#F6FAFE;color:#ff0000;
}
.LinkAbg01, .LinkAbg02 { width:180px; overflow:hidden;float:left;}

   这里的“width:180px;”表示定义了class为LinkAbg01、LinkAbg02的宽度180px只能是小于或等于720px的1/4(这里的宽度根据您的实际情况进行调试与定义即可),以方便界面中显示四列循环效果。
   overflow:hidden;表示如果里面的文章标题超过了170px则隐藏,以防止标题过长而撑开超过170px(如果您仅仅要隐藏超过宽度的内容,也可以写成overflow-x:hidden;)
   float:left;表示使div区块对象浮在左边,不加此定义默认样式为单行排列,不是我们想要的效果(不加float:left;的效果见下图):

   好了,加上样式定义后,看一下前台浏览效果显示的效果:

  这时,已经实现了GetArticleList以div输出定义一行四列效果。但是若文章标题的字数没有很好控制,则会显示自动回行的状态。您可以进一步加上div样式的高度定义:

.LinkAbg01, .LinkAbg02 { width:180px; overflow:hidden;float:left; height:24px; line-height:24px;}

   加上高度定义后前台效果显示效果:

   这时,就能完美显示我们所要的效果了。增加的CSS定义中,height:24px; line-height:24px;是定义了一行div区块的高度及里面的行高为24px,您可以根据自己所需的效果进行设置:-)