一、单列布局

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. G - Green-Red Tree Gym - 102190G

    题目链接:http://codeforces.com/gym/102190/attachments 题解:我们先将前5个点分别涂上红色或者绿色,使得这两棵树在5个点中都是连通,并不存在自环(建边方式不 ...

  2. 03-Java的基础语法

    一个Java程序可以认为是一系列对象的集合,而这些对象通过调用彼此的方法来协同工作.下面简要介绍下类.对象.方法和实例变量的概念. 对象:对象是类的一个实例,有状态和行为.例如,一条狗是一个对象,它的 ...

  3. Linux文件与目录管理,常用命令总结

    绝对路径:  以根目录 / 开始的相对路径:  相对于当前路径的写法 $PATH:  可执行文件路径的变量(出现在该变量下的文件可以在系统的任何目录下都可以执行) 获取路径的文件名:    basen ...

  4. commonhelper 通用类：计时器、数组去重、自动生成日志编号、生成随机数、处理字符串

    using System;using System.Collections.Generic;using System.Diagnostics;using System.Text; namespace ...

  5. django框架基础-ORM跨表操作-长期维护

    ###############    一对一跨表查询    ################ import os if __name__ == '__main__': os.environ.setde ...

  6. Android开发之《RXJava的简单实现》

    import android.util.Log; import rx.Observable; import rx.Subscriber; import rx.functions.Action1; pu ...

  7. js - __proto__ 、 prototype和constructor

    零.资料与前言 0x1 材料: 1.帮你彻底搞懂JS中的prototype.__proto__与constructor(图解) 0x2 前言 之前也尝试总结过 js 中的 __proto__ . pr ...

  8. 使用阿里大于平台发送短信验证码java代码实现

    待续..网站app后台还未完成,不能添加签名,短信不能正常发送. Tip: https://help.aliyun.com/document_detail/55284.html?spm=5176.sm ...

  9. MyBatis学习笔记一:MyBatis最简单的环境搭建

    MyBatis的最简单环境的搭建,使用xml配置,用来理解后面的复杂配置做基础 1.环境目录树(导入mybatis-3.4.1.jar包即可,这里是为后面的环境最准备使用了web项目,如果只是做 my ...

  10. phpStrom安装PHP_CodeSniffer检查代码规范

    为什么使用PHP_CodeSniffer 一个开发团队统一的编码风格,有助于他人对代码的理解和维护,对于大项目来说尤其重要. PHP_CodeSniffer是PEAR中的一个用PHP5写的用来检查嗅探 ...