<html>

	<head>

		<title>混合布局学习</title>

		<style type="text/css">

			body{margin:0;padding:0;text-align:center}

			.top{height:50px;background:#00f;margin:0 auto}

			.head{height:50px;width:700px;background:#f96;margin:0 auto}

			.main{width:700px;height:600px;background:#ccc;margin:0 auto}

			.foot{width:700px;height:50px;background:#0f0;margin:0 auto}

			/*中间部分布局*/

				/*float:left向左浮动*/

			.left{width:500px;height:600px;background:#f00;float:left}

			.sub_ll{width:100px;height:600px;background:#f33;float:left}

			.sub_lr{width:400px;height:600px;background:#f66;float:right}

			.right{width:200px;height:600px;background:#ff0;float:right}

		</style>

	</head>

	<body>

	混合布局样式<br/>

	<div class="top">

		<div class="head">标题</div>

	</div>

	<div class="main">

		<div class="left">

			<div class="sub_ll">左侧的子1</div>

			<div class="sub_lr">左侧的子2</div>

		</div>

		<div class="right">我是右侧的内容哦</div>

	</div>

	<div class="foot">04</div>

	 <br/>

	 <br/>

	</body>

</html>

效果如下：

关键知识点：

通过div的嵌套，利用float对div的布局进行控制，注意子div的宽度之和应该与父div的宽度大小一样

慕课笔记利用css进行布局【混合布局】的更多相关文章

  1. 慕课笔记利用css进行布局【混合布局练习】

    通过学习div的布局,以一个简单的内容管理网站的布局为例子,用div+css进行简单的网页布局,加深学印象: <html> <head> <title>CSS+di ...

  2. 慕课笔记利用css进行布局【三列布局】

    三个div中间自适应,两侧固定大小 <html> <head> <title>三列布局</title> <style type="tex ...

  3. 慕课笔记利用css进行布局【两列布局】

    <html> <head> <title>两列布局</title> <style type="text/css"> bo ...

  4. 慕课笔记利用css进行布局【一列布局】

    <html> <head> <title>一列布局</title> <style type="text/css"> bo ...

  5. css学习笔记 --初学 css代码风格、布局误区

    初学css,记录下初学者需要注意的事项. 一.css 代码风格 1.css 命名语义化. 如类名: main   主体   container 内容 footer    站底 right.center ...

  6. DIV+CSS 网页布局之：混合布局

    1.混合布局 在了解了一列.两列和三列布局之后,混合布局也就不难理解了,混合布局也可以叫综合型布局,那么混合布局就可以在一列布局的基础之上,分为两列布局,三列布局,网页布局的结构普遍都是三列布局,但是 ...

  7. CSS 实现流布局以及多列混合布局

    基本流布局 <!DOCTYPE html > <html> <head> <meta charset="utf-8"> <ti ...

  8. 利用css进行网页布局

    网页布局: 又称版式布局,是网页UI设计师将有限的视觉元素进行有机的排列组合,将理性的思维个性的化的表现出来,是一种具有个人艺术特色的视觉传达方式.传达信息的同时有美感.网页设计特点(相对纸媒来说). ...

  9. 利用Div+CSS(嵌套+盒模型)布局页面完整实例流程

    Div+CSS(嵌套+盒模型)布局页面完整实例流程: <!DOCTYPE html><html> <head>  <meta charset="UT ...

随机推荐

  1. [2010国家集训队]Crash的旅游计划

    Description 眼看着假期就要到了,Crash由于长期切题而感到无聊了,因此他决定利用这个假期和好友陶陶一起出去旅游. Crash和陶陶所要去的城市里有N (N > 1) 个景点,Cra ...

  2. 题解报告：hdu 2084 数塔（递推dp）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2084 Problem Description 在讲述DP算法的时候,一个经典的例子就是数塔问题,它是这 ...

  3. 构建一个.net的干货类库，以便于快速的开发 - 验证码

    一个验证码对于一个网站的作用不言而喻,而随着技术的发展验证码的种类也开始多了起来,发展至今很多网站已经不再使用一种验证码,为满足需求程序猿就要写很多的方法来适应需求,今天我就来介绍我之前收集到的验证码 ...

  4. js实现表单checkbox的单选，全选

    全选&单选 //<input type="checkbox" name="" class="quan" value=" ...

  5. Java编程思想总结笔记Chapter 5

    初始化和清理是涉及安全的两个问题.本章简单的介绍“垃圾回收器”及初始化知识. 第五章  初始化与清理 目录:5.1 用构造器确保初始化5.2 方法重载5.3 默认构造器5.4 this关键字5.5 清 ...

  6. R in action读书笔记（22）第十六章 高级图形进阶（下）

    16.2.4 图形参数 在lattice图形中,lattice函数默认的图形参数包含在一个很大的列表对象中,你可通过trellis.par.get()函数来获取,并用trellis.par.set() ...

  7. Python学习 Day 5 高阶函数 map/reduce filter sorter 返回函数 匿名函数 装饰器 偏函数

    高阶函数Higher-orderfunction 变量可以指向函数 >>> abs #abs(-10)是函数调用,而abs是函数本身 <built-in function ab ...

  8. CSS——BFC

    http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html 元素若不是bfc,那么内部浮动元素的高度不参与计算 元素若不是bf ...

  9. GA详解

    转:http://blog.csdn.net/u010451580/article/details/51178225 本文是去年课题组周报中的一个专题讲解,详细讲了GA,由于是周报,所以十分详细.很适 ...

  10. 【VBA研究】如何用Base64 编解码方法实现简单的加解密

    Base64编码的思想是是采用64个基本的ASCII码字符对数据进行重新编码,将数据变成字符串实现文本传输.由于编码简单,所以很容易实现,代码也是现成的.利用这个编码规则可以实现简单的加解密.编解码方 ...