简单的网页编辑：盒子模型

最新推荐文章于 2024-03-26 10:40:56 发布

波西塔塔Y

最新推荐文章于 2024-03-26 10:40:56 发布

阅读量708

点赞数 1

分类专栏：网页设计文章标签： html+css

本文链接：https://blog.csdn.net/u012881559/article/details/73350751

版权

网页设计专栏收录该内容

10 篇文章 0 订阅

订阅专栏

这里写图片描述

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    <style type="text/css">
        .a{
            margin: 50px;
            border: 1px solid #8A2BE2;
            width: 1000px;
            height: 700px;
            background-image: url(img/1.jpg);
            background-attachment: scroll;      
            background-position: bottom center;
            background-repeat: no-repeat;
            background-size: cover;
        }
        .a1{
            border: 1px solid #00FFFF;
            width: 1000px;
            height: 130px;
            margin-top:100px ;
        }
        .a11{
            border: 1px solid #00FFFF;
            width: 500px;
            height: auto;
            text-align: end;
            float: left;
        }
        .a12{
            float: right;
            margin-right:50px ;
            height: auto;
        }
        .b1{
            border: 1px solid #00FFFF;
            width: 1000px;
            height: 110px;
            margin-top:10px ;
        }
        .b11{
            border: 1px solid #00FFFF;
            width: 200px;
            height: 100px;
            margin-top:10px ;
            float: left;
        }
        .b12{
            border: 1px solid #00FFFF;
            width: 200px;
            height: 100px;
            margin-top:10px ;
            float: left;
        }

    </style>
    </head>
    <body  >
        <div class="a" >    
            <div class="a1">
                <div class="a11">
                    <h2>Jerry</h2>
                </div>
                <div class="a12">
                    <img src="img/3.jpg"/>
                </div>
            </div>

            <div class="b1">
                <div class="b11">
                    qqqq<br />
                    qqqq<br />
                    qqqq<br />
                </div>
                <div class="b12">
                    qqq<br />
                    qqqq<br />
                    qqqq<br />
                </div>
            </div>

            <div class="b1">
                    qqq<br />
                    qqqq<br />
                    qqqq<br />
            </div>
            <div class="b1">
                    qqq<br />
                    qqqq<br />
                    qqqq<br />
            </div>
        </div>  


    </body>
</html>