css设计页面-用户行为

最新推荐文章于 2021-10-09 09:23:16 发布

开发转测试

最新推荐文章于 2021-10-09 09:23:16 发布

阅读量295

点赞数

本文链接：https://blog.csdn.net/fulq1234/article/details/74011374

版权

用户行为效果图

源码

<!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>用户行为记录图</title>
    <style type="text/css">

        .fs-bhlist {
            position: relative;
            width:80%;
        }

        .fs-bhlist ul{
            padding:0 2px 0 5px;
        }
        .fs-bhlist li{
            list-style: none;
        }
        .bhBox{
            float:left;
        }
        .line{
            position:absolute;
            background: #dedede;
            height:2px;
            width:80%;
            top:120px;
         }
        .topbox{
            padding:0px;
            border:1px solid #e3e3e3;
            width:147px;
            height:97px;
            position:relative;
            border-radius:4px;

        }
        /*大三角*/
        .topbox:before{
            border:solid 12px transparent;
            border-top-color:#e3e3e3;
            content:" ";
            position:absolute;
            top:100%;
            left:58px;    /*20px-2px*/
        }
        /*小三角*/
        .topbox:after{
            border:solid 10px transparent;
            border-top-color:#fff;
            content:" ";
            position:absolute;
            top:100%;
            left:60px;    /*20px*/
        }

        .bottombox{
            padding:0px;
            border:1px solid #e3e3e3;
            width:147px;
            height:97px;
            position:relative;
            margin: 140px 70px 0 70px;
            border-radius:4px;

        }

        /*大三角*/
        .bottombox:before{
            border:solid 12px transparent;
            border-bottom-color:#e3e3e3;
            content:" ";
            position:absolute;
            top:-24px;
            left:58px;    /*20px-2px*/
        }
        /*小三角*/
        .bottombox:after{
            border:solid 10px transparent;
            border-bottom-color:#fff;
            content:" ";
            position:absolute;
            top:-20px;
            left:60px;    /*20px*/
        }
        /**实心圆点*/
        .topbox .circle {
            width: 10px;
            height:10px;
            background-color: #33cc00;
            -webkit-border-radius: 5px;
            margin-left:66px;
            margin-top:62px;
        }
        .bottombox .circle {
            width: 10px;
            height:10px;
            background-color: #33cc00;
            -webkit-border-radius: 5px;
            margin-left:66px;
            margin-top:-91px;
        }

    </style>
</head>

<body>

<div class="fs-bhlist">
    <div class="line">
    </div><!--一条线-->

    <div class="bhBox">
        <div class="topbox">
            <ul>
                <li>2016-5-5 12.15.25</li>
                <li>购买商品</li>
            </ul>
            <div class="circle"></div>
        </div>
    </div>

    <div class="bhBox">
    <div class="bottombox">
        <ul>
            <li>2016-5-5 12.15.25</li>
            <li>购买商品</li>
        </ul>
        <div class="circle"></div>
    </div>
    </div>


    <div class="bhBox">
        <div class="topbox">
            <ul>
                <li>2016-5-5 12.15.25</li>
                <li>购买商品</li>
            </ul>
            <div class="circle"></div>
        </div>
    </div>


    <div class="bhBox">
        <div class="bottombox">
            <ul>
                <li>2016-5-5 12.15.25</li>
                <li>购买商品</li>
            </ul>
            <div class="circle"></div>
        </div>
    </div>

</div>

</body>
</html>