学习完成CSS布局(左右浮动) 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>学习完成布局</title>
        <style type="text/css">
            #kaishi{
                width: 980px;      /* width宽度*/
                background: gray;                
            }
            #header{
                height: 200px;      /*height高度*/
                background: red;
            }
            #main{
                height: 600px;
                background: chartreuse;
            }
            #lside{
                width: 700px;
                float: left;          /*浮动左*/
                height: 600px;
                background: blue;
            }
            #rside{
                width: 300px;
                float: right;       /*浮动右*/
                height: 600px;
                background: coral;
            }
            #footer{
                height: 100px;
                background: darkgoldenrod;
            }
        </style>
    </head>
    <body>
        <div id="kaishi">            
            <div id="header"></div>
            <div id="main">    
                <div id="lside"></div>
                <div id="rside "></div>
            </div>
            <div id="footer"></div>
        </div>
    </body>
</html>

 

posted @ 2017-01-12 11:50  玻璃外的风景  阅读(915)  评论(0)  编辑  收藏  举报