时间线

 

时间线

 

 

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<style>
    .content{
        margin-left: 20px;
    }
    .circledot{
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #70A0FF;
        border: 2px solid #d6ecff;
        transform: translateX(-50%);
    }
    .line{
        border-left: 1px solid red;
    }
</style>
<body>
<div class="content">
    <div class="line">
        <div class="circledot"></div>
        <div>123213</div>
        <div>97slkfj</div>
    </div>
    <div class="line">
        <div class="circledot"></div>
        <div>123213</div>
        <div>97slkfj</div>
        <div>123213</div>
    </div>
    <div class="circledot"></div>
</div>
</body>
</html>

 

上一篇:Vue中css自定义实现div层,并在右上角有个叉叉,模仿dialog


下一篇:4、css盒子模型