zoukankan html css js c++ java

007.前端开发知识，前端基础CSS（2020-01-28）

一、布局

一列固定宽度且居中                              两列左窄右宽型                                通栏平均分布型

1、一列固定宽度且居中布局
<body>
    .top+.banner+.main+.footer  按Tab键，得到下框中代码

    <div class="top"></div>
    <div class="banner"></div>
    <div class="main"></div>
    <div class="footer"></div>

</body>

2、两列左窄右宽型布局
<body>
　　.top+.banner+(.main>.left+.right)+.footer  按Tab键，得到下框中代码

    <div class="top"></div>
    <div class="banner"></div>
    <div class="main">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="footer"></div>

</body>

完整代码

/* 1、一列固定宽度且居中布局  */
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .box {  /*把各div重复代码抽取出来*/
        width: 900px;
        background-color: #eee;
        border: 1px dashed #ccc;
        margin: 0 auto;
    }
    .top {
        height: 80px;    
    }
    .banner {
        height: 120px;
        margin: 5px auto;
    }
    .main {
        height: 500px;
    }
    .footer {
        height: 100px;
        margin: 5px auto 0;  /*上5px,左右居中,下是0px*/
    }
    </style>
</head>
<body>
    <div class="top box">top</div>
    <div class="banner box">banner</div>
    <div class="main box"></div>
    <div class="footer box"></div>
</body>
</html>

----------------------------------------

查看全文

相关阅读:
读书笔记五
 读书笔记四
 读书笔记3（Teamwork）
读书笔记二（合格的软件工程师）
读书笔记1（软件 = 程序 + 工程）
关于使用Java开发Mis系统
 课堂动手动脑
 Quartz学习
 把数据库中取出的DataTable转换成一个对象或者对象列表
 SAE上使用cron定时发微博

原文地址：https://www.cnblogs.com/hzjdpawn/p/12237602.html