Demo9：简单晒单效果

最新推荐文章于 2021-11-24 17:34:24 发布

ljl_web

最新推荐文章于 2021-11-24 17:34:24 发布

阅读量487

点赞数

分类专栏： HTML入门 Demo 文章标签：晒单

本文链接：https://blog.csdn.net/ljl_web/article/details/50756633

版权

HTML入门同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

Demo

13 篇文章 0 订阅

订阅专栏

简单晒单效果的实现

效果展示

这里写图片描述

代码实现

<!DOCTYPE html>
<html>
 <head>
  <title> new document </title>
  <meta charset="utf-8" />
  <style>
    body{
        font:12px Arial,"microsoft yahei";
        color:#666;
    }
    #discuss,div.lie,#discuss_content,#discuss_datas{
        width:1000px;
    }
    div.lie{
        height:30px;
        border:1px solid #ddd;
        border-top:2px solid #999;
        background:#f7f7f7;
    }
    div.lie a{
        color:#005aa0;
        text-decoration:none;
        float: left;
        width: 100px;
        height: 30px;
        text-align: center;
        line-height: 30px;
    }
    a{
        color:#005aa0;
        text-decoration:none;
    }
    #discuss .lie a.current{
        border:1px solid #ddd;
        border-bottom:none;
        border-top:2px solid #e4393c;
        background:#fff;
        margin-top:-6px;
        height:35px;
        line-height:35px;
        color:#e4393c;
    }
    #discuss_content{
        border-bottom:1px solid #ddd;
    }
    #discuss_datas{
        border-spacing:2px;
    }
    #discuss_datas td{
        text-align:center;
        padding:6px 0px;
        border-bottom:1px dotted #dedede;
    }
    #discuss_datas tr.header td{
        font-weight:bold;
        border-bottom:1px solid #dedede;
    }
    #discuss_datas td.col1{
        width:620px;
        text-align:left;
    }
    #discuss_datas td.col2{width:70px;}
    #discuss_datas td.col3{width:80px;}
    b.topic{
        padding-left:20px;
        padding-bottom:5px;
        background:url(bg.png) no-repeat;
        margin-right:5px;
    }
    b.shai{
        background-position:-110px -220px;
    }
    b.lun{
        background-position:-152px -220px;
    }
  </style>
 </head>

 <body>
    <div id="discuss">
        <div class="lie">
            <a href="#">网友讨论圈</a>
            <a href="#" class="current">晒单贴</a>
            <a href="#">谈论贴</a>
            <a href="#">问答帖</a>
            <a href="#">圈子帖</a>
        </div>
        <div id="discuss_content">
            <table id="discuss_datas">
                <tr class="header">
                    <td class="col1">主题</td>
                    <td class="col2">回复/浏览</td>
                    <td class="col3">作者</td>
                    <td class="col4">时间</td>
                </tr>
                <tbody>
                    <tr>
                        <td class="col1">
                            <b class="topic shai"></b>
                            <a href="#">东西不错，非常合适</a>
                        </td>
                        <td>24/100</td>
                        <td>
                            <a href="#">越少</a>
                        </td>
                        <td>2015-12-22 10:24:37</td>
                    </tr>
                    <tr>
                        <td class="col1">
                            <b class="topic lun"></b>
                            <a href="#">颜色不是太好</a>
                        </td>
                        <td>35/111</td>
                        <td>
                            <a href="#">撒上的飞</a>
                        </td>
                        <td>2015-12-15 20:01:05</td>
                    </tr>
                    <tr>
                        <td class="col1">
                            <b class="topic shai"></b>
                            <a href="#">穿在我身上刚刚好</a>
                        </td>
                        <td>12/44</td>
                        <td>
                            <a href="#">冬天不眠</a>
                        </td>
                        <td>2015-12-10 12:24:11</td>
                    </tr>
                    <tr>
                        <td class="col1">
                            <b class="topic lun"></b>
                            <a href="#">这就是卖家秀与买家秀的区别</a>
                        </td>
                        <td>112/1000</td>
                        <td>
                            <a href="#">阿卜杜</a>
                        </td>
                        <td>2015-12-07 14:12:56</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
 </body>
</html>

ljl_web

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Demo9：简单晒单效果

简单晒单效果的实现效果展示代码实现<!DOCTYPE html><html> <head> <title> new document </title> <meta charset="utf-8" /> <style> body{ font:12px Arial,"microsoft yahei"; color:#666; } #
复制链接

扫一扫