博客列表 >基本布局练习

基本布局练习

HeartofSunny的博客
HeartofSunny的博客原创
2018年03月27日 15:39:04708浏览

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style type="text/css">
        .box{
                width:100%;
            height: 60px;
            background-color: gray;
            margin:0 auto;
        }
        .box1{
            width: 1000px;
            height: 650px;
            margin: 0px auto;
        }
        .box2{
            width: 200px;
            height: 650px;
            background-color: lightblue;
            float: left;
        }
        .box3{
            width: 600px;
            height: 650px;
            background-color: lightyellow;
            float: left;
        }
        .box4{
            width: 200px;
            height: 650px;
            background-color: lightgreen;
            margin-left:800px;
        }
        .box5{
                width:100%;
            height: 60px;
            background-color: gray;
            margin:0 auto;
        }
    </style>
</head>
<body>
    <div>
        <div class="box">
            
        </div>
        <div class="box1">
            <div class="box2">
                
            </div>
            <div class="box3">
                
            </div>
            <div class="box4"> 
                
            </div>
        </div>
        <div class="box5">
            
        </div>
    </div>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议