奇乐网 - 草根博客网站

html+纯css做的一个漂亮的物流信息图

寻梦xunm 170 0

特别声明:文章多为网络转载,资源使用一般不提供任何帮助,特殊资源除外,如有侵权请联系!

html+纯css做的一个漂亮的物流信息图

HTML代码

<div class="package-info">
    <ul class="package-status">
        <li class="package-status-list">
            <i class="icon-package-qs"></i>
            <div class="status-title">qs</div>
            <div class="status-details">广东东莞物流广东东莞物流广东东莞物流广东东莞物流广东东莞物流</div>
            <div class="status-time">2019.3.13</div>
        </li>
        <li class="package-status-list">
            <i class="icon-package-ps"></i>
            <div class="status-title">ps</div>
            <div class="status-details">广东东莞物流广东东莞物流广东东莞物流广东东莞物流广东东莞物流</div>
            <div class="status-time">2019.3.13</div>
        </li>
        <li class="package-status-list">
            <i class="icon-package-ys"></i>
            <div class="status-title">运输</div>
            <div class="status-details">广东东莞物流广东东莞物流广东东莞物流广东东莞物流广东东莞物流</div>
            <div class="status-time">2019.3.13</div>
        </li>
        <li class="package-status-list">
            <span></span>
            <div class="status-details">广东东莞物流广东东莞物流广东东莞物流广东东莞物流广东东莞物流</div>
            <div class="status-time">2019.3.13</div>
        </li>
        <li class="package-status-list">
            <span></span>
            <div class="status-details">广东东莞物流广东东莞物流广东东莞物流广东东莞物流广东东莞物流</div>
            <div class="status-time">2019.3.13</div>
        </li>
        <li class="package-status-list">
            <span></span>
            <div class="status-details">广东东莞物流广东东莞物流广东东莞物流广东东莞物流广东东莞物流</div>
            <div class="status-time">2019.3.13</div>
        </li>
        <li class="package-status-list">
            <span></span>
            <div class="status-details">广东东莞物流广东东莞物流广东东莞物流广东东莞物流广东东莞物流</div>
            <div class="status-time">2019.3.13</div>
        </li>
        <li class="package-status-list">
            <i class="icon-package-lj"></i>
            <div class="status-title">已揽件</div>
            <div class="status-details">广东东莞物流广东东莞物流广东东莞物流广东东莞物流广东东莞物流</div>
            <div class="status-time">2019.3.13</div>
        </li>
        <li class="package-status-list">
            <i class="icon-package-fh"></i>
            <div class="status-title">已发货</div>
            <div class="status-details">广东东莞物流广东东莞物流广东东莞物流广东东莞物流广东东莞物流</div>
            <div class="status-time">2019.3.13</div>
        </li>
    </ul>
</div>

CSS代码

* {
    margin:0;
    padding:0;
}
ul {
    list-style:none;
}
.package-info {
    margin:10px 14px 0;
    border-radius:10px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
}
ul.package-status {
    width:100%;
}
ul.package-status li.package-status-list {
    color:#666;
    font-size:12px;
    border-left:1px solid #eee;
    padding-left:25px;
    position:relative;
    padding-bottom:26px;
}
ul.package-status li.package-status-list:last-child {
    border:0;
}
ul.package-status li .status-title {
    font-size:14px;
}
ul.package-status li .status-details {
    padding:4px 0;
    line-height:22px;
}
ul.package-status li.package-status-list i {
    width:24px;
    height:24px;
    display:inline-block;
    position:absolute;
    left:-12px;
    border-radius:50%;
}
ul.package-status li.package-status-list i.icon-package-fh {
    background:url(http://www.jq22.com/img/cs/500x500-1.png) no-repeat center;
    background-size:100%;
}
ul.package-status li.package-status-list i.icon-package-lj {
    background:url(http://www.jq22.com/img/cs/500x500-2.png) no-repeat center;
    background-size:100%;
}
ul.package-status li.package-status-list i.icon-package-ys {
    background:url(http://www.jq22.com/img/cs/500x500-3.png) no-repeat center;
    background-size:100%;
}
ul.package-status li.package-status-list i.icon-package-ps {
    background:url(http://www.jq22.com/img/cs/500x500-4.png) no-repeat center;
    background-size:100%;
}
ul.package-status li.package-status-list i.icon-package-qs {
    background:url(http://www.jq22.com/img/cs/500x500-5.png) no-repeat center;
    background-size:100%;
}
ul.package-status li.package-status-list span {
    width:8px;
    height:8px;
    display:inline-block;
    position:absolute;
    left:-5px;
    top:8px;
    background:#eee;
    border-radius:50%;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
}

火狐截图_2019-04-07T11-46-02.414Z.png

评论列表 (已有0条评论)

消灭零回复

发表评论 (已有0条评论)