一、单列布局

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. E. Paint the Tree（树形dp）

    题:https://codeforces.com/contest/1241/problem/E 题目大意:给你一棵树,每一个点都可以染k种颜色,你拥有无数种颜色,每一种颜色最多使用2次,如果一条边的两 ...

  2. 谈谈有关 Python 的GIL 和 互斥锁

    转载:https://blog.csdn.net/Amberdreams/article/details/81274217 有 Python 开发经验的人也许听说过这样一句话:Python 不能充分利 ...

  3. js求两个数的百分比

    function toPercent(num, total) { return (Math.round(num / total * 10000) / 100.00 + "%");/ ...

  4. nodejs快速测试

    对于一些js功能,可以通过nodejs快速搭建测试环境 1.这里我们先通过express脚手架快速搭建一个项目,或者init一个空项目 2.mkdir script 3.这里假设我们的场景是MQTT接 ...

  5. python练习题——猜数字游戏

    增加了按照对半找数的方法来计算最短几次就可以猜到随机数,决定到游戏结束共猜数的次数: from random import * import numpy as np from numpy import ...

  6. 华为OD两轮技术面试

    华为OD面试1性格测试选积极向上的选项,注意,性格测试也会挂人,我一个朋友性格测试就没过.2机试 一道变成题目 1h 用例60%通过即可任给一个数组,元素有20M,1T,300G之类的,其中1T=10 ...

  7. 与项目欧拉速度比较：C vs Python与Erlang vs Haskell

    我从问题#12 ProjectEuler作为编程练习,并比较我在C,Python,Erlang和Haskell中的实现(当然不是最优)实现.为了获得更高的执行时间,我搜索了第一个有1000个以上因子的 ...

  8. Sublime Text2 使用心得总结

    sublime text2是开发代码编辑的神器 ,编辑器界面优美,操作速度快速.而且Sublime Text2是一款跨平台的编辑器,再也不用为换平台而找不到合适的.熟悉的编辑器担忧了. Sublime ...

  9. git使用的简要介绍

    GIT """ 什么是git:版本控制器 - 控制的对象是开发的项目代码 代码开发时间轴:需求1 > 版本库1 > 需求2 > 版本库2 > 版本 ...

  10. symbolicatecrash解析crash文件

    导出crash文件 Xcode -> Window -> Devices and Simulators -> View Device Logs ,然后选中导出. 找到.app文件和. ...