四种布局

  • （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. [CSP-S模拟测试]:Endless Fantasy（DFS）

    题目描述 中二少年$cenbo$幻想自己统治着$Euphoric\ Field$.由此他开始了$Endless\ Fantasy$.$Euphoric\ Field$有$n$座城市,$m$个民族.这些 ...

  2. vue-cli2.X环境搭建

    1.先安装nodejs环境https://npm.taobao.org/mirrors/node (选择版本) 下一步 下一步 默认安装就行 2.检查node和npm的是否成功安装node -v np ...

  3. maven创建的quickstart项目生成可执行jar

    maven创建的quickstart项目在打包成jar后,通过Java -jar 文件名.jar 会提示没有主清单属性. 为了生成可执行的jar,需要添加maven插件 maven-shade-plu ...

  4. python中的__init__

    __init__ __init__中__表示系统默认命名,init是初始化的意思.由于类可以起到模板的作用,因此,可以在创建实例的时候,把一些我们认为必须绑定的属性强制填写进去.以学生类为例,通过定义 ...

  5. 读取 appsettings.json

    Appsettings.json 配置: 个配置文件就是一个json文件,并且是严格的json文件,所有的属性都需要添加“”引号.下图是一个常规的代码示例: {"UrlString" ...

  6. spring注解开发：ComponentScan组件扫描

    在使用xml方式配置时,我们只需要在xml中配置如下代码: <context:component-scan base-package="包名"></context ...

  7. 网关中加入熔断机制(Hystrix)

    网关中加入熔断机制 在网关中加入熔断机制 添加依赖项 spring-cloud-gateway项目POM文件加入spring-cloud-starter-netflix-hystrix <dep ...

  8. [模板]网络最大流 & 最小费用最大流

    我的作业部落有学习资料 可学的知识点 Dinic 模板 #define rg register #define _ 10001 #define INF 2147483647 #define min(x ...

  9. redis-3.0.0安装

    redis-3.0.0安装 前言 redis是常用的no-sql数据库,常用于缓存数据,同时,他也可以持久化数据.他是C语言开发的,所以安装的时候需要编译. 单机版redis yum install ...

  10. 关于清除浮动的n中方式

    我们在对页面进行布局的时候经常会用到浮动布局,浮动布局能够很好的实现我们想要的布局效果,同时兼容方面也是很好的,但是当我们在用左右浮动进行页面布局的时候,由于元素浮动脱了了文档流导致浮动元素的父级高度 ...