一、单列布局

1.代码如下

    <!doctype html>

    <html>

    <head>

    <meta charset="utf-8"/>

    <title>单列布局</title>

    <style>

    body{

        margin:0;}

    .box{

        width:960px;

        margin:0 auto;

    }

    .dinbu{

        height:100px;

        border:1px solid #f0f;

    }

    .zhongbu{

        height:400px;

        border:1px solid #f00;

    }

    .dibu{

        height:100px;

        border:1px solid #00f;

    }

    </style>

    </head>

    <body>

    <div  class="box">

        <div  class="dinbu"></div>

        <div class="zhongbu"></div>

        <div class="dibu"></div>

    </div>

    </body>

    </html>

运行结果

二、双列布局

代码如下

 <doctype html>

<html>

<head>

<meta charset="utf-8"/>

<title>双列布局(自适应布局 固定布局)</title>

<style>

body{

    margin:0;

}

.box{

    width:960px;

    margin:0 auto;

}

.zuo{

    width:20%;

    height:500px;

    background-color:#f0f;

    float:left;

}

.you{

    width:80%;

    height:500px;

    background-color:#f00;

    float:right;

}

</style>

</head>

<body>

<div  class="box">

    <div  class="zuo"></div>

    <div class="you"></div>

</div>

</body>

</html>

运行结果

三、三列标签

代码如下

<!doctype html>

<html>

<head>

<meta charset="utf-8"/>

<title>三列布局</title>

<style>

body{

    margin:0;

}

.box{

    width:960px;

    margin:0 auto;

    position:relative;

}

.zuo{

    width:200px;

    height:500px;

    background-color:#f0f;

    position:absolute;

    left:0;

    top:0

}

.zhong{

    height:500px;

    background-color:#ff0;

    margin:0 300px 0 200px;

}

.you{

    width:300px;

    height:500px;

    background-color:#f00;

    position:absolute;

    right:0;

    top:0

}

</style>

</head>

<body>

<div  class="box">

    <div  class="zuo"></div>

    <div class="zhong"></div>

    <div class="you"></div>

</div>

</body>

</html>

运行结果

四、混合布局

代码如下

<doctype html>

<html>

<head>

<meta charset="utf-8"/>

<title>混合布局</title>

<style>

body{

    margin:0;

}

.box{

    width:960px;

    margin:0 auto;

}

.dinbu{

    height:100px;

    background-color:#ccc;

}

.zhongbu{

    height:400px;

    background-color:#fff;

    position:relative;

}

.zhongbu .zuo{

    width:200px;

    height:400px;

    background-color:#f0f;

    position:absolute;

    left:0px;

    top:0px

}

.zhongbu .czy{

    height:400px;

    background-color:#f00;

    margin:0 310px 0 210px;

}

.zhongbu .you{

    width:300px;

    height:400px;

    background-color:#00f;

    position:absolute;

    right:0px;

    top:0px;

}

.dibu{

    height:100px;

    background-color:#cba;

}

</style>

</head>

<body>

<div  class="box">

    <div class="dinbu"></div>

    <div class="zhongbu">

        <div class="zuo"></div>

        <div class="czy"></div>

        <div class="you"></div>

    </div>

    <div class="dibu"></div>

</div>

</body>

</html>

运行结果

总结：

1、css布局主要是四种

2、排版布局需要掌握的知识

  • div 相关属性
  • float 浮动属性
  • position 定位属性
  • clear 清除浮动的应用

html+css布局类型的更多相关文章

  1. 界面设计技法之css布局

    css布局之于页面就如同ECMAScript之于JS一般,细想一番,html就如同语文,css就如同数学,js呢,就是物理,有些扯远,这里就先不展开了. 回到主题,从最开始的css到如今的sass(l ...

  2. html学习第三天—— 第12章——css布局模型

    清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上,又不同于我们常说的 ...

  3. Python之路-python(css布局、JavaScript)

    CSS布局 JavaScript css布局: 后台管理界面一:(左右标签都有下来菜单) 利用position: absolute;让某个标签固定在具体位置,然后使用overflow: auto;属性 ...

  4. css布局模型

    ---恢复内容开始--- 在清楚了CSS盒模型的基本概念,盒模型类型,我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是CSS最基本,最核心的概念.但布局模型是建立在盒型基础之上,又不同 ...

  5. css布局模式

    css布局模型在网页中,元素有三种布局模型: 流动模型(Flow) 浮动模型 (Float) 层模型(Layer) 流动Flow模型(一): 流动(Flow)是默认的网页布局模式.也就是说网页在默认状 ...

  6. css012 css布局简介

    css012  css布局简介 一.    网页布局的类型 网页布局的类型 1.固定宽度 2.流式 3.相应式web设计 二.    如何进行css布局 1.强大的<div>标签 网页的h ...

  7. 《深入理解bootstrap》读书笔记：第三章 CSS布局

    一. 概述一下理念 bootstrap基于H5开发.提倡移动先行(媒询声明是必须的),对浏览器支持面不是很广. 响应式图片:max-width:100% height:auto; 可以加上:.img- ...

  8. [Bootstrap]7天深入Bootstrap(3)CSS布局

    Bootstrap三大核心内容的基础,即基础的CSS 布局语法.其包括基础排版(Typography).代码(Code).表 格(Tables).表单(Forms).按钮(Buttons).图片 (I ...

  9. HTML+CSS学习笔记 (12) - CSS布局模型

    标签:HTML+CSS css布局模型 清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是 ...

随机推荐

  1. [LC] 1055. Shortest Way to Form String

    From any string, we can form a subsequence of that string by deleting some number of characters (pos ...

  2. 服务端向客户端推送消息技术之websocket的介绍

    websocket的介绍 在讲解WebSocket前,我们先来看看下面这种场景,在HTTP协议下,怎么实现. 需求: 在网站中,要实现简单的聊天,这种情况怎么实现呢?如下图: 当发送私信的时候,如果要 ...

  3. linux系统权限（基本权限）

    linux的系统权限:r--  100 4-w- 010 2--x  001 1 [root@localhost ~]# ll -d dir drwxrwxrwx root root Nov : di ...

  4. 阿里巴巴IconFont的使用方式

    一.解释一下为什么要使用IconFont? IconFont顾名思义就是把图标用字体的方式呈现. 其优点在于以下几个方面: 1.可以通过css的样式改变其颜色:(最霸气的理由) 2.相对于图片来说,具 ...

  5. UITextView实现PlaceHolder的方式

    实现UITextView实现PlaceHolder的方式的方式有两种,这两种方法的核心就是通过通知来添加和去除PlaceHolder:下面来介绍两种方法:个人比较喜欢第一种,看起来更加合理. 方法1: ...

  6. django框架中的cookie与session

    cookie因为http是一个无状态协议,无法记录用户上一步的操作,所以需要状态保持.cookie和session的区别:1.cookie是保存在浏览器本地的,所以相对不安全.cookie是4k的大小 ...

  7. 牛客-Corn Fields

    题目传送门 sol:状压和动规,把每一行的m个01压缩成一个int 状压dp #include "bits/stdc++.h" using namespace std; ; con ...

  8. Redis学习之热点key重建

    在Redis的生产环境中,大量客户端连接请求某一个key,但都需要从DB中获取数据,来回写数据库,如下图: <ignore_js_op> 造成的问题: 大量的线程请求数据库,造成数据库压力 ...

  9. python中的reduce函数

    python中的reduce   python中的reduce内建函数是一个二元操作函数,他用来将一个数据集合(链表,元组等)中的所有数据进行下列操作:用传给reduce中的函数 func()(必须是 ...

  10. 事件和异常的传播 · 农场主的黑科技.

    inBound事件的传播 何为inBound事件以及ChannelInboundHandler ChannelRead事件的传播ChannelRead是典型的inbound事件,以他为例了解inbou ...