一、单列布局

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. F5中设置OA通过F5进行访问设置

  2. certutil

    计算摘要 certutil -hashfile inst.ini MD2 certutil -hashfile inst.ini MD5 certutil -hashfile inst.ini SHA ...

  3. BZOJ3566 [SHOI2014]概率充电器 (树形DP&概率DP)

    3566: [SHOI2014]概率充电器 Description 著名的电子产品品牌 SHOI 刚刚发布了引领世界潮流的下一代电子产品——概率充电器:“采用全新纳米级加工技术,实现元件与导线能否通电 ...

  4. ORs-6-Olfactory Bulb Ratio, ORs Gene Repertoire, and Olfactory Ability

    Olfactory Bulb Ratio, ORs Gene Repertoire, and Olfactory Ability 1.Olfactory Bulb的生物学意义:a.生存 b.嗅觉能力 ...

  5. CSS预处理技术

    CSS自定义变量 这是一个实验中的标准,后续的具体写法和解析可能会有变动. 与Less|Sass等预处理器不同的是CSS变量带有语义效果,并且不需要额外的编译.因为其名称本身就包含了语义的信息,这使得 ...

  6. Java的同步和异步

    同步:发送一个请求,等待返回,然后再发送下一个请求 异步:发送一个请求,不等待返回,随时可以再发送下一个请求 同步可以避免出现死锁,读脏数据的发生,一般共享某一资源的时候用,如果每个人都有修改权限,同 ...

  7. VisualStudioCode通过SSH远程编辑文件

    翻译修改自:https://codepen.io/ginfuru/post/remote-editing-files-with-ssh 在远程服务器上编写文件是一件很糟糕的事情,vim和其他终端编辑器 ...

  8. 监控Linux系统节点和服务CPU内存性能

    1.获取信息 #!/bin/bash #描述: # 把top信息输入到一个文件内部 #作者:孤舟点点 #版本:1.0 #创建时间:-- :: PATH=/bin:/sbin:/usr/bin:/usr ...

  9. 从零开始实现基于微信JS-SDK的录音与语音评价功能

    最近接受了一个新的需求,希望制作一个基于微信的英语语音评价页面.即点击录音按钮,用户录音说出预设的英文,根据用户的发音给出对应的评价.以下是简单的Demo: ![](reecode/qrcode.pn ...

  10. legend图例

    import matplotlib.pyplot as plt import numpy as np x=np.linspace(-3,3,50) y1=x*2+1 y2=x**2 plt.plot( ...