繁体中文】 【设为首页】 【加入收藏

用css实现新闻列表中完美的标题截取

2007-12-02 01:52:28 作者:dream 来源:dream 浏览次数:0 网友评论 0

新闻标题的长度太长,要用 css代码直接解决,不但简单,而且效果比用程序实现的更完美,因为用程序控制,只能固定截取多少个字符,而用css的话可以自己适应列表的宽度.
源码如下:
<!DOCTYPE html PUBLIC "-/ ...

新闻标题的长度太长,要用 css代码直接解决,不但简单,而且效果比用程序实现的更完美,因为用程序控制,只能固定截取多少个字符,而用css的话可以自己适应列表的宽度.

源码如下:

<!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>CSS_梦想资源库</title><style>
body{
 font: 12px/18px Verdana, Arial, Helvetica, sans-serif;
 background-color: #F8F8F8;
 color: #333;
}
a:link, a:visited{
 text-decoration: none;
 font-size: 12px;
 color: #333333;
}
a:hover{
 text-decoration: underline;
 color: #0066FF;
}
.content{
 float:left;
 width:40%;
 height:auto;
 border: 1px solid #ccc;
 background-color: #FFF;
}
.content ul{ padding:3px; padding-bottom:6px; margin:0; list-style:none;}
.content ul li{
 border-bottom: 1px solid #F0F0F0;
 height: 21px;
 overflow: hidden; /*首先设定列表的高度,然后用溢位隐藏*/
 line-height: 21px;/*字体行高最好要和列表高度一样或者大些*/
 background: url(images/dot.gif) no-repeat 0px 8px;
 padding-left: 10px;
}
.bar{
 color:#FFF;
 height:20px;
 font-weight:bold;
 background:#698FC7;
 text-indent: 15px;
 line-height: 20px;
 margin: 0px;
 padding: 0px;
 border: 3px double #698FC7;
}
.bar a:link ,.bar a:visited,.bar a:hover{
 color:#FFF;
 text-decoration: none;
}
#date{ float:right;}
</style>
</head>
<body>
<div class="content">
            <h2 class="bar"><a href="list?tid=7">梦想资源库,梦想的启点;</a></h2>
                 <ul>
 
                   <li><span id="date">[11-29]</span>[<a href=#>it</a>] <a href="http://www.dreampp.cn" title="http://www.dreampp.cn">梦想资源库,梦想的启点;梦想资源库,梦想的启点;梦想资源库,梦想的启点;梦想资源库,梦想的启点;梦想资源库,梦想的启点;梦想资源库,梦想的启点;梦想资源库,梦想的启点;梦想资源库,梦想的启点;梦想资源库,梦想的启点;梦想资源库,梦想的启点;</a></li>
                    <li><span id="date">[10-25]</span>[<a href="http://www.dreampp.cn/it">HTML</a>] <a href="http://www.dreampp.cn" title="发布可编辑评论补丁">发布可编辑评论补丁发布可编辑评论补丁发布可编辑评论补丁</a></li>
                    <li><span id="date">[10-11]</span>[<a href="http://www.dreampp.cn">PHP</a>] <a href="http://www.dreampp.cn" title="发布Phpwind论坛调用程序">发布Phpwind论坛调用程序</a></li>
 
                    <li><span id="date">[10-11]</span>[<a href="http://www.dreampp.cn">MYSQL</a>] <a href=# title="[更新]发布Discuz论坛调用程序">[更新]发布Discuz论坛调用程序发布Discuz论坛调用程序</a></li>
                    <li><span id="date">[10-06]</span>[<a href="http://www.dreampp.cn">ORACLE</a>] <a href="http://www.dreampp.cn" title="最新更新:刚刚修正几个程序的BUG">最新更新:刚刚修正几个程序的BUG几个程序的BUG</a></li>
                </ul>
</div>
</body>

[错误报告] [推荐] [收藏] [打印] [关闭] [返回顶部]

  • 验证码:

最新图片文章

最新文章