<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. hdu 5335 Walk Out (搜索)

    题目链接: hdu 5335 Walk Out 题目描述: 有一个n*m由0 or 1组成的矩形,探险家要从(1,1)走到(n, m),可以向上下左右四个方向走,但是探险家就是不走寻常路,他想让他所走 ...

  2. android 系统的时间间隔和睡眠用哪个？

    原文 : https://developer.android.com/reference/android/os/SystemClock.html SystemClock.elapsedRealtime ...

  3. Statistics gathering and SQL Tuning Advisor

    1. https://www.pythian.com/blog/statistics-gathering-and-sql-tuning-advisor/ Our monitoring software ...

  4. T4869 某种数列问题 (jx.cpp/c/pas) 1000MS 256MB

    题目描述 众所周知,chenzeyu97有无数的妹子(阿掉!>_<),而且他还有很多恶趣味的问题,继上次纠结于一排妹子的排法以后,今天他有非(chi)常(bao)认(cheng)真(zhe ...

  5. Android开发中使用数据库时出现java.lang.IllegalStateException: Cannot perform this operation because the connection pool has been closed.

    最近在开发一个 App 的时候用到了数据库,可是在使用数据库的时候就出现了一些问题,在我查询表中的一些信息时出现了一下问题: Caused by: java.lang.IllegalStateExce ...

  6. Android学习笔记（十四） Handler理论补充

    一.如何下载Android源码 在SDK Manager中选中Sources for Android SDK. 二.ThreadLocal初步介绍 1)执行ThreadLocal对象(static f ...

  7. Python学习 Day 7 面向对象 类和实例 访问限制

    面向对象编程 面向对象编程——Object Oriented Programming,简称OOP,是一种程序设计思想.OOP把对象作为程序的基本单元,一个对象包含了数据和操作数据的函数. 面向过程的程 ...

  8. python学习日记-01

    一. 熟悉 在正式介绍python之前,了解下面两个基本操作对后面的学习是有好处的: (1)基本的输入输出 可以在Python中使用+.-.*./直接进行四则运算. >>> 1+3* ...

  9. （转）淘淘商城系列——发布dubbo服务

    http://blog.csdn.net/yerenyuan_pku/article/details/72758639 Dubbo采用全Spring配置方式,透明化接入应用,对应用没有任何API侵入, ...

  10. swift class extension 与继承

    1.扩展中无法继承重写已有函数,不能添加函数. Extensions can add new functionality to a type, but they cannot override exi ...