zoukankan      html  css  js  c++  java
  • CSDN文章列表的CSS实现

    CSDN文章的列表视图如下:


    看起来,还是挺好看的,本文用CSS实现该效果,实现后得效果如下:




    直接贴代码:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Table</title>
        <style>
            html,body,table{
                font-size: 12px;
                font-family: "宋体";
                text-align: center;
                MARGIN-RIGHT: auto;
                MARGIN-LEFT: auto;
            }
            .top{
                background: #48525e;
                height: 30px;
                color: #fff;
                padding-right: 20px;
                padding-top: 13px;
                font-family: Arial Unicode MS, Arial, sans-serif;
            }
            .top_links{
                text-align: right;
                font-size: 12px;
                 800px;
                MARGIN-RIGHT: auto;
                MARGIN-LEFT: auto;
            }
            a{
                color: #fff;
                text-decoration: none;
            }
            a:hover{
                cursor: pointer;
                font-weight: bold;
            }
            .top_logo{
                float: left;
                font-weight: bold;
                font-size: 15px;
                margin-left: 10px;
            }
            .box{
                margin:10px auto 10px auto;
                border: 1px solid #bfbfbf;
                 800px;
                text-align: center;
                font-size: 100pt;
                color:#3B5998 ;
                padding: 30px 0px;
                font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
            }
            table{
                 800px;
                border-collapse: collapse;
                border: none;
                color: #3B5998;
                text-align: center;
            }
            tr{
                border: none;
                border-top: 1px solid #bfbfbf;
            }
            tr:hover{
                background: #FFFFCC;
            }
            .trTitle{
                font-weight: bold;
                color:#000;
                border: none;
                border-bottom: 2px solid #bfbfbf;
            }
            .trTitle:hover{
                background: #fff;
            }
            .altitem{
                background: #eee;
            }
            .tdleft{
                text-align: left;
            }
            .tdleft:hover{
                cursor: pointer;
                text-decoration: underline;
            }
            span{
                color: #000;
            }
            .page_nav{
                padding-top: 8px;
                 800px;
                MARGIN-RIGHT: auto;
                MARGIN-LEFT: auto;
                text-align: center;
            }
            .page_num{
                border: 1px solid #dbe5ee;
                padding: 3px 8px;
                border-radius:3px;
            }
            .page_num:hover{
                cursor: pointer;
                text-decoration: underline;
            }
            .page_num_active{
                background: #07519a;
                color: #fff;
            }
        </style>
    </head>
    <body>
    <div>
        <div class="top">
            <div class="top_links">
                <div class="top_logo"><a href="www.csdn.com">CSDN</a></div>
                <a>首页</a> | <a>我的博客</a> | <a>联系我们</a>
            </div>
        </div>
        <div class="box">
            CSDN
        </div>
        <table cellpadding="9">
            <tbody>
                <tr class="trTitle">
                    <td class="tdleft">标题</td>
                    <td>状态</td>
                    <td>浏览</td>
                    <td>评价</td>
                </tr>
                <tr>
                    <td class="tdleft">Arcgis for Js之鼠标经过显示对象名的实现(2014-12-12 09:00)</td>
                    <td> </td>
                    <td>12</td>
                    <td>23</td>
                </tr>
                <tr class="altitem">
                    <td class="tdleft">Arcgis for Js之鼠标经过显示对象名的实现(2014-12-12 09:00)</td>
                    <td> </td>
                    <td>12</td>
                    <td>23</td>
                </tr>
                <tr>
                    <td class="tdleft">Arcgis for Js之鼠标经过显示对象名的实现(2014-12-12 09:00)</td>
                    <td> </td>
                    <td>12</td>
                    <td>23</td>
                </tr>
                <tr class="altitem">
                    <td class="tdleft">Arcgis for Js之鼠标经过显示对象名的实现(2014-12-12 09:00)</td>
                    <td> </td>
                    <td>12</td>
                    <td>23</td>
                </tr>
                <tr>
                    <td class="tdleft">Arcgis for Js之鼠标经过显示对象名的实现(2014-12-12 09:00)</td>
                    <td> </td>
                    <td>12</td>
                    <td>23</td>
                </tr>
                <tr class="altitem">
                    <td class="tdleft">Arcgis for Js之鼠标经过显示对象名的实现(2014-12-12 09:00)</td>
                    <td> </td>
                    <td>12</td>
                    <td>23</td>
                </tr>
                <tr>
                    <td class="tdleft">Arcgis for Js之鼠标经过显示对象名的实现(2014-12-12 09:00)</td>
                    <td> </td>
                    <td>12</td>
                    <td>23</td>
                </tr>
                <tr class="altitem">
                    <td class="tdleft">Arcgis for Js之鼠标经过显示对象名的实现(2014-12-12 09:00)</td>
                    <td> </td>
                    <td>12</td>
                    <td>23</td>
                </tr>
                <tr>
                    <td class="tdleft">Arcgis for Js之鼠标经过显示对象名的实现(2014-12-12 09:00)</td>
                    <td> </td>
                    <td>12</td>
                    <td>23</td>
                </tr>
                <tr class="altitem">
                    <td class="tdleft">Arcgis for Js之鼠标经过显示对象名的实现(2014-12-12 09:00)</td>
                    <td> </td>
                    <td>12</td>
                    <td>23</td>
                </tr>
                <tr>
                    <td class="tdleft">Arcgis for Js之鼠标经过显示对象名的实现(2014-12-12 09:00)</td>
                    <td> </td>
                    <td>12</td>
                    <td>23</td>
                </tr>
                <tr class="altitem">
                    <td class="tdleft">Arcgis for Js之鼠标经过显示对象名的实现(2014-12-12 09:00)</td>
                    <td> </td>
                    <td>12</td>
                    <td>23</td>
                </tr>
                <tr>
                    <td class="tdleft">Arcgis for Js之鼠标经过显示对象名的实现(2014-12-12 09:00)</td>
                    <td> </td>
                    <td>12</td>
                    <td>23</td>
                </tr>
                <tr class="altitem">
                    <td class="tdleft">Arcgis for Js之鼠标经过显示对象名的实现(2014-12-12 09:00)</td>
                    <td> </td>
                    <td>12</td>
                    <td>23</td>
                </tr>
                <tr>
                    <td class="tdleft">Arcgis for Js之鼠标经过显示对象名的实现(2014-12-12 09:00)</td>
                    <td> </td>
                    <td>12</td>
                    <td>23</td>
                </tr>
                <tr class="altitem">
                    <td class="tdleft">Arcgis for Js之鼠标经过显示对象名的实现(2014-12-12 09:00)</td>
                    <td> </td>
                    <td>12</td>
                    <td>23</td>
                </tr>
                <tr>
                    <td class="tdleft">Arcgis for Js之鼠标经过显示对象名的实现(2014-12-12 09:00)</td>
                    <td> </td>
                    <td>12</td>
                    <td>23</td>
                </tr>
            </tbody>
        </table>
        <div class="page_nav">
            <span>76条数据 共4页</span>
            <span>
                <span class="page_num">首页</span>
                <span class="page_num">上一页</span>
                <span class="page_num">1</span>
                <span class="page_num page_num_active">2</span>
                <span class="page_num">3</span>
                <span class="page_num">下一页</span>
                <span class="page_num">尾页</span>
            </span>
        </div>
    </div>
    </body>
    </html>

    有需要的可以直接去用,如有疑问联系:

    QQ:1004740957

  • 相关阅读:
    HashMap遍历的两种方式
    抽象类和接口的区别是什么
    “用户、组或角色'XXX'在当前数据库中已存在”问题
    FCKEditor在IE10下的不兼容问题解决方法
    ADODB.Connection 错误 '800a0e7a' 未找到提供程序。该程序可能未正确安装。解决方法!
    ASP.NET中Url重写后,打不开真正的Html页面
    运用正则表达式在Asp中过滤Html标签代码的四种不同方法
    静态页分页功能js代码
    .NET生成静态页面的方案总结
    禁止ViewState的3种解决方法
  • 原文地址:https://www.cnblogs.com/lzugis/p/6539866.html
Copyright © 2011-2022 走看看