bootstrap之三个不一样大小图片并列+滑动效果

最新推荐文章于 2023-10-10 22:30:00 发布

鲸鱼姐

最新推荐文章于 2023-10-10 22:30:00 发布

阅读量2.2k

点赞数

分类专栏： bootstrap

本文链接：https://blog.csdn.net/zhaolulu916/article/details/103009807

版权

bootstrap 专栏收录该内容

42 篇文章 6 订阅

订阅专栏

效果：将三个不一样大小的图片并列显示，当鼠标滑动到图片的时候，出现边框

技术要点：

1. 图片大小变为一样大小 .queyeicon{width:200px;height:200px;}

2.滑动出现边框 hover{ border:2px solid #d9edf7;}

3.背景图片拉伸显示 background-size:cover;

需要源码，请加微信号，发送bootstrap101，免费获取此文章源码。

1. html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="bootstrap.min.css">
    <link rel="stylesheet" href="app5.css">
</head>
<body>
<div class="fivepage">
    <div class="fivepage-bg" id="fivepage">
        <div class="container">
            <div class="footertext">
                <h1>手动操作一遍，学的更快</h1>
            </div>
            <div class="footerbtncenter">
                <div class="row"> 
                    <div class="col-md-4">
                         <a href="#">
                            <img src="image/1.png" class="footerbtn queyeicon">
                    </a> 
                    </div>
                    <div class="col-md-4">
                            <a href="#">
                               <img src="image/2.png" class="footerbtn queyeicon">
                             </a> 
                    </div>
                    <div class="col-md-4">
                            <a href="#">
                               <img src="image/3.png" class="footerbtn queyeicon">
                             </a> 
                    </div>
                </div>
            </div>
            <div class="footertextbtn">
                <button type="button" class="btn btn-success btn-lg" style="font-size:25px">
                  点击一下
                </button>
                <p class="footertextbtn-text">
                   <H3>每天进步一点点</H3>
                </p>
            </div>
        </div>
    </div>
</div>
</body>
</html>

2. app.css

.fivepage-bg{
    height:750px;
    width:100%;
    position: absolute;
    background-position: center center;
    background-size:cover;
}

#fivepage{
    background-image: url("image/4.png");
}

.footertext{
    margin-top: 55px;
    width:100%;
    color:#ffffff;
    font-size: 20px;
    text-align: center;
}

.footerbtncenter{
    margin-top:100px;
    text-align: center;
}

.queyeicon{
    width:200px;
    height:200px;
}

.queyeicon:hover{
    border:2px solid #d9edf7;
}

.footertextbtn{
    margin-top:50px;
    width:100%;
    text-align: center;
}

.footertextbtn-text{
    margin-top:20px;
    color:#000000;
}

鲸鱼姐

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
bootstrap之三个不一样大小图片并列+滑动效果

效果：将三个不一样大小的图片并列显示，当鼠标滑动到图片的时候，出现边框技术要点：1. 图片大小变为一样大小.queyeicon{width:200px;height:200px;}2.滑动出现边框 hover{border:2px solid #d9edf7;}3.背景图片拉伸显示 background-size:cover;需要源码，请加微信号，发送bootstrap1...
复制链接

扫一扫

专栏目录