图片定位 简单排列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.photo_List {
margin: 50px auto;
position: relative;
}
ul {
list-style-type: none;
position: absolute;
left: 50%;
}
ul li {
border: 1px solid grey;
border-radius: 5%;
margin-top: 1px;
}
ul li img {
padding: 5px;
}
ul li:nth-child(1) {
transform: rotate(5deg);
}
ul li:nth-child(2) {
transform: rotate(-5deg);
}
ul li:nth-child(3) {
transform-origin: 0 0;
transform: rotate(5deg);
}
ul li:nth-child(4) {
transform-origin: center center;
transform: rotate(-3deg);
}
.box {
width: 200px;
height: 100px;
display: inline-block;
background-color: orange;
box-shadow: 5px 5px 3px;
}
.box2 {
position: absolute;
top: 50px;
left: -300px;
}
.box1 {
position: absolute;
top: 50px;
right: -300px;
}
</style>
</head>
<body>
<div class="photo_List">
<ul>
<li><img src="images/Cappuccino.jpg" /></li>
<li><img src="images/Espresso.jpg" /></li>
<li><img src="images/Latte.jpg" /> </li>
<li><img src="images/Mocha.jpg" /> </li>
<li class="box1 box"></li>
<li class="box2 box"></li>
</ul>
</div>
</body>
</html>
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/8aec7ae47baaa38245e96195cbd81a53.png)
鼠标悬停放大图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.photoList {
width: 550px;
height: 150px;
background-color: rebeccapurple;
margin: 100px auto;
}
ul {
list-style-type: none;
background-color: red;
width: 510px;
margin: 10px auto;
}
ul li {
float: left;
margin: 20px 10px;
transition: .6s;
}
.photoList {
background-color: blueviolet;
}
ul li:hover {
transform: scale(1.4);
}
</style>
</head>
<body>
<div class="photoList">
<ul>
<li><img src="images/small1.jpg" /></li>
<li><img src="images/small2.jpg" /></li>
<li><img src="images/small3.jpg" /></li>
</ul>
</div>
</body>
</html>
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/beb8729b266206240df7c52324d61729.png)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/65752bc0a4a618adac505847c3f9a985.png)