<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. [TJOI2013]松鼠聚会

    Description 有N个小松鼠,它们的家用一个点x,y表示,两个点的距离定义为:点(x,y)和它周围的8个点即上下左右四个点和对角的四个点,距离为1.现在N个松鼠要走到一个松鼠家去,求走过的最短 ...

  2. 【BZOJ3514】Codechef MARCH14 GERALD07加强版（LCT_主席树）

    题目: BZOJ3514 分析: 看到这题真的是一脸懵逼无从下手,只好膜题解.看到「森林的联通块数 = 点数 - 边数」这一句话就立刻什么都会了 QAQ . 这题最重要的就是意识到上面那个式子(正确性 ...

  3. Floyd+限制路径步数（快速幂优化）

    POJ 3613 Cow Relays 最短路可以采用Floyd来计算,但是限制时间在1s内,估计直接写会超时,所以要用到快速幂来优化. 快速幂的思想是:xy=xy/2∗2" role=&q ...

  4. Latex新人教程

    1.LaTeX软件的安装和使用 方法A(自助):在MikTeX的官网下载免费的MikTeX编译包并安装.下载WinEdt(收费)或TexMaker(免费)等编辑界面软件并安装. 方法B(打包):在ct ...

  5. 题解报告：NYOJ 题目143 第几是谁？（逆康托展开）

    描述 现在有"abcdefghijkl”12个字符,将其按字典序排列,如果给出任意一种排列,我们能说出这个排列在所有的排列中是第几小的.但是现在我们给出它是第几小,需要你求出它所代表的序列. ...

  6. 加密解密(3)Bob到CA申请证书过程

    网络安全中最知名的人物大概就是Bob和Alice了,因为很多安全原理阐述中都用这两个虚拟人物来进行实例说明. 我们来看看Bob是怎么从CA中心获得一个数字证书的: 1.Bob首先创建他自己的密钥对(k ...

  7. 安装11g 数据库

    出现问题解决: 1.首先确认下载的安装包完整性.2解压包的时候,按顺序解压,解压第一个包后,解压第二个包的时候,要把解压地址与解压第二包的地址要一样. 安装的时候,需要把两个压缩包都解压,并将目录wi ...

  8. Activiti工作流和shiro权限管理关系图

  9. Windows Phone8.1应用 提交

    昨天晚上,试了试把一个WP8.1应用提交到微软商店上去,期间遇到了不少问题,搞到凌晨还没弄好.今天早上,终于把WP8.1应用成功提交上去了. 下面说说如何把WP8.1应用提交商店去.提交WP8.1以及 ...

  10. H.264学习笔记6——指数哥伦布编码

    一.哥伦布码 哥伦布码就是将编码对象分能成等间隔的若干区间(Group),每个Group有一个索引值:Group Id. >对于Group Id采用二元码编码: >对于Group内的编码对 ...