一、单列布局

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. cas sso单点登录 登录过程和登出过程原理说明

    CAS大体原理我就不说了,网上一大把,不过具体交互流程没说清楚,所以有这篇文章,如果有错误,请多多指教 登录过程 用户第一次访问一个CAS 服务的客户web 应用时(访问URL :http://192 ...

  2. python开发常见应用第一卷(OS遍历文件并存储文件路径到数据库)

    之前我们爬取完指定网站的图片后,会将它门保存到服务器或本地的数据库中,真正的工作中大多数是采用分布式的方式来爬取的,所以这些图片会分布在很多的主机上面,当被引用时需要根据IP+图片路径来引用并且加载, ...

  3. plsql登录，tables表为空解决方案

    共两种方法,第一种不行,再试下第二种: 第一种: plsql tables 表存在,但是看不到所有的表信息 将C:\Windows\Prefetch目录下,几个PLSQL DEVELOPER***** ...

  4. nginx负载均衡如何实现

    什么是nginx?Nginx("engine x")是一款是由俄罗斯的程序设计师Igor Sysoev所开发高性能的Web和反向代理服务器,也是一个 IMAP/POP3/SMTP ...

  5. [Linux] Windows 下通过SecureCRT 访问 Linux

    不愿意装双系统的,可以借助虚拟机(Vmware, Virtual PC等) 安装linux 进行使用. 至于如何使用虚拟机安装Linux 这部分,很简单: 下载好需要安装的Linux ISO 镜像文件 ...

  6. every|each|the用于姓氏的复数形式|comrades-in-arms|clothes are|word|steel|affect|effect

    ________ man in the crowd raised his hand.  A. All  B. Each  C. Every  D. Both 题目解析 考查代词的用法.此句意思是:人群 ...

  7. @Value默认值填null

    @Value("${topology.position.spout.maxpending:#{null}}") private Integer spoutMaxPending; @ ...

  8. 吴裕雄--天生自然python学习笔记：网页解析

    抓取万水书苑网页中所有<a>标签中的超链接井显示. import requests from bs4 import BeautifulSoup url = 'http://www.wsbo ...

  9. marry|psych up|make it|Fireworks|be to blame for|

    同位语从句 ADJ 结婚的;已婚的If you are married, you have a husband or wife. We have been married for 14 years.. ...

  10. Transformer详解：各个特征维度分析推导

    谷歌在文章<Attention is all you need>中提出的transformer模型.如图主要架构:同样为encoder-decoder模式,左边部分是encoder,右边部 ...