慕课笔记利用css进行布局【混合布局】
<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进行布局【混合布局】的更多相关文章
- 慕课笔记利用css进行布局【混合布局练习】
通过学习div的布局,以一个简单的内容管理网站的布局为例子,用div+css进行简单的网页布局,加深学印象: <html> <head> <title>CSS+di ...
- 慕课笔记利用css进行布局【三列布局】
三个div中间自适应,两侧固定大小 <html> <head> <title>三列布局</title> <style type="tex ...
- 慕课笔记利用css进行布局【两列布局】
<html> <head> <title>两列布局</title> <style type="text/css"> bo ...
- 慕课笔记利用css进行布局【一列布局】
<html> <head> <title>一列布局</title> <style type="text/css"> bo ...
- css学习笔记 --初学 css代码风格、布局误区
初学css,记录下初学者需要注意的事项. 一.css 代码风格 1.css 命名语义化. 如类名: main 主体 container 内容 footer 站底 right.center ...
- DIV+CSS 网页布局之:混合布局
1.混合布局 在了解了一列.两列和三列布局之后,混合布局也就不难理解了,混合布局也可以叫综合型布局,那么混合布局就可以在一列布局的基础之上,分为两列布局,三列布局,网页布局的结构普遍都是三列布局,但是 ...
- CSS 实现流布局以及多列混合布局
基本流布局 <!DOCTYPE html > <html> <head> <meta charset="utf-8"> <ti ...
- 利用css进行网页布局
网页布局: 又称版式布局,是网页UI设计师将有限的视觉元素进行有机的排列组合,将理性的思维个性的化的表现出来,是一种具有个人艺术特色的视觉传达方式.传达信息的同时有美感.网页设计特点(相对纸媒来说). ...
- 利用Div+CSS(嵌套+盒模型)布局页面完整实例流程
Div+CSS(嵌套+盒模型)布局页面完整实例流程: <!DOCTYPE html><html> <head> <meta charset="UT ...
随机推荐
- multiset || 线段树 HDOJ 4302 Holedox Eating
题目传送门 题意:一个长度L的管子,起点在0.n次操作,0 p表示在p的位置放上蛋糕,1表示去吃掉最近的蛋糕(如果左右都有蛋糕且距离相同,那么吃同方向的蛋糕),问最终走了多少路程 分析:用multis ...
- ACM_逆序数(归并排序)
帮挂科 Time Limit: 2000/1000ms (Java/Others) 64bit IO Format: %lld & %llu Problem Description: 冬瓜发现 ...
- POJ 2002 Squares 数学 + 必须hash
http://poj.org/problem?id=2002 只能说hash比二分快很多.随便一个hash函数都可以完爆二分. 判断是否存在正方形思路如下: 1.枚举任意两个点,作为正方形的一条边,那 ...
- P1118 [USACO06FEB]数字三角形Backward Digit Su…
题目描述 FJ and his cows enjoy playing a mental game. They write down the numbers from 1 to N (1 <= N ...
- 锐动SDK应用于行车记录仪
方案架构 手机端直播与录播功能忠实记录旅途中各种突发事件,还原事实真相,与家人和朋友分享沿途美景,一同感受美妙之旅. 强大的视频编辑功能,像编辑图片一样给视频添加各种滤镜,配音,配乐,标题文字等特效. ...
- jmeter 连接 sqlite 进行压力测试
- iOS-UI控件之UIButton
---恢复内容开始--- UIButton 既可以显示图片,又可以显示文字,还能随时调整内部位置 系统自带尺寸 storyboard内部调整UIButton属性 状态 监听按钮点击事件 凡是继承自UI ...
- Boost库编译安装
一.Boost库介绍 Boost库是一个经过千锤百炼.可移植.提供源代码的C++库,作为标准库的后备,是C++标准化进程的发动机之一.Boost库由C++标准委员会库工作组成员发起,其 ...
- glm 矩阵乘法得反过来写
- 未来IT行业的掌控者
(题外话,我发现很多高手都喜欢讲代码实现,喜欢贴代码贴图,我个人不大喜欢这种方式,我觉得最重要的是思想,是想法,具体的实现代码实现步骤由读者自己去实现.这纯属我个人喜好,望各大内高手勿喷,可能是本人水 ...