四种布局

  • （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. python使用开源图片识别第三方库tesseract

    详细安装博客:https://blog.csdn.net/luanyongli/article/details/81385284 第一步tesseract-ocr的安装如果不会请参照:https:// ...

  2. cordova打包apk流程

    一.打包 条件: 1.java-jdk 2.Android-sdk  ( 安装教程:https://blog.csdn.net/qq_36577136/article/details/80632674 ...

  3. error C2664: “ATL::CStringT<BaseType,StringTraits>::Remove”: 不能将参数 1 从“const char [2]”转换为“char”

    转自VC错误:http://www.vcerror.com/?p=1395 问题描述: 代码: CString str("asdfafda"); str.Remove(" ...

  4. jmeter 测试结果分析术语

    label:定义http请求名称. samples:测试中一共发出的请求. average:平均响应时长.默认是单个request的平均响应时长. median:中位数,50%用户的响应时长. 90% ...

  5. pip install 报SSL异常和timeout异常

    在安装pip3 install virtualenv时报了SSL异常 如图 pip is configured with locations that require TLS/SSL, however ...

  6. vim可视模式

    参考: http://xw2423.byr.edu.cn/blog/archives/232 http://www.pythonclub.org/linux/vim/visual-mode Vim的多 ...

  7. java反射(三)--反射与操作类

    一.反射与操作类 在反射机制的处理过程之中不仅仅只是一个实例化对象的处理操作,更多的情况下还有类的组成的操作,任何一个类的基本组成结构:父类(父接口),包,属性,方法(构造方法,普通方法)--获取类的 ...

  8. Redis项目实战，一些经验总结

    来源:https://my.oschina.net/u/920698/blog/3031587 背景 Redis 是一个开源的内存数据结构存储系统. 可以作为数据库.缓存和消息中间件使用. 支持多种类 ...

  9. 解决“每次打开office2010的word都会出现配置进度框”问题

       在win7中安装完office2010后.打开 *.doc文件时,总会弹出"配置进度框"问题,解决例如以下:  1)点击"開始"-->"执 ...

  10. MVC http://stackoverflow.com/tags/model-view-controller/info

    About model-view-controller Model–View–Controller (MVC) is an architectural pattern used in software ...