教你 如何在首页文章标题成两排显示!(用css控制) 转

2008-7-31 chenmo 网站建设

因为帮助一个朋友解决这个问题,所以顺便发到论坛上来了
这个是我写的一个效果测试:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
.txList_2 {
    CLEAR: both;
    OVERFLOW: hidden;
    width: 360px;
    margin-top: 5px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
}
.txList_2 LI {
    FLOAT: left; MARGIN: 0px 3px 0px 7px; WIDTH: 170px; LINE-HEIGHT: 21px; HEIGHT: 21px
}

-->
</style>
</head>

<body><div class=txList_2 >
  <LI><A
  href="#">把一行变成标题两行标题
  </A></LI>
  <LI><A href="#"
  target=_blank>把一行变成标题两行标题</A> </LI>
  <LI><A
  href="#">把一行变成标题两行标题
  </A></LI>
  <LI><A
  href="#"
  target=_blank>把一行变成标题两行标题</A> </LI>
  <LI><A
  href="#">把一行变成标题两行标题
  </A></LI>
  <LI><A href="#"
  target=_blank>把一行变成标题两行标题</A> </LI>
  <LI><A
  href="#">把一行变成标题两行标题
  </A></LI>
  <LI><A href="#"
  target=_blank>把一行变成标题两行标题</A> </LI></div>
</body>
</html>

如果写成标签的形势是这样的

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
.txList_2 {
    CLEAR: both;
    OVERFLOW: hidden;
    width: 360px;
    margin-top: 5px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
}
.txList_2 LI {
    FLOAT: left; MARGIN: 0px 3px 0px 7px; WIDTH: 170px; LINE-HEIGHT: 21px; HEIGHT: 21px
}

-->
</style>
</head>

<body><!--#$array=$cms::thread("mid:1;num:10;digest:2");#-->
              <ul class="txList_2">
<!--#foreach($array as $val){#-->
                <li><a href="$val[url]" target="_blank" style="color:$val[titlecolor]">{@substrs($val[title],22)@}</a></li>
<!--#}#-->
              </ul>
</body>
</html>
说明这里框架的txList_2宽度是360,txList_2 LI 的宽度是170,txList_2的宽度是txList_2 LI 宽度的2倍多20,标题的字数决定txList_2 LI 的宽度比如说我每个标题有11个字,那么txList_2 LI 的宽度是170,如果是20个子呢?那要你自己去测试了,只要保持上面的公式就可以了。
num:10(标题条数)这个一定要是个双数,每行两个的话,10个标题就是5行。
 

Powered by emlog 湘ICP备13007859号 空间由景安网络赞助