<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. New Article For Test

    \[ a ^ 2 + b ^ 2 ~-~ 2 \times a \times b \times cos~ \theta = c ^ 2 \] #include<stdio.h> int m ...

  2. 洛谷 P2061 [USACO07OPEN]城市的地平线City Horizon

    简化版的矩形面积并,不用线段树,不用离散化,代码意外的简单 扫描线,这里的基本思路就是把要求的图形竖着切几刀分成许多矩形,求面积并.(切法就是每出现一条与y轴平行的线段都切一刀) 对于每一个切出来的矩 ...

  3. 贪心 Codeforces Round #236 (Div. 2) A. Nuts

    题目传送门 /* 贪心:每一次选取最多的线段,最大能放置nuts,直到放完为止,很贪婪! 题目读不懂多读几遍:) */ #include <cstdio> #include <alg ...

  4. 选择排序 分类： 算法 c/c++ 2014-10-10 20:32 509人阅读 评论(0) 收藏

    选择排序(假设递增排序) 每次选取从当前结点到末尾结点中最小的一个与当前结点交换,每一轮固定一个元素位置. 时间复杂度O(n^2),空间复杂度O(1).下面的示例代码以带头结点的链表为存储结构: #i ...

  5. shell 调试 `<<' is not matched

    我的这段脚本,验证数据库连接是否正常: #! /bin/sh...while ..do....sqlplus $user/ $passwd@$sid  <<!quit;! ... 单独执行 ...

  6. Anaconda(miniconda)安装及使用--转

    https://www.waitalone.cn/anaconda-install-error.html         3,224   1.Anaconda概述 Anaconda是一个用于科学计算的 ...

  7. VS2012创建WebForm项目提示错误: 此模板尝试加载组件程序集 “NuGet.VisualStudio.Interop, Version=1.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a”。

    解决方案: 使用VS2012开发,都要装NuGet插件(官网:http://nuget.org),进官网点安装就进入了微软的下载页面, 选择vs2012版本的NuGet.Tools.vsix文件,双击 ...

  8. 日常记录-代码中Background后Padding 失效

    近日,在开发过程中 遇到了 Layout 代码中设置 Background 后,padding失效的问题,只是在Android 4.4.4 和 4.4.2 的手机上遇到了. 网上搜索了下,说是 4.4 ...

  9. sublime text3安装Package Control

    转自:https://www.cnblogs.com/lq147760524/p/8202521.html 一.下载Sublime3 https://www.sublimetext.com/3 二.安 ...

  10. 用idea+maven编译打包spark project core错误：java.lang.RuntimeException: Unable to load a Suite class

    Discovery starting. *** RUN ABORTED *** java.lang.RuntimeException: Unable to load a Suite class tha ...