zoukankan html css js c++ java

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>

查看全文

相关阅读:
HDU2303（数论）大整数求余+素数筛选
 2015 多校联赛 ——HDU5360（贪心+优先队列）
2015 多校联赛 ——HDU5363（快速幂）
2015 多校联赛 ——HDU5353（构造）
2015 多校联赛 ——HDU5348（搜索）
2015 多校联赛 ——HDU5350（huffman）
hibernate投影查询
 Hibernate中Criteria的完整用法
 mysql 常用查询语句记录
 ssh整合步骤整理

原文地址：https://www.cnblogs.com/cl94/p/9005452.html