当前位置 > it书童 > css > 正文
推荐小册
Java的Lambda表达式
Java的Lambda表达式

聊聊jvm
jvm调优

java异常处理
java异常处理机制

java拾遗
java知识点,java面试题

java多线程
java多线程入门

学习spring源码
如何阅读spring源码

仿 spring 自制框架
造轮子,模仿 spring 自制一个框架

SpringCloud
SpringCloud微服务入门

微服务商城
使用微服务搭建一个电商项目

SpringBoot
SpringBoot入门学习,SpringBoot是什么

css 页面布局应用

css it书童 2019-10-05 14:25:00 0赞 0踩 348阅读 0评论

布局思想

  • 表格布局思想:使用表格,将页面分割为若干区域:

纵向:就用表格的tr

横向:就用表格的td实现

层层分割:每个区块只考虑是“横向”还是“纵向”

表格布局思想,被抛弃的原因是:网页展示速度慢!非常慢!

  • div+浮动布局思想:

纵向:使用div,自然上下排列出来

横向:使用浮动div,并做好清除浮动工作(使浮动元素不影响后续元素)

层层分割:每个区块只考虑是“横向”还是“纵向”

纵向布局

若干div自然就实现的纵向布局(自然从上到下排列出来)

横向布局

若干div使用浮动,就横过来了。

注意清除浮动以使外层盒子有正常的高度(包住内层浮动盒子,并避免影响后续内容)。

整体布局

非常简单,就是“层层分割”:

  1. 确定当下要进行布局设计的区域范围(毫无疑问是矩形盒子,而且最初肯定是整个网页区域);

  2. 确定该区域按纵向布局还是横向布局,依此进行盒子样式设计;

  3. 对第2步中分割出来的“小区域”,继续用第2步的思路进行布局设计,以此类推,层层细分。

经典圣杯布局

所谓经典圣杯布局,就是一个网页最常见的布局需求,大致如下所示:

其中主要的布局实现其实是中间部分。中间部分也可能是2栏(或左或右)。两边的宽度是固定的,中间主体部分的宽度可以是固定的,也可以是可变的(根据需要而定)。

实现网页两栏典型布局效果。其中左边侧栏宽度固定(200px),右边主体栏宽度可变(最小600px)。

<style>
   .mainpage {
       border: 1px solid red;
       margin: 0 auto;
       width: 90%;
       min-width: 800px;
   }
    .box {
        border: 1px solid red;
        margin: 5px;
    }
    .box::after {
        content: "";
        display: block;
        clear: both;
    }
    .box > aside {
        background: yellowgreen;
        width: 200px;
        float: left;
        min-height: 300px;
    }
    .box > main {
        margin-left: 210px;
    }
    .box > main > .main {
        border: solid 1px blue;
        background: lightpink;
        min-height: 300px;
    }
</style>
<div class="mainpage">
    <div class="box">
        <aside>边栏</aside>
        <main>
            <div class="main">主体</div>
        </main>
    </div>
</div>

实现网页三栏典型布局效果。其中左边和右边侧栏宽度固定,中间主体栏宽度可变

<style>
   .mainpage {
       border: 1px solid red;
       margin: 0 auto;
       width: 90%;
       min-width: 800px;
   }
    .box {
        border: 1px solid skyblue;
    }
    .box::after {
        content: "";
        display: block;
        clear: both;
    }
    .box > .side_left {
        background: yellowgreen;
        width: 200px;
        float: left;
    }
   .box > .side_right {
       background: yellowgreen;
       width: 200px;
       float: right;
   }
    .box > main {
        margin-left: 210px;
        margin-right: 210px;
        background: gray;
    }
</style>
<div class="mainpage">
    <header>头部</header>
    <div class="box">
        <aside class="side_left">左边栏<br><br></aside>
        <aside class="side_right">右边栏<br><br></aside>
        <main>
            <div class="main">主体</div>
        </main>
    </div>
    <footer>底部</footer>
</div>
关于我
一个文科出身的程序员,追求做个有趣的人,传播有价值的知识,微信公众号主要分享读书思考心得,不会有代码类文章,非程序员的同学请放心订阅
转载须注明出处:https://www.itshutong.com/articles/312/css-page-layout-application