css div布局示例1（head-main-footer） 

很简单的文档流布局

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        body{
            margin:0;
        }
        /*头部开始*/
        #head{
            height:200px;
            background-color: pink;
        }
        #top{
            height:50px;
            background-color: blue;

        }
        #logo{
            height:100px;
            background-color: green;
        }
        #menu{
            height:50px;
            background-color: yellow;
        }
        #top_content_left{
            width:100px;            
            height:100%;
            float:left;        
            background-color: red;
        }
        #top_content_right{
            width:100px;
            height:100%;
            float:right;        
            background-color: red;            
        }
        #logo_content_left{
            height:100%;
            background-color: pink;
            width:250px;
            float:left;
        }
        #logo_content_right{
            height:100%;
            background-color: pink;
            width:400px;
            margin-left: 300px;
        }
        /*头部结束*/

        /* 内容开始 */
        #main{
            height:700px;
            background-color: gray;
        }
        #main_content_flash{
            height:200px;
            width:100%;
            background-color: green;
        }
        #main_content_iframe{
            height:500px;
            width:100%;
            background-color: yellow;
        }
        /* 内容结束 */

        /* 脚部开始 */
        #footer{
            height:100px;
            background-color: black;
        }
        #footer_content_link{
            height:20px;
            width:100px;
            background-color: red;
        }
        #footer_content_links{
            height:30px;
            width:800px;
            background-color: blue;
        }
        #footer_content_powered{
            height:50px;
            width:100px;
            margin: 0 auto;
            background-color: pink;
        }
        
        /* 脚部结束 */
        .auto{
            width:1000px;
            margin:0 auto;
            height:100%;        
        }


    </style>
</head>
<body>
    <!--头部-->
    <div id="head">
        <div id="top">
            <div id="top_content" class="auto">
                
                <div id="top_content_left">网站简要说明</div>
                <div id="top_content_right">微信微博关注</div>
            
            </div>
        </div>
        <div id="logo">
            <div id="logo_content" class="auto">
                <div id="logo_content_left">网站logo</div>
                <div id="logo_content_right">搜索框</div>
            </div>

        </div>
        <div id="menu">
            <div id="menu_content" class="auto"></div>
        </div>
    </div>
    <!--头部-->

    <!--内容区-->
    <div id="main">
        <div id="main_content" class="auto">
            <div id="main_content_flash">flash或轮番图</div>
            <div id="main_content_iframe">商品iframe窗口，图片库的方式来完成剩余的工作即可</div>
        </div>
    </div>
    <!--内容区-->

    <!--脚部-->
    <div id="footer">
        <div id="footer_content" class="auto">
            <div id="footer_content_link">友情链接</div>
            <div id="footer_content_links">友情链接们</div>
            <div id="footer_content_powered" >版权+ICP 备案</div>
            
        </div>
    </div>
    <!--脚部-->
</body>
</html>

 

posted @ 2018-05-07 22:39  cl94  阅读(1183)  评论(0)    收藏  举报