zoukankan      html  css  js  c++  java
  • css3图片响应式布局

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>Wsscat DEMO</title>
        </head>
    
        <body>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
        </body>
        <style>
            body {
                margin: 0;
                padding: 0;
            }
    
            .box {
                float: left;
                 30%;
                margin-top: 10px;
                margin-left: 2.5%;
                height: 0;
                padding-bottom: 33.98%;//或者padding-top
                background-color: #dbe0e4;
                background-image: url(1.jpg);//图片不要用标签,用这两个属性配合会更好控制图片缩放
                background-size: cover;
            }
        </style>
    </html>
  • 相关阅读:
    A
    B
    A
    A
    B
    C
    有趣的平方和的推导
    一篇写的非常好的匈牙利算法文章
    2014 UESTC Training for Data Structures G
    2014 UESTC Training for Data Structures H
  • 原文地址:https://www.cnblogs.com/luckyuns/p/6404815.html
Copyright © 2011-2022 走看看