上下左右中布局

最新推荐文章于 2023-10-30 20:10:04 发布

徐同保

最新推荐文章于 2023-10-30 20:10:04 发布

阅读量1.2k

点赞数 1

分类专栏： web前端前端技术分享文章标签： css 布局

本文链接：https://blog.csdn.net/xutongbao/article/details/78626227

版权

web前端同时被 2 个专栏收录

735 篇文章 15 订阅

订阅专栏

前端技术分享

251 篇文章 3 订阅

订阅专栏

<!DOCTYPE html>  
<html>  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>上下左右中布局</title>  
    <style type="text/css">
        #wrap{  
            max-width: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;  
            width: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;  
            width: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

徐同保

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
上下左右中布局

&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;title&gt;上下左右中布局&lt;/title&gt; &lt;
复制链接

扫一扫