四种布局

  • （1）、左右两侧，左侧固定宽度200px，

右侧自适应占满。

  • （2）、左中右三列，左右个200px固定，中间自适应占满。
  • （3）、上中下三行，头部200px高，底部200px高，中间自适应占满。
  • （4）、上下两部分，底下这个固定高度200px，如果上面的内容少，那么这个footer就固定在底部，如果内容多，就把footer挤着往下走。

一、第一种

图片如下：（左右两侧，左侧固定宽度200px，右侧自适应占满）

代码如下：

<!doctype html>

<html>

    <head>

        <meta charset="utf-8"/>

        <title>布局1</title>

        <link rel="stylesheet" href="dio.css"/>

    </head>

    <body>

    <div class="first"></div>

    <div class="second"></div>

    </body>

</html>
.first,.second{height:100px;}

.first{

    width:200px;

    background-color:yellow;

    float:left;

}

.second{

    background-color:red;

    position:absolute;

    right:0px;

    left:200px;

    width:100%;

}x

二、第二种

图片如下：（上中下三行，头部200px高，底部200px高，中间自适应占满）

代码如下：

<!doctype html>

<html>

    <head>

        <meta charset="utf-8"/>

        <title>布局2</title>

        <link rel="stylesheet" href="dio2.css"/>

    </head>

    <body>

    <div class="left"></div>

    <div class="center"></div>

    <div class="right"></div>

    </body>

</html>
.left,.center,.right{height:400px;}

.left{

    width:200px;

    background-color:yellow;

    float:left;

}

.center{

    background-color:red;

    position:absolute;

    right:200px;

    left:200px;

}

.right{

    width:200px;

    float:right;

    background-color:green;

}

三、第三种

图片如下：上中下三行，头部200px高，底部200px高，中间自适应占满

代码如下：

<!doctype html>

<html>

    <head>

        <meta charset="utf-8"/>

        <title>布局3</title>

        <link rel="stylesheet" href="dio3.css"/>

    </head>

    <body>

        <div class="top"></div>

        <div class="center"></div>

        <div class="bottom"></div>

    </body>

</html>
body{margin:0px;}

.top{

    width:100%;

    height:200px;

    position:absolute;

    background:red;

}

.center{

    width:100%;

    position:absolute;

    background:blue;

    top:200px;

    bottom:200px;

}

.bottom{

    width:100%;

    height:200px;

    position:absolute;

    bottom:0px;

    background:black;

}

四、第四种

图片如下：上下两部分，底下这个固定高度200px，如果上面的内容少，那么这个bottom就固定在底部，如果内容多，就把bottom挤着往下走。

代码如下：

<!doctype html>

<html>

    <head>

        <meta charset="utf-8"/>

        <title>布局4</title>

        <link rel="stylesheet" href="dio4.css"/>

    </head>

    <body>

    <div class="top">

    aijefoaiejfoaiejfaio<br/>

    ........

    </div>

    <div class="bottom"></div>

</body>

</html>
html{

    height:100%;

}

body{

    margin:0px;

    min-height:100%;

    position:relative;

    background:red;

}

.top{

    padding-bottom:300px;

}

.bottom{

    position:absolute;

    width:100%;

    height:200px;

    background:black;

    bottom:0px;

    left:0px;

}

若有错误请及时通知

有关于css的四种布局的更多相关文章

  1. Android开发之基本控件和详解四种布局方式

    Android中的控件的使用方式和iOS中控件的使用方式基本相同,都是事件驱动.给控件添加事件也有接口回调和委托代理的方式.今天这篇博客就总结一下Android中常用的基本控件以及布局方式.说到布局方 ...

  2. Vscode部分快捷键 Ps的简单使用 less中的除法问题 H5 四种布局

    vscode 部分快捷键 ctrl+/ 注释ctrl+回车 光标下移alt+shift+上下箭头 将本行代码向上或向下复制ul>li 自动写alt ,鼠标一直点,就会有很多光标,可以一起写ctr ...

  3. 页面中CSS的四种引入方式的介绍与比较

    转自:https://blog.csdn.net/qq_38689666/article/details/79039392 一:行内式 <p style="color:red" ...

  4. Android学习笔记_3_四种布局

    Android布局是应用界面开发的重要一环,在Android中,共有四种布局方式, 分别是:FrameLayout( 帧布局 ).LinearLayout (线性布局).TableLayout(表格布 ...

  5. 《网页设计基础——CSS的四种引入方式详解》

    网页设计基础--CSS的四种引入方式详解     一.行内式:   规则: 1. 行内式是所有样式方法中最为直接的一种,它直接对HTML的标记使用style属性,然后将CSS代码直接写在其中.   格 ...

  6. CSS的四种引入方式

    1.使用link标签引入css文件: <head> <link rel="stylesheet" type="text/css" href=& ...

  7. HTML中引入CSS的四种常用方法及各自的缺点

    在HTML中引入CSS的方法主要有四种,它们分别是行内式.内嵌式.链接式和导入式. 1.行内式 行内式是在标记的style属性中设定CSS样式.这种方式没有体现出CSS的优势,不推荐使用.格式如下: ...

  8. Android-基本控件和详解四种布局方式

    转自:https://www.cnblogs.com/ludashi/p/4883915.html 一.常用基本控件 1.TextView 看到Android中的TextView, 我不禁的想到了iO ...

  9. sess文件编译输出css的四种方式以及使用

    sess文件输出css有下面四种方式: :nested(嵌套) :compact(紧凑) :expanded(展开) :compressed(压缩) 如何使用: sass --watch style. ...

随机推荐

  1. delphi 异形窗体可半透明

    unit xDrawForm; interface uses Windows, Messages, SysUtils, Classes, Controls, Forms, Menus, Graphic ...

  2. NOIP 考前研究

    NOIP 2017 试题研究 D1T1 小凯的疑惑 (45 min) 看到题面,大概是推数学公式. 先打暴力表,观察 \(a,b\) 与 \(n\) 的关系.猜想 \(a×b−a−b\). 引理:对于 ...

  3. [CSP-S模拟测试]:画作（BFS+数学）

    题目描述 小$G$的喜欢作画,尤其喜欢仅使用黑白两色作画.画作可以抽象成一个$r\times c$大小的$01$矩阵.现在小$G$构思好了了他的画作,准备动笔开始作画.初始时画布是全白的,他每一次下笔 ...

  4. Linux 下 VIM 的操作

    其实VI 和vim本质上没有多大区别,,但是VIM 可以高亮关键字,使得更受青睐 vim里面有3种模式:命令模式,编辑模式,末行模式 1. vim--->:set number VIM 打开文档 ...

  5. 115、TensorFlow变量的使用

    # To use the value of a tf.Variable in a Tesnorflow graph , simply treat it like a normal tf.Tensor ...

  6. selenium,webdriver模仿浏览器访问百度 基础2

    学python理念  :  代码要多敲 一定要多敲 哪怕很基础  注释要清晰 由于基础1有一些注释写的很详细, 在这里有些注释没有写的很详细 可以配合基础1一起学习哦 from selenium im ...

  7. MFC绘图基础

    ·MFC中三种坐标系统: 1.屏幕坐标系 坐标原点位于屏幕左上角 2.(非客户区)窗口坐标系 坐标原点位于窗口左上角(包括标题栏) 3.客户区坐标系 坐标原点位于客户区左上角(不包括标题栏) ·坐标系 ...

  8. Django 登录验证码

    url.py: url(r'^verifycode/$',views.verifycode), url(r'^verifycodefile/$',views.verifycodefile), url( ...

  9. 53-python基础-python3-列表-列表解析

    列表解析 将for循环和创建新元素的代码合并成一行,并自动附加新元素. 实例:使用列表解析创建平方数列表. 首先指定一个描述性的列表名,如squares : 然后,指定一个左方括号,并定义一个表达式, ...

  10. Https socket 代理

    https直接与服务器通过ssLsocket连接可行 import java.io.InputStream;import java.io.OutputStream;import java.securi ...