四种布局

  • （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. 数字滚动动画效果 vue组件化

    参考了这篇文章,作者思路很清晰,简单做了下修改,蟹蟹作者,链接在此:https://www.jb51.net/css/685357.html#comments 主要思路是利用css属性writing- ...

  2. LOJ 2302 「NOI2017」整数——压位线段树

    题目:https://loj.ac/problem/2302 压30位,a最多落在两个位置上,拆成两次操作. 该位置加了 a 之后,如果要进位或者借位,查询一下连续一段 0 / 1 ,修改掉,再在含有 ...

  3. The shortest problem（hdu，多校

    The shortest problem Time Limit: 3000/1500 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Oth ...

  4. 绕X 轴 Y轴 Z轴旋转的结果

    void warp_perspect_3_angle(cv::Mat face, float roll, float yaw, float pitch) { cv::Mat face_img = fa ...

  5. 北风设计模式课程---UML类图各符号含义

    北风设计模式课程---UML类图各符号含义 一.总结 一句话总结: 用脑子,挺好记的:实线关系肯定比虚线重,箭头.三角形.菱形的关系肯定依次加重,三角形是继承和实现, 1.UML类图中 线+箭头 表示 ...

  6. 【python3】装饰器

    参考文章: 理解Python装饰器(Decorator) 关键点: 写装饰器一定要搞定楚函数名后面带小括号和不带小括号的含义.带小括号,表示调用这个函数,而不带小括号,则表示的是该函数引用地址 简单装 ...

  7. 测开之路三十六：常用的css选择器

    在static下新建一个css,并写入内容 /*标签选择器,label标签的颜色为红色*/label {color: red;} /*.代表类选择器,绿色*/.test {color: green;} ...

  8. 【C#学习笔记】 IDisposable 接口

    在.net 编程环境中,系统的资源分为托管资源和非托管资源. 对于托管的资源的回收工作,是不需要人工干预回收的,而且你也无法干预他们的回收,所能够做的只是了解.net CLR如何做这些操作.也就是说对 ...

  9. 我的WordPress站点

    读取VDI文件 SSL和TLS Windows下使用vim的最佳方案:Sublime gdb用法 VMware的Guest与Host进行通信的三种方式 加密与解密 漫谈保护模式 processing学 ...

  10. PromQL

    PromQL (Prometheus Query Language) 是 Prometheus 自己开发的数据查询 DSL 语言,语言表现力非常丰富,内置函数很多,在日常数据可视化以及rule 告警中 ...