css3之制作个性照片墙

最新推荐文章于 2023-03-27 21:34:37 发布

云之前端

最新推荐文章于 2023-03-27 21:34:37 发布

阅读量466

点赞数 1

分类专栏：学习总结文章标签： css3照片墙 rotate()应用结构伪类选择器应用

本文链接：https://blog.csdn.net/qq_44586361/article/details/87860273

版权

学习总结专栏收录该内容

36 篇文章 0 订阅

订阅专栏

在学习了css3之后，是不是觉得css3的功能竟然如此强大，话不多说，下面我就给大家讲讲如何利用css3制作一个个性化的照片墙。
需要用到的知识：
rotate()方法
transform:rotate(度数)
度数为正，表示元素相对原点中心顺时针旋转；度数为负，则表示元素相对原点中心进行逆时针旋转。
结构伪类选择器：
E：first-child 选择父元素的第一个子元素
E：last-child 选择父元素的最后一个子元素
E：nth-child(n) 选择父元素下的第n个元素或奇偶元素，n的值为数字，odd,even
代码如下：

<!DOCTYPE html>
<html>
<head>
	<title></title>
<style>
#div1{position:relative;width:800px;height:500px;margin:0 auto;border:10px groove rgb(240,235,213);background-color:rgb(255,192,203);}
#div1 img{position:absolute;width:180px;height:160px;padding:10px;background-color: white;}
#div1 img:first-child{left:100px;top: 60px;-webkit-transform:rotate(30deg);}
#div1 img:nth-child(2){left:300px;top:60px;-webkit-transform:rotate(-30deg);}
#div1 img:nth-child(3)
        {
            left:480px; top:60px; -webkit-transform:rotate(40deg);
        }
        #div1 img:nth-child(4)
        {
            left:100px; top:280px; -webkit-transform:rotate(-30deg);
        }
        #div1 img:nth-child(5)
        {
            left:300px; top:280px; -webkit-transform:rotate(0);
        }
        #div1 img:last-child
        {
            left:480px; top:280px;-webkit-transform:rotate(30deg);
        }
</style>
</head>
<body>
<div id="div1">
<img src="C:\Users\asus\Desktop\2/1.jpg"/>
<img src="C:\Users\asus\Desktop\2/2.png"/>
<img src="C:\Users\asus\Desktop\2/3.jpg"/>
<img src="C:\Users\asus\Desktop\2/4.jpg"/>
<img src="C:\Users\asus\Desktop\2/5.jpg"/>
<img src="C:\Users\asus\Desktop\2/6.jpeg"/>
</div>
</body>
</html>

效果图如下：
在这里插入图片描述

云之前端

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
css3之制作个性照片墙

在学习了css3之后，是不是觉得css3的功能竟然如此强大，话不多说，下面我就给大家讲讲如何利用css3制作一个个性化的照片墙。需要用到的知识：rotate()方法transform:rotate(度数)度数为正，表示元素相对原点中心顺时针旋转；度数为负，则表示元素相对原点中心进行逆时针旋转。结构伪类选择器：E：first-child 选择父元素的第一个子元素E：last-child...
复制链接

扫一扫