2021/8/11-CSDN博客

本文链接：https://blog.csdn.net/m0_60354811/article/details/119602897

昨天下午在刷b站的时候，看到一个css响应式的排行榜，挺好看的也挺有趣的，自己模仿着敲了一下，稍微修改了一些地方。

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style type="text/css">
           *{
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
list-style: none;
}
body{
background-color: #30336b;
min-height: 100vh;
display: flex;
align-items: center;
}
.Q{
display: flex;
flex-wrap: wrap;
justify-content: space-around;
width: min(1600px, 100%);
margin: auto;
}
.W{
flex: 1;
max-width: 360px;
background-color: #fff;
margin: 20px 10px;
text-align: center;
cursor: pointer;
overflow: hidden;
color: #2d2d2d;
transition: .3s linear;
}
.W-header{
background-color: #0fbcf9;
display: inline-block;
color: #fff;
padding: 12px 30px;
border-radius: 0 0 20px 20px;
font-size: 16px;
text-transform: uppercase;
font-weight: 600;
transition: .4s linear;
}
.W:hover .W-header{
box-shadow: 0 0 0 26em #0fbcf9;
}
.E{
font-size: 70px;
color: #0fbcf9;
margin: 40px 0;
transition: .2s linear;
}
.E sup, .E span{
font-size: 22px;
font-weight: 700;
}
.W:hover ,.W:hover .E{
color: #fff;
}
.W li{
font-size: 16px;
padding: 10px 0;
text-transform: uppercase;
}
.order-btn{
display: inline-block;
margin-bottom: 40px;
margin-top: 80px;
border: 2px solid #0fbcf9;
color: #0fbcf9;
padding: 18px 40px;
border-radius: 8px;
text-transform: uppercase;
font-weight: 500;
transition: .3s linear;
}
.order-btn:hover{
background-color: #0fbcf9;
color: #fff;
}
@media screen and (max-width:1100px){
.W{
flex: 50%;
}
       </style>
   </head>
   <body>
       <div class="Q">
<div class="W">
<h3 class="W-header">唐家三少</h3>
<div class="E"><sup></sup><span>排名：NO.5</span></div>
<ul>
<li><strong>斗罗大陆V重生唐三 </strong> </li>
<li><strong>票数</strong>40W</li>
<li><strong>总推荐数</strong> 159W</li>
<li><strong>周推荐数</strong> 40W</li>
<li><strong>下载量</strong> 50W</li>
</ul>
<a href="#" class="order-btn">收藏or关注</a>
</div>
<div class="W">
<h3 class="W-header">耳根</h3>
<div class="E"><sup></sup><span>排名：NO.4</span></div>
<ul>
<li><strong>三寸人间</strong> </li>
<li><strong>票数</strong>45W </li>
<li><strong>总推荐数</strong> 180W</li>
<li><strong>周推荐数</strong> 49W</li>
<li><strong>下载量</strong>60W</li>
</ul>
<a href="#" class="order-btn">收藏or关注</a>
</div>
<div class="W">
<h3 class="W-header">辰东</h3>
<div class="E"><sup></sup><span>排名:NO.3</span></div>
<ul>
<li><strong>圣墟</strong> </li>
<li><strong>票数</strong>55W </li>
<li><strong>总推荐数</strong> 210W</li>
<li><strong>推荐数</strong> 55W</li>
<li><strong>下载量</strong> 66W</li>
</ul>
<a href="#" class="order-btn">收藏or关注</a>
</div>
<div class="W">
<h3 class="W-header">卖报小郎君</h3>
<div class="E"><sup></sup><span>排名:NO.2</span></div>
<ul>
<li><strong>大奉打更人</strong> </li>
<li><strong>票数</strong> 65W</li>
<li><strong>总推荐数</strong>240W</li>
<li><strong>推荐数</strong> 60W</li>
<li><strong>下载量</strong> 70W</li>
</ul>
<a href="#" class="order-btn">收藏or关注</a>
</div>
<div class="W">
<h3 class="W-header">爱潜水的乌贼</h3>
<div class="E"><sup></sup><span>排名:NO.1</span></div>
<ul>
<li><strong>诡秘之主</strong> </li>
<li><strong>票数</strong> 75W</li>
<li><strong>总推荐数</strong>280W</li>
<li><strong>推荐数</strong> 80W</li>
<li><strong>下载量</strong> 90W</li>
</ul>
<a href="#" class="order-btn">收藏or关注</a>
</div>


</div>
   </body>
</html>