html 中div布局的简单使用

2025-05-31 10:43:47

1、观察图片构成。总共十一个板块。首先要有一个大的div包含所有，背景色等。

2、.background{ background-color: #008000; height: 800px; width: 420px; margin: 0 auto; }

3、.a1{ height: 80px; width: 200px; background: #fff; margin-left: 50px; margin-top: 10px; margin-right: 10px; float: left;

4、.a2{height: 80px; width: 100px; background-color: #fff; margin-top: 10px; float: left; } .a3{ height: 80px; width: 310px; background-color: #FFFFFF; margin-left: 50px; margin-top: 10px; float: left; } .a4{ height: 80px; width: 310px; background-color: #FFFFFF; margin-left: 50px; float: left; margin-top: 10px;

5、.a5{ height: 80px; width: 150px; background: #fff; marg足毂忍珩in-left: 50px; margin-top: 10px; margin-right: 10px; float: left; } .a6{height: 80px; width: 150px; background-color: #fff; margin-top: 10px; float: left; } .a7{height: 50px; width: 310px; background-color: #fff; margin-top: 10px; margin-left: 50px; float: left; } .a8{ height: 80px; width: 150px; background: #fff; margin-left: 50px; margin-top: 10px; margin-right: 10px; float: left; }

6、.a9{height: 80px; width: 150px; backgroun蟠校盯昂d-color: #fff; margin-top: 10px; float: left; } .a10{height: 80px; width: 310px; background-color: #fff; margin-top: 10px; float: left; margin-left: 50px; } .a11{height: 80px; width: 310px; background-color: #fff; margin-top: 10px; float: left; margin-left: 50px; margin-bottom: 10px; } </style>

7、</head> <body> <div >挢旗扦渌; <div class="background"> <div class="a1">1</div> <div class="a2">2</div> <div class="a3">3</div> <div class="a4">4</div> <div class="a5">5</div> <div class="a6"> 6</div> <div class="a7">7</div> <div class="a8">8</div> <div class="a9">9</div> <div class="a10">10</div> <div class="a11">11</div> </div> </div> </body></html>

声明：本网站引用、摘录或转载内容仅供网站访问者交流或参考，不代表本站立场，如存在版权或非法内容，请联系站长删除，联系邮箱：site.kefu@qq.com。