简单的响应式-信息介绍
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: #f5f5f5;
}
a {
color: #333;
text-decoration: none;
}
.all{
margin: 100px auto;
text-align: center;
}
.box1{
display: inline-block;
}
.box2{
display: inline-block;
}
.box {
width: 298px;
height: 365px;
display: inline-block;
background-color: #fff;
/* margin: 100px auto; */
}
.box:hover{
box-shadow: 0 5px 20px 5px rgba(0,0,0,.3);
}
.box img {
/* 让图片的宽度与父元素一样宽 */
width: 100%;
}
.box img:hover{
opacity: 0.5;
}
.review {
/* background-color: #fff; */
height: 70px;
font-size: 14px;
padding: 0 28px;
margin-top: 20px;
}
.appear {
font-size: 12px;
color: #666;
padding: 0 28px;
margin-top: 20px;
}
.info {
margin-top: 25px;
padding: 0 28px;
}
.info h4 {
display: inline-block;
font-weight: 400;
}
.info h4 a:hover {
color: #ff6667;
}
.info em {
font-style: normal;
color: #ebe4e0;
margin-left: 15px;
margin-right: 7px;
}
.info span {
color: #ff6667;
}
@media screen and (min-width:600px) and (max-width:1220px){
.box1{
display: block;
}
.box2{
display: block;
}
}
@media screen and (max-width:590px){
.box{
margin: 10px;
}
}
</style>
</head>
<body>
<div class="all">
<div class="box1">
<div class="box">
<a href="#"><img src="../images/1.jpg"></a>
<p class="review"><a href="#">超级玛丽，嘟嘟嘟，打败魔王，救公主。</a></p>
<div class="appear">已11738320次下载</div>
<div class="info">
<h4><a href="#">Super Mario超级玛丽</a></h4>
<em>|</em>
<span>32$</span>
</div>
</div>
<div class="box">
<a href="#"><img src="../images/2.jpg"></a>
<p class="review"><a href="#">超级玛丽，嘟嘟嘟，打败魔王，救公主。</a></p>
<div class="appear">已11738320次下载</div>
<div class="info">
<h4><a href="#">Super Mario超级玛丽</a></h4>
<em>|</em>
<span>32$</span>
</div>
</div>
</div>
<div class="box2">
<div class="box">
<a href="#"><img src="../images/3.jpg"></a>
<p class="review"><a href="#">超级玛丽，嘟嘟嘟，打败魔王，救公主。</a></p>
<div class="appear">已11738320次下载</div>
<div class="info">
<h4><a href="#">Super Mario超级玛丽</a></h4>
<em>|</em>
<span>32$</span>
</div>
</div>
<div class="box">
<a href="#"><img src="../images/4.jpg"></a>
<p class="review"><a href="#">超级玛丽，嘟嘟嘟，打败魔王，救公主。</a></p>
<div class="appear">已11738320次下载</div>
<div class="info">
<h4><a href="#">Super Mario超级玛丽</a></h4>
<em>|</em>
<span>32$</span>
</div>
</div>
</div>
</div>
</body>
</html>
