知识 分享 互助 懒人建站

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

    懒人建站提供网页素材下载、网站模板
    知识 分享 互助!

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

    作者:佳明妈 来源:懒人建站 2009-10-16 人气:
    CSS技巧:HTML+CSS文章列表模板(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文章列表模板代码块由懒人建站收集整理,您可以自由传播,请主动带上本文链接

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

    HTML+CSS文章列表模板代码块-最新评论

    • 军魂大人 四川省 2019-09-22 03:22:16
      海尔不仅是中国人自己的品牌,更是全球化白电第一品牌