zoukankan      html  css  js  c++  java
  • 上下左右中布局

    <!DOCTYPE html>  
    <html>  
    <head>  
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
        <title>上下左右中布局</title>  
        <style type="text/css">
            #wrap{  
                max-1200px;  
                margin:0 auto;  
            }  
            #header{  
                margin:20px;  
                height:80px;  
                border:solid 1px #0000FF;  
            }  
            #container{  
                position:relative;  
                margin:20px;  
                height:400px;  
            }  
            #left_side{  
                position:absolute;  
                top:0px;  
                left:0px;  
                border:solid 1px #0000FF;  
                170px;  
                height:100%;  
            }  
            #content{  
                margin:0px 190px 0px 190px;  
                border:solid 1px #0000FF;  
                height:100%;  
            }  
            #right_side{  
                position:absolute;  
                top:0px;  
                right:0px;  
                border:solid 1px #0000FF;  
                170px;  
                height:100%;  
            }  
            #footer{  
                margin:20px;  
                height:80px;  
                border:solid 1px #0000FF;  
            }    
        </style>
    </head>  
    <body>  
        <form id="form1" runat="server">  
        <div id="wrap">  
            <div id="header">header</div>  
            <div id="container">  
                <div id="left_side">left_side</div>  
                <div id="content">content</div>  
                <div id="right_side">right-side</div>  
            </div>  
            <div id="footer">footer</div>  
        </div>  
        </form>  
    </body>  
    </html>




    备注:欢迎加入web前端求职招聘qq群:668352707

  • 相关阅读:
    LeetCode 225. 用队列实现栈 做题笔记
    杨辉三角
    字母图形
    01字符串
    圆的面积
    饮料和啤酒
    进制转换
    从今天起 复习算法
    乘法群
    Paillier同态加密的介绍以及c++实现
  • 原文地址:https://www.cnblogs.com/xutongbao/p/9924941.html
Copyright © 2011-2022 走看看