CSS实操三，运用浮动和定位实现照片墙效果

凡梦_leo

已于 2023-06-28 16:33:46 修改

阅读量837

点赞数 1

分类专栏： CSS 文章标签： css 前端笔记 html5 html python css3

于 2023-06-28 16:25:54 首次发布

本文链接：https://blog.csdn.net/qq_55006020/article/details/131439639

版权

CSS 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

照片墙分析：

1，不同的美女图片堆叠的顺序不同，所以需要用定位里面的z-index

2，超出容器的部分隐藏了，所以需要格外给容器设置一下

3，每个美女的图片摆放的位置不同，需要用到定位然后摆放他们位置

4，图片的位置不同，也运用一下浮动和清楚浮动，以免影响后续内容

5，图片边框做了优化

6，图片整体大小做了优化。

7，不同的小姐姐图片角度不同，所以我们需要transform：rotate（角度deg）去调整

8，当鼠标悬停到每个照片上面，该照片就全部显示

具体效果图如下：

实现的具体代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实现照片墙效果</title>

<!--     transform: rotate(-10deg);  里面的数字用来更改图片方向-->
    <style>
        .box{
            /*居中*/
            margin: 0 auto;
            width: 1200px;
            /*设置了高度 解决了浮动堆叠*/
            height: 800px;
            background-color: pink;
            /*大容器相对定位*/
            position: relative;
            z-index: 1;
        /*!*    清楚浮动，解决大容器堆叠*!*/
        /*    overflow: hidden;*/
        /*    虽然设置了高度，还是清理一下浮动保险一点*/
            clear: both;
            /*在大容器里面设置超出部分被隐藏*/
            overflow: hidden;
        }
        .box img{
            /*设置图片大小*/
            width: 400px;
            border: 10px solid white;
            /*你们还是一个个绝对定位吧*/
            position: absolute;
            float: left;
        /*    给边框倒角一下*/
            border-radius: 5%;
        }
        /*设置一下当鼠标放置在照片上面的效果*/
        .box img:hover{
            z-index: 100;
        }

        .img1{
            /*设置图片的倾斜角度*/
            transform: rotate(-45deg);
            top: 70px;
            left: 20px;
            z-index: 2;
        }
        .img2{
            /*设置图片的倾斜角度*/
            transform: rotate(45deg);
            top: 70px;
            right: 20px;
            z-index: 3;
        }
        .img3{
            /*设置图片的倾斜角度*/
            transform: rotate(10deg);
            top: 70px;
            right: 300px;
            z-index: 4;
        }
        .img4{
            /*设置图片的倾斜角度*/
            transform: rotate(45deg);
            top: 400px;
            left: 50px;
            z-index: 5;
        }
        .img5{
            /*设置图片的倾斜角度*/
            transform: rotate(45deg);
            bottom: 20px;
            right: 100px;
            z-index: 6;
        }
        .img6{
            /*设置图片的倾斜角度*/
            transform: rotate(0deg);
            top: 300px;
            left:300px;
            z-index: 7;
        }

    </style>


</head>
<body>
<div class="box">
    <img class="img1" src="image1/1.jpeg" alt="美女">
    <img class="img2" src="image1/2.jpeg" alt="美女">
    <img class="img3" src="image1/9.jpeg" alt="美女">
    <img class="img4" src="image1/10.jpeg" alt="美女">
    <img class="img5" src="image1/8.jpg" alt="美女">
    <img class="img6" src="image1/6.webp" alt="美女">
</div>
<p>我是后续内容,主要用来检查是否受到了浮动影响</p>




</body>
</html>

凡梦_leo

关注

1
点赞
踩
12

收藏

觉得还不错? 一键收藏
1
评论
CSS实操三，运用浮动和定位实现照片墙效果

7，不同的小姐姐图片角度不同，所以我们需要transform：rotate（角度deg）去调整。1，不同的美女图片堆叠的顺序不同，所以需要用定位里面的z-index。3，每个美女的图片摆放的位置不同，需要用到定位然后摆放他们位置。4，图片的位置不同，也运用一下浮动和清楚浮动，以免影响后续内容。2，超出容器的部分隐藏了，所以需要格外给容器设置一下。6，图片整体大小做了优化。5，图片边框做了优化。
复制链接

扫一扫