码迷,mamicode.com
首页 > 其他好文 > 详细

页面布局练习

时间:2020-04-09 15:31:47      阅读:50      评论:0      收藏:0      [点我收藏+]

标签:参考   char   lock   test   sheet   setting   position   tps   tail   

简介

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

参考页面

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;; 
}

页面布局练习

标签:参考   char   lock   test   sheet   setting   position   tps   tail   

原文地址:https://www.cnblogs.com/eat-too-much/p/12667108.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有 京ICP备13008772号-2
迷上了代码!