<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. poj 3253 Fence Repair (水哈夫曼树)

    题目链接: http://poj.org/problem?id=3253 题目大意: 有一根木棍,需要截成n节,每节都有固定的长度,一根长度为x的木棒结成两段,需要花费为x,问截成需要的状态需要最小的 ...

  2. Hello！六月

    把这里当做记事本应该没人介意吧: 太忙了!六月! ACM: 背包九讲

  3. Python快速教程（转载)

    Python快速教程   作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 怎么能快速地掌握Python?这是和朋友闲聊时谈起的问题 ...

  4. 关于Swing中JFrame等顶级容器的层次还有设置背景的方式

    资料来自:http://blog.csdn.net/qq_32006373/article/details/49659129 http://yuncode.net/code/c_5196327caac ...

  5. jsp的简介

    https://www.w3cschool.cn/jsp/jsp-intro.html

  6. JDK常用类解读--String

    一.字符串的不变性: 文章使用的源码是jdk1.8的.(下同) 1.首先可以看到`String`是`final`类,说明该类不可继承,保证不会被子类改变语义 2.String的值实际上就是一个字符数组 ...

  7. AJPFX： Java基础多线程(一)

    多线程是Java学习的非常重要的方面,是每个Java程序员必须掌握的基本技能.本文只是多线程细节.本质的总结,并无代码例子入门,不适合初学者理解.初学者学习多线程,建议一边看书.看博文,以便写代码尝试 ...

  8. 公众号如何获取已关注用户的unionid的问题

    避免误导,先加一句:首先,得公众号绑定开放平台 这个问题困扰了我一早上,我尝试了很多次获取unionid都失败. 微信的开发文档上有说: 关于特殊场景下的静默授权 1.上面已经提到,对于以snsapi ...

  9. 关于Android软键盘把布局顶上去的问题（一）

    最近接触到了一个登陆页面,布局最上面显示的是一个波纹的view,中间显示账号和密码的EditText,紧接着还有一个Button: 希望:点击EditText时,软键盘不能把波纹的view顶出去,也不 ...

  10. InChatter系统之客户端实现原理与阶段小结

    InChatter客户端的开发可以说是目前系统的阶段性结尾了.很抱歉的是,这篇文章来的这么晚,迟到了这么久. 在客户端的开发主要针对两个方面: 消息的传输与处理 消息的UI交互处理 一.消息的传输与处 ...