HTML DIV标签布局

这个代码是我学习制作网页时候在网上搜索的到的一篇文章,我也是第一次学,当我看到这个代码的时候首先想到的是创建文本然后复制,保存为test.html。打开先看看实现了怎么样的功能,边看网页边看代码,我相信你也能够轻松看懂。


<!DOCTYPE HTML>  

<html>  
<head>  
  
    <style type="text/css">  
        body{  
            margin: auto;  
            width: 800px;  
            #max-width: 100%;  
        }  
        .header{  
            width: 100%;  
            height:30px;  
            background-color: blue;  
        }  
        .content{  
            width:100%;  
            height: 100px;  
            background-color: #f8f8f8;  
        }  
        .content-left{  
            float:left;  
            height:100%;  
            width:100px;  
            background-color: yellow;  
        }  
        .content-mid{  
            height:100%;  
            float:left;  
            width:200px;  
            background-color: green;  
        }  
        .content-right{  
            height:100%;  
            float:right;  
            width:300px;  
            background-color: #167676;  
        }  
        .footer{  
            width: 100%;  
            height: 50px;  
            background-color: gray;  
        }  
    </style>  
</head>  
  
<body>  
    <div class="header">  
        I am Header  
    </div>  
  
  
    <div class="content">  
        <div class="content-left">  
            I am content left  
        </div>  
        <div class="content-mid">  
            I am content mid  
        </div>  
        <div class="content-right">  
            I am content right  
        </div>  
    </div>  
  
    <div class="footer">  
        I am footer  
    </div>  
</body>  
  

</html>  


效果演示如下:

HTML DIV标签布局_第1张图片

你可能感兴趣的:(HTML DIV标签布局)