bootstrap带悬浮阴影的响应式自适应卡片列表效果代码-html代码-BFW代码库

代码语言：html

所属分类：响应式

代码描述：bootstrap带悬浮阴影的响应式自适应卡片列表效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />
    <title>BFW NEW PAGE</title>
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.3.3.4.css">
    <style>
        html {font-size:100%;overflow-y:scroll;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;text-rendering:optimizelegibility;}
        *,*:before,*:after {-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
        body,h3,p {margin:0;padding:0;}
        body {font:normal 1em/1.8  sans-serif,PingFang SC,Lantinghei SC,Microsoft Yahei,Hiragino Sans GB,Microsoft Sans Serif,WenQuanYi Micro Hei,sans;}
        img {border:0;}
        a {text-decoration:none;}
        a:link {}
        a:visited {}
        a:hover {text-decoration:none;}
        a:active {}
        h3 {font-family:PingFang SC,Verdana,Helvetica Neue,Microsoft Yahei,Hiragino Sans GB,Microsoft Sans Serif,WenQuanYi Micro Hei,sans-serif;font-size:100%;color:#6b7386;line-height:1.35;}
        img {max-width:100%;}

        a{color:#6b7386;}
        a:hover{color:#ff3636;}

        body{background:#f1f5f8;color:#6b7386;}

       .part {
           margin: 20px;
       }
        @media screen and (max-width:991px){
        .part .tt{top:55px!important;}
        .part .tt a{padding-top:5px;}
        }
        .part{background:#fff;margin-bottom:24px;}
        .part .tt {padding:20px;line-height:16px;border-bottom: 1px solid #f1f4f9;background: #fff;z-index: 1;color:#6b7386;font-size:18px;font-weight:400;}
        .part .tt a{display:inline-block;float:right;color:#6b7386;font-size:12px;font-weight:400;}
        .part .items{padding:20px;}
        .part .item{position:relative;}
        .part .item .link .fa{position:absolute;right: 30px;top: 30px;color: #6b7386;font-size: 16px;border: 1px solid #6b7386;border-radius: 50%;width: 18px;height: 18px;text-align: center;padding-left: 2px;opacity:.6;}
        .part .item .link:hover .fa{border: 1px solid #aaa;background:#eee;}
        .part .item .a{transition: all .32s ease-in-out;display:block;width:100%;padding:26px 8%;box-sizing:border-box;}
        .part .item .a:hover{/*background:#f8fbfc;*/box-shadow: 0px 5px 28px 0px rgba(65, 106, 123, 0.2);border-radius: 5px;}
        .part .item .a img{box-shadow: 0 0px 1px 0 rgba(0,0,0,.2);float:left;width:32px;height:32px;border-radius:100%}
        .part .item .a h3{max-width: 68%;font-weight: normal;margin-left:40px;color:#6b7386;font-size:16px;height:21px;line-height:21px;margin-bottom:8px;margin-top:3px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
        .part .item .a p{margin-left:41px;color:#abb0bd;font-size:12px;height:3em;line-height:1.5em;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
        .part .item .a:hover h3{opacity:1;}
        .part .item .a:hover p{color:#abb0bd}
     
        @media (max-width:1199px){    
        .part .item .a{padding:12px 8px}
        .part .item .link .fa{right: 20px;top: 20px;}
        }
        @media (max-width:991px){
        .part .item .a{padding:14px 18px}
        }
        @media (max-width:767px){
        .part .items{padding:15px}
        .part .item .a{padding:12px 0}
        .part .item .link .fa{display:none;}
        .part .tt{padding:15px;border-bottom: 1px solid #eee;}
        }
    </style>
</head>

<body>
    <div>
        <div class="part" id="cate2" data-title="站长常用" style="position: relative;">
            <div style="display: none; width: 1220px; height: 57px; margin: 0px; float: none;"></div>
            <p class="tt sticky"> <strong>站长常用</strong> <a title="更多站长常用" href="">更多+</a> </p>
            <div class="items">
                <div class="row">

                    <div class="col-xs-6 col-sm-4 col-md-3">
                        <div class="item"> <a class="link" target="_blank" href="javascript:;" rel="nofollow"><i class="autoleft fa fa-angle-right" title="直达网站"></i></a>
                            <a class="a" href="" title="js特效网" target="_blank"> <img src="//repo.bfw.wiki/bfwrepo/icon/600048614f343.png" alt="js特效网" title="js特效网">
                                <h3>js特效网</h3>
                                <p>js特效网提供:jquery特效,css3动画,网页特效代码,广告代码,javascript特效,js特效,文字特效等网页特效素材免费下载。...</p>
                            </a>
                        </div>
                    </div>

                    <div class="col-xs-6 col-sm-4 col-md-3">
                        <div class="item"> <a class="link" target="_blank" href="javascript:;" rel="nofollow"><i class="autoleft fa fa-angle-right" title="直达网站"></i></a>
                            <a class="a" href="" title="js特效网" target="_blank"> <img src="//repo.bfw.wiki/bfwrepo/icon/600048614f343.png" alt="js特效网" title="js特效网">
                                <h3>js特效网</h3>
                                <p>js特效网提供:jquery特效,css3动画,网页特效代码,广告代码,javascript特效,js特效,文字特效等网页特效素材免费下载。...</p>
                            </a>
                        </div>
                    </div>
                    <div class="col-xs-6 col-sm-4 col-md-3">
                        <div class="item"> <a class="link" target="_blank" href="javascript:;" rel="nofollow"><i class="autoleft fa fa-angle-right" title="直达网站"></i></a>
                            <a class="a" href="" title="js.........完整代码请登录后点击上方下载按钮下载查看