简单粗暴的时间轴

最新推荐文章于 2022-03-10 08:08:06 发布

zhangxm 0104

最新推荐文章于 2022-03-10 08:08:06 发布

阅读量424

点赞数

分类专栏： css 时间轴插件

本文链接：https://blog.csdn.net/xmLove93/article/details/78460062

版权

css 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

时间轴插件

1 篇文章 0 订阅

订阅专栏

Code

.times {
    display: block;
    margin: 15px 0;
}
    .times ul {
        margin-left: 25px;
        border-left: 2px solid #ddd;
    }
        .times ul li {
            width: 100%;
            margin-left: -12px;
            line-height: 20px;
            font-weight: normal;
        }

            .times ul li span {
                padding-left: 7px;
                font-size: 14px;
                line-height: 20px;
                color: #555;
            }

            .times ul li p {
                padding-left: 30px;
                font-size: 14px;
                line-height: 10px;
            }
.TimeFish {
    display: inline-block;
    background-color: #fff;
    padding: 10px 0;
}

<div class="times">
                    <ul>
                        <li><div class="TimeFish"><img src="~/Images/assets/img/Nxin/鱼@2x.png" width="24" /></div><span>投喂药品</span><p>5包</p></li>
                        <li><div class="TimeFish"><img src="/Images/assets/img/Nxin/鱼@2x.png" width="24"  /></div><span>投喂饲料</span><p>400KG</p></li>
                        <li><div class="TimeFish"><img src="/Images/assets/img/Nxin/鱼@2x.png" width="24"  /></div><span>投喂鱼苗</span><p>1000000尾</p></li>
                    </ul>
                </div>