慕课笔记利用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 ...
随机推荐
- _bzoj1014 [JSOI2008]火星人prefix【Splay】
传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=1014 天,写kth()时,把判断条件k <= siz[ch[x][0]]错写成了k & ...
- 链表中用标兵结点简化代码 分类: c/c++ 2014-09-29 23:10 475人阅读 评论(0) 收藏
标兵结点(头结点)是在链表中的第一个结点,不存放数据,仅仅是个标记 利用标兵结点可以简化代码.下面实现双向链表中的按值删除元素的函数,分别实现 带标兵结点和不带标兵结点两版本,对比可见标兵结点的好处. ...
- Hadoop集群搭建及MapReduce应用
一.Hadoop集群的搭建与配置 1.节点准备 集群规划: 主机名 IP 安装的软件 运行的进程 weekend 01 192.168.1.60 jdk.hadoop NameNode.DFSZKFa ...
- Spring注解驱动开发之Ioc容器篇
前言:现今SpringBoot.SpringCloud技术非常火热,作为Spring之上的框架,他们大量使用到了Spring的一些底层注解.原理,比如@Conditional.@Import.@Ena ...
- 搞定redis面试--Redis的过期策略?手写一个LRU?
1 面试题 Redis的过期策略都有哪些?内存淘汰机制都有哪些?手写一下LRU代码实现? 2 考点分析 1)我往redis里写的数据怎么没了? 我们生产环境的redis怎么经常会丢掉一些数据?写进去了 ...
- 跨库导表数据(sql)
程序员用 列子: insert into "000".tbFreeReportselect ReportCode ,ReportName ,GroupNamefrom openda ...
- 解决VS2010提示warning C4068: 未知的杂注
出现原因是#pragma声明问题,加上#pragma warning(disable:4068)即可 #pragma warning(disable:4068)#pragma execution_ch ...
- c++通过管道pipe获取cmd输出的字符
#include <stdio.h>#include<iostream>#include<string>using namespace std; // 描述:exe ...
- VC++模拟一次鼠标点击返回原位置
HWND h; RECT r1; POINT p;//x,y void ONCE() { h=::FindWindow(NULL,"biaoti"); ::GetWindowRec ...
- ansys中的.full文件中如何看刚度矩阵和质量矩阵(转)
http://fffff-2001.blog.163.com/blog/static/15507529200722492917460 Q:请问ansys中的.full文件中如何看刚度矩阵和质量矩阵? ...