HTML/CSS 一个非常漂亮的收藏列表样式

最新推荐文章于 2025-07-04 16:33:03 发布

原创最新推荐文章于 2025-07-04 16:33:03 发布 · 2.7w 阅读

54 ·

CC 4.0 BY-SA版权

文章标签：

#收藏列表 #样式 #收藏

CSS 同时被 2 个专栏收录

12 篇文章

订阅专栏

HTML

9 篇文章

订阅专栏

先上效果图:

代码部分一（HTML）

<!DOCTYPE html>
<html lang="en">
<head >
    <meta charset="UTF-8">
    <title>Title</title>

    <script type="text/javascript" src="js/jquery.min.js"></script>
    <link type="text/css" rel="stylesheet" href="css/collectList.css">
</head>
<body style="background-color: rgba(204,204,204,0.23)">


<div class="fav_list">
    <div data-v-357a65ed="" class="fav_list_box">
        <div  class="fav_list_title">
            <h3 class="fav_list_title_h3">我的收藏</h3>
            <div class="fav_num">
                共<span >5</span>条
            </div>
        </div>
        <div  class="my_fav_con">
            <div>
                <ul  class="my_fav_list">
                    <li class="my_fav_list_li" id="">
                        <a  class="my_fav_list_a" href="" target="_blank">
                            （电脑故障）2.电脑突然就找不到网络，上不了网 - qq_38959715的博客
                        </a>
                        <label class="my_fav_list_label">
                            <span >2019-04-08</span>
                            <a  class="cancel_fav"><em>取消</em></a>
                        </label>
                    </li>
                    <li class="my_fav_list_li" id="">
                        <a  class="my_fav_list_a" href="" target="_blank">
                            （电脑故障）2.电脑突然就找不到网络，上不了网 - qq_38959715的博客
                        </a>
                        <label class="my_fav_list_label">
                            <span >2019-04-08</span>
                            <a  class="cancel_fav"><em>取消</em></a>
                        </label>
                    </li>
                    <li class="my_fav_list_li" id="">
                        <a  class="my_fav_list_a" href="" target="_blank">
                            （电脑故障）2.电脑突然就找不到网络，上不了网 - qq_38959715的博客
                        </a>
                        <label class="my_fav_list_label">
                            <span >2019-04-08</span>
                            <a  class="cancel_fav"><em>取消</em></a>
                        </label>
                    </li>
                    <li class="my_fav_list_li" id="">
                        <a  class="my_fav_list_a" href="" target="_blank">
                            （电脑故障）2.电脑突然就找不到网络，上不了网 - qq_38959715的博客
                        </a>
                        <label class="my_fav_list_label">
                            <span >2019-04-08</span>
                            <a  class="cancel_fav"><em>取消</em></a>
                        </label>
                    </li>
                    <li class="my_fav_list_li" id="">
                        <a  class="my_fav_list_a" href="" target="_blank">
                            （电脑故障）2.电脑突然就找不到网络，上不了网 - qq_38959715的博客
                        </a>
                        <label class="my_fav_list_label">
                            <span >2019-04-08</span>
                            <a  class="cancel_fav"><em>取消</em></a>
                        </label>
                    </li>

                </ul> <!---->
            </div>
        </div>
    </div>
</div>

</body>
</html>

代码部分二（CSS）


li {
    text-align: -webkit-match-parent;
    display: list-item;
}

.fav_list{
    min-height: 95%;
    padding: 0 32px 30px;
    margin-top: 50px;
    margin-right: 50px;
    margin-left: 200px;
    background-color: #fff;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,.05);
}
.fav_list_box{
    box-sizing: border-box;
    display: block;
    overflow: hidden;
    zoom: 1;
}
.fav_list_title{
    height: 90px;
    line-height: 90px;
    /*border-bottom: 1px solid #e0e0e0;*/
    display: block;
}
.fav_list_title_h3{
    display : inline;
}
.fav_num{
    font-size: 14px;
    color: #4d4d4d;
    margin-top: 30px;
    float: right;
}
.my_fav_con{
    display: block;
}
.my_fav_list{
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline;
    border: 0;
    display: block;
    overflow: hidden;
    zoom: 1;
}
.my_fav_list_li{
    padding: 16px 0;
    font-size: 0;
    border-top: 1px solid #e0e0e0;
    list-style: none;
}
.my_fav_list_a{
    width: 78%;
    line-height: 24px;
    font-size: 16px;
    vertical-align: middle;
    color: #4d4d4d;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    overflow: hidden;
    cursor: pointer;
}
.my_fav_list_label{
    margin-left: 10%;
    font-size: 16px;
    vertical-align: middle;
    display: inline-block;
}
.my_fav_list_label span{
    color: #ccc;
    margin-right: 15px;
    vertical-align: middle;
    display: inline-block;
}
.cancel_fav{
    font-style: normal;
    color: #999;
    vertical-align: middle;
    cursor: pointer;
    display: inline-block;
}
.my_fav_list_a:hover{
    color: red;
}

jquery.min.js 不想下载的直接去这里复制代码 -> https://blog.youkuaiyun.com/qq_38959715/article/details/89513843

贴到你自己创建js文件里（其实也不需要）