郁闷吧 微信小程序 4188479 63242849 39070147 130690866
还没有任何记录...

博彩评级专注于网页素材下载,提供网站模板、网页设计、ps素材、图片素材等,服务于【个人站长】【网页设计师】和【web开发从业者】的代码素材与设计素材网站。

博彩评级提供网页素材下载、网站模板
这一切都是免费的!
当前位置:博彩评级 > div+css > css教程 >

HTML+CSS文章列表模板代码块

来源:博彩评级 作者: 博彩评级 日期:2009-10-16 人气:
CSS技巧:HTML+CSS文章列表模板(HTML+CSS代码块),本站原创代码块, 此文章列表带有标题、更多链接,标题前带有背景小图标,列表为 [栏目名]文章标题 日期 格式,列表带有背景小图标。

本文地址:http://www.qqydc.com/html+css/htmlcssjq/121.html
文章摘要:HTML+CSS文章列表模板代码块,稚拙氩气半段,滔天罪行监工一座。

HTML+CSS文章列表模板HTML+CSS代码块),本站原创代码块,自行做适当的简化或者添加。
此文章列表带有标题、更多链接,标题前带有背景小图标,列表为 [栏目名]文章标题 日期 格式,列表带有背景小图标。

下载此代码)(查看演示
HTML代码如下:
<dl class="list_dl">
<dt><b>这里是标题</b><a href="#" class="more">>>更多</a></dt>
<dd>
<ul>
<li><span>09-07-07</span><a href="#" class="link1">[栏目标题]</a> <a href="#">关于进一步加强原材料工业管</a></li>
<li><span>09-07-07</span><a href="#" class="link1">[栏目标题]</a> <a href="#">关于进一步加强原材料工业管</a></li>
<li><span>09-07-07</span><a href="#" class="link1">[栏目标题]</a> <a href="#">关于进一步加强原材料工业管</a></li>
<li><span>09-07-07</span><a href="#" class="link1">[栏目标题]</a> <a href="#">关于进一步加强原材料工业管</a></li>
<li><span>09-07-07</span><a href="#" class="link1">[栏目标题]</a> <a href="#">关于进一步加强原材料工业管</a></li>
</ul>
</dd>
</dl>

 样式表如下:
<style>
ul,li,ol,dl,dt,dd{
 padding:0px;
 margin:0px;
 list-style-type: none;
}
a{ text-decoration: none;}
.list_dl{
 width:100%;
 height:auto;
 display:block;
 overflow:hidden;
 margin-bottom:8px;
 font-size:10pt;
}
.list_dl dt{
 width:100%;
 height:24px;
 margin-bottom:1px;
 background-color:#003366;
 border-bottom-width: 2px;
 border-bottom-style: solid;
 border-bottom-color: #FF9933;
 background-image: url(images/right_tit.gif);
 background-repeat:repeat-x;
 background-position: right top;
}
.list_dl dt b{float:left;
 width:240px;
 height:24px;
 line-height:24px;
 display:block;
 color:#FFFFFF;
 margin-left:12px;}
.list_dl dt a{
 width:5em;
 height:23px;
 display:block;
 line-height:23px;
 margin-top:1px;
 color:#FFFFFF;
 float:right;
 text-align:right;
 padding-right:10px;}
.list_dl dt a.more{
 color:#C1CEDB;}
.list_dl dt a.more:hover{
color:#fff;
}
.list_dl dd{
display:block;
margin-top:4px;
clear:both;}
.list_dl ul li{
 text-align:left;
 text-indent: 1.3em;
 line-height:220%;
 border-bottom-width: 1px;
 border-bottom-style: dashed;
 border-bottom-color: #CCCCCC;
 background-image: url(images/list_ico.gif);
 background-repeat:no-repeat;
 background-position: 4px center;
}
a.link1{color:#797979;}
.list_dl ul li span{
 float:right;
 color:#9B9B9B;
 margin-right:7px;
}
</style>

本文链接:HTML+CSS文章列表模板代码块http://www.qqydc.com/html+css/htmlcssjq/121.html

HTML+CSS文章列表模板代码块由博彩评级收集整理,博彩评级:您可以自由传播,请主动带上本文链接

博彩评级就是免费分享,觉得有用就多来支持一下,没有能帮到您,懒人也只能表示遗憾,希望有一天能帮到您。

(责任编辑:博彩评级)