一、单列布局

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. 2)thinkphp的带有命名空间的自动加载机制

    (1)为啥thinkphp里面的文件要是写你的命名空间,要与你的路径一样,因为在thinkphp实现自动加载机制的原理,就是靠的你的命名空间对应这个路径,然后自动加载机制通过这个路径找到你的类文件,然 ...

  2. 39)PHP,选取数据库中的两列

    首先是我的文件关系: 我的b.php是主php文件,BBB.php是配置文件,login.html是显示文件, b.php文件代码: <?php /** * Created by PhpStor ...

  3. python Pandas Profiling 一行代码EDA 探索性数据分析

    文章大纲 1. 探索性数据分析 代码样例 效果 解决pandas profile 中文显示的问题 1. 探索性数据分析 数据的筛选.重组.结构化.预处理等都属于探索性数据分析的范畴,探索性数据分析是帮 ...

  4. linux系统权限(基本权限)

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

  5. 电脑莫名重启,VS代码丢失的解决办法

    今天写了一天的代码,然后电脑放在公司了,出去看电影(公司组织红色文化培训..)回来发现电脑重启,再打开电脑,VS的代码都不见了.好慌.... 别慌处理办法来了: 打开everything(没有的可以下 ...

  6. nginx相关地址

    http://www.nginx.cn/doc/      中文文档 http://nginx.org/en/docs/      英文文档 https://pan.baidu.com/s/1qWAZ ...

  7. SQL语句:把Excel文件中数据导入SQL数据库中的方法

    1.从Excel文件中,导入数据到SQL数据库情况一.如果接受数据导入的表不存在 select * into jd$ from OPENROWSET('MICROSOFT.JET.OLEDB.4.0' ...

  8. Python连接SQLServer2000

    http://www.pymssql.org/en/stable/pymssql_examples.html 实例 import pymssql # 获取连接 conn = pymssql.conne ...

  9. android cpu affinity

    暂时无法获取当前线程运行在哪个CPU上,待调查... int omask = 0; int nmask = 0xF0; static void affinity() { int err; int sy ...

  10. 听《Sara》

    Sara这首歌太好听了,虽然没有清楚具体是唱什么,但我感觉是讲一个故事,很好奇,我找到了歌词. Sara 塞拉 鲍勃迪伦 I laid on a dune, I looked at the sky, ...