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

先上效果图:

收藏列表

 

 

 

代码部分一（HTML）

    
    

    
    





    

        

            
我的收藏
            

                共5条
            
        
        

            

                

                    

                        
                            （电脑故障）2.电脑突然就找不到网络，上不了网 - qq_38959715的博客
                        
                        
                            2019-04-08
                            取消
                        
                    
                    

                        
                            （电脑故障）2.电脑突然就找不到网络，上不了网 - qq_38959715的博客
                        
                        
                            2019-04-08
                            取消
                        
                    
                    

                        
                            （电脑故障）2.电脑突然就找不到网络，上不了网 - qq_38959715的博客
                        
                        
                            2019-04-08
                            取消
                        
                    
                    

                        
                            （电脑故障）2.电脑突然就找不到网络，上不了网 - qq_38959715的博客
                        
                        
                            2019-04-08
                            取消
                        
                    
                    

                        
                            （电脑故障）2.电脑突然就找不到网络，上不了网 - qq_38959715的博客
                        
                        
                            2019-04-08
                            取消
                        
                    

                
 
            
        
    

 

代码部分二（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.csdn.net/qq_38959715/article/details/89513843

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