html+css-CSDN博客

本文链接：https://blog.csdn.net/Chen16667492/article/details/78926181

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd

">
<html xmlns="http://www.w3.org/1999/xhtml

">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
*{ margin:0;
padding:0;
}
ul,li{ list-style:none;}
.clear:after{ content:"\200B";
display:block;
height:0;
clear:both;

}
.box{
padding:10px;
border:1px solid #000;
}
.big_pic{
width:220px;
height:220px;
background:#999;
float:left;
margin:5px 0;
}
.list li{
width:220px;
height:220px;
background:red;
float:left;
margin:5px 5px 0;
text-align:center;

}
p{
color:#fff;
text-align:center;
margin-top:30px;
}
.btn{
display:inline-block;
width:70px;
height:70px;
border-radius:50%;
background:rgba(0,0,0,.5);
margin-top:50px;
opacity:0;
transition:all 1s ease;
}
li:hover .btn{
opacity:1;
}
li:hover p{
color:blue;
}
</style>
</head>
<body>

<div class="box clear">
<div class="big_pic"><img src="img/4444.bmp" width="220px" height="220px"/></div>
<ul class="list clear">
<li><span class="btn"><img src="img/1.png" width="80px" height="80px"/></span><p>扬我不想说</p></li>
<li><span class="btn"><img src="img/11.png" width="80px" height="80px"/></span><p>奋我不想说</p></li>
<li><span class="btn"><img src="img/1111.bmp" width="80px" height="80px"/></span><p>我不想说</p></li>
<li><span class="btn"><img src="img/123.png" width="80px" height="80px"/></span><p>我不想说</p></li>
<li><span class="btn"><img src="img/2.jpg" width="80px" height="80px"/></span><p>我不想说</p></li>
<li><span class="btn"><img src="img/22222.bmp" width="80px" height="80px"/></span><p>我不想说</p></li>
</ul>
</div>

</body>
</html>