CSS——微信朋友圈图片风格实现方法

顺晟科技

2021-09-08 12:17:46

<!DOCTYPE html>  
<html lang="en">  
    <head>  
        <meta charset="utf-8">  
        <meta name="viewport" content="width=device-width,user-scalable=no,target-densitydpi=device-dpi" />  
        <style type="text/css">
            .figure-list{
              margin: 0;
              padding: 0;
            }
            .figure-list:after{
              content: "";
              display: block;
              clear: both;
              height: 0;
              overflow: hidden;
              visibility: hidden;
            }
            .figure-list li{
              list-style: none;
              float: left;
              width: 23.5%;
              margin: 0 2% 2% 0;
            }
            .figure-list figure{
                border: 1px solid #000;
              position: relative;
              width: ;
              height: 0;
              overflow: hidden;
              margin: 0;
              padding-bottom: ; /* 关键就在这里 */
              background-position: center;
              background-repeat: no-repeat;
              background-size: cover;
            }
            .figure-list figure a{
              display: block;
              position: absolute;
              width: ;
              top: 0;
              bottom: 0;
            }
</style>
<ul class="figure-list">
  <li>
    <figure style="background-image:url(1.png)">
      <a href="#"></a>
    </figure>
  </li>
  <li>
    <figure style="background-image:url(2.png)">
      <a href="#"></a>
    </figure>
  </li>
   <li>
    <figure style="background-image:url(3.png)">
      <a href="#"></a>
    </figure>
  </li>
  <li>
    <figure style="background-image:url(4.png)">
      <a href="#"></a>
    </figure>
  </li>

   <li>
    <figure style="background-image:url(5.png)">
      <a href="#"></a>
    </figure>
  </li>
  <li>
    <figure style="background-image:url(6.png)">
      <a href="#"></a>
    </figure>
  </li>
</ul>
</html>

上一篇：PHP动态压缩js css 下一篇：CSs3背景尺寸图片自适应

网站建设

Css

CSS——微信朋友圈图片风格实现方法