四种布局

  • （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. wsl和windows相互访问文件夹

    How to access Windows folders from Bash on Ubuntu on Windows You'll find the Windows C:\ structure a ...

  2. laravel框架手动删除迁移文件后再次创建报错

    手动删除laravel框架数据表迁移文件后再次创建报错 如下图: 执行创建操作之后会在autoload_static.php及autoload_classmap.php这两个文件中添加迁移文件的目录. ...

  3. USB入门开发的八个问题&USB枚举『转』

    USB 基本知识 USB的重要关键字: 1.端点:位于USB设备或主机上的一个数据缓冲区,用来存放和发送USB的各种数据,每一个端点都有惟一的确定地址,有不同的传输特性(如输入端点.输出端点.配置端点 ...

  4. [MAC]配置Jenkins 开机自启动

    如果是将jenkins.war放在tomcat中运行的, 则可以配置开机启动tomcat,脚本如下: XXX表示是你安装Tomcat所在目录 #启动tomcat cd XXX/Tomcat8/bin ...

  5. python unittest 之mock

    1.什么是mockunittest.mock是一个用于在Python中进行单元测试的库,Mock翻译过来就是模拟的意思,顾名思义这个库的主要功能是模拟一些东西.它的主要功能是使用mock对象替代掉指定 ...

  6. python中列表元素连接方法join用法实例

    python中列表元素连接方法join用法实例 这篇文章主要介绍了python中列表元素连接方法join用法,实例分析了Python中join方法的使用技巧,非常具有实用价值,分享给大家供大家参考. ...

  7. ASP.NET MVC学习系列(二)-WebAPI请求 转载https://www.cnblogs.com/babycool/p/3922738.html

    继续接着上文 ASP.NET MVC学习系列(一)-WebAPI初探 来看看对于一般前台页面发起的get和post请求,我们在Web API中要如何来处理. 这里我使用Jquery 来发起异步请求实现 ...

  8. Gcd的原理理解

    Ps:最小公倍数=a*b/gcd(a,b) a除以b的商为p,余数为q,a=b*p+q,gcd(b,q)可以整除a和b,因此gcd(b,q)也能整除gcd(a,b):反过来,gcd(a,b)也能整除g ...

  9. linux的echo命令整理

    linux的echo命令, 在shell编程中极为常用, 在终端下打印变量value的时候也是常常用到的, 因此有必要了解下echo的用法 echo命令的功能是在显示器上显示一段文字,一般起到一个提示 ...

  10. day 52协程

    协程进程线程: # 进程 启动多个进程 进程之间是由操作系统负责调用 # 线程 启动多个线程 真正被CPU执行的最小单位实际是线程 # 开启一个线程 创建一个线程 寄存器 堆栈 # 关闭一个线程 # ...