«

盒子的基本操作

MitSeek 发布于 阅读：11 CSS 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .main{
                width: 700px;
                border: 1px solid red;
                padding: 50px;
                overflow:auto;/* 清除子元素浮动 */
                background:#ff3bdd;
                color: white;
                margin: 0 auto;
            }
            hr{
                border: 2px solid white;
            }
            img{
                width: 300px;
            }
            h2{
                text-align: center;
            }   
            .box1{
                float: left;
                margin: 50px 23px;
                background: #2380ff;
                outline: 8px #2aff1c dashed;/* 轮廓线 */
                background: -o-linear-gradient(bottom right,red,#fffa86);
                background: linear-gradient(to bottom right ,red,#fffb46);
            }
        </style>
    </head>
    <body>
        <div class="main">
            <h2>美女团员</h1>
            <hr />
            <div class="box1">
                <img src="02.jpg" alt="" />
                <h2>美女</h2>
            </div>
            <div class="box1">
                <img src="02.jpg" alt="" />
                <h2>美女</h2>
            </div>
            <div class="box1">
                <img src="02.jpg" alt="" />
                <h2>美女</h2>
            </div>
            <div class="box1">
                <img src="02.jpg" alt="" />
                <h2>美女</h2>
            </div>
        </div>
    </body>
</html>

CSS