简介

页面布局是一个让人头大的问题，今天好好研究一下

参考页面

https://www.runoob.com/try/try.php?filename=tryhtml_layout_divs
https://blog.csdn.net/wkj001/article/details/102881080

code html

<!--
 * @Author: your name
 * @Date: 2020-04-09 11:54:13
 * @LastEditTime: 2020-04-09 14:57:39
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \incubator-echarts-4.7.0\learn\test.html
 -->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>页面布局</title>
        <link rel="stylesheet" type="text/css" href="testStyle.css" />
    </head>
    <body>
         <div class="container">
             <div class="box">
                <div class="header">
                    <span>header</span>
                </div>
                <div class="content">
                    <div class="content_menu">菜单</div>
                    <div class="content_body">body</div>
                    <div class="content_footer">footer</div>
                </div>
             </div>     
         </div>
    </body>
</html>

code css

.box{
    clear:both;
    width:auto;
    margin:0 auto;
    height: auto;
    text-align: center;
    font-size:0;
    /* line-height: 60px; */
}
.container{
    margin:0 auto;
}
.header{
    width:90%;
    /* height:30px; */
    height:30px;
    background: orange;
    margin: 0 auto;
    font-size: 14px;
}
.header span{
    display:block;
    text-align: center;
    line-height: 30px;
}
.content{
    position: relative;
    width:100%;
    margin:0 auto;
    font-size: 0;
}
.content_menu{
    /* position: relative; */
    width: 20%;
    height:480px;
    display: inline-flex;
    background-color: aqua;
    font-size: 14px;;
}
.content_body{
    /* position: relative; */
    width:70%;
    height:480px;
    background: olive;  
    display: inline-flex;  
    font-size: 14px;; 
    /* margin-left: 0;   */
}
.content_footer{
    position: relative;
    background: orangered;
    width:90%;
    margin: 0 auto;
    font-size: 14px;; 
}

posted on 2020-04-09 15:12 HDU李少帅阅读(320) 评论(0) 编辑收藏举报