1. 云栖社区>
  2. 技术文集>
  3. 列表>
  4. 正文

2天驾驭DIV+CSS!第三课

作者:用户 来源:互联网 时间:2016-06-25 12:58:34

代码浮动效果方块影响

2天驾驭DIV+CSS!第三课 - 摘要: 本文讲的是2天驾驭DIV+CSS!第三课, 目的就是为了清除蓝色方块的浮动对下面绿色方块的影响!是影响哟~是清除影响,而不是清楚蓝色方块的浮动,或者说清除蓝色方块的浮动对下面区域块产生的作用! 还记得

目的就是为了清除蓝色方块的浮动对下面绿色方块的影响!是影响哟~是清除影响,而不是清楚蓝色方块的浮动,或者说清除蓝色方块的浮动对下面区域块产生的作用!

还记得第二课我们做的例子的效果么?最后效果是,红色方块和蓝色方块都处于一行,我们使用“Float:left”,打击了块状元素的“霸道”即块状元素不允许其他元素和它处于同一行。我们将红色方块的CSS代码中加入了“Float:left;”后,红色方块终于允许蓝色方块和它处于同一行。如图:
 

2天驾驭DIV+CSS!第三课-2天驾驭div <a href=css">
我们换一种方法表达上面的意思,因为红色方块的“左侧浮动”,才导致蓝色方块上移至红色方块的尾后;
在上个例子中,为了达到浏览器兼容性,我们分别在红色蓝色方块CSS代码中分别加了“Float:left;”,这样IE和FF中显示效果一样,如果此时我们还想放一个宽度400像素,高度100的绿色方块,并让其处于第二行,效果如下图:
2天驾驭DIV+CSS!第三课-一堂课学会div css 
可是这时候不管怎么放,在IE中的效果始终是2天驾驭DIV+CSS!第三课-div css课件
导致绿色拍到蓝色的后面这种情况就是因为蓝色方块CSS代码中含有"Float:left;",但是为了浏览器兼容性,又不能去掉(什么?这句话看不明白,只能说明第二节课你没有好好学,好好品味!),怎么办?
好办~!只要在CSS代码中加入下面这段代码:
.clear{clear:both;}
并在HTML代码中加入下面代码:
<div class="clear"></div>
上面这句话究竟加在那个位置呢,要加在蓝色方块和绿色方块中间,然后看看效果是不是我们想要的了~^_^
<div id="redBlock">博客的左侧</div>
<div id="blueBlock">博客的右侧</div>
<div class="clear"></div>
<div id="greenBlock">博客的版权信息</div>
目的就是为了清除蓝色方块的浮动对下面绿色方块的影响!是影响哟~是清除影响,而不是清楚蓝色方块的浮动,或者说清除蓝色方块的浮动对下面区域块产生的作用!(仔细品品我说的这句话!)
如果还是不明白,你就在红色方块和蓝色方块中间加上“<div class="clear"></div>”,看看效果变成什么样子,然后再品品我刚才说的话!

这节课就到这里,下节课我们做一个导航条,很实用的哟!一定要把前三节吃透,不然第四节会跟不上理解不透!
第三课全代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>右侧浮动Float:left-CSS学习互动社区</title>
<style type="text/css">
<!--
#redBlock,#greenBlock,#blueBlock{
  width:200px;
  height:200px;
  color:#FFF;
}
#redBlock{
 background:#900;
 float:left;
}
#blueBlock{
 background:#009;
 float:left;
}
#greenBlock{
 width:400px;
 height:100px;
 background:#090; 
}
.clear{clear:both;}
-->
</style>
</head>

<body>
<div id="redBlock">博客的左侧</div>
<div id="blueBlock">博客的右侧</div>
<div class="clear"></div>
<div id="greenBlock">博客的版权信息</div>

</body>
</html>

本文来自www.cssxuexi.cn *尊重他人劳动成果,转载请自觉注明出处! 



以上是云栖社区小编为您精心准备的的内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有 的相关内容,欢迎继续使用右上角搜索按钮进行搜索代码 , 浮动 , 效果 , 方块 影响 2天驾驭div css、一堂课学会div css、div css课件、div css、div css教程,以便于您获取更多的相关知识。

div布局-关于div浮动!网页布局

...述:例如:我有一个div 800*800 第一个DIV 第二个DIV 第三个DIV 第四个DIV--结果显示: 第一二个DIV能浮动一起 第三四个div以第一个DIV的高度开始浮动--问题:我要怎么样让第三四个DIV紧挨到第一...

JavaScript驾驭网页-获取网页元素_javascript技巧

推荐阅读:JavaScript驾驭网页-DOM JavaScript驾驭网页-CSS与DOM 利用DOM分割HTML 利用JavaScript控制网页内容其实很像烹饪。只是不用收拾列羹剩肴,但也没有办法享受美味的成果。 不过,你将能完整网页内容的HTML构成要素:更重要的...

【php基础班】第7天 overflow属性、CSS引入方式、定位、布局、margin合并问题、浏览器兼容

...注:我们在做网站时开发时,通常用的就是这种方式。 第三节 CSS优先级 当CSS冲突的时候 就近原则 行内样>内嵌样式>外部样式 行内样式>id>class>标签 //权重值,特性值 CSS继承 和文本相关的一般都会继承。、 边框,宽,高,margin...

第三课.Axis使用插件生成服务器代码,调用远程接口

一.使用插件生成代码 1.右键Other项目 2.输入远程WebService地址 http://127.0.0.1:8080/HNFGWOA_MySQL_V1.0/services/xxfbzxService?wsdl 3.选择输出路径 4.刷新项目,就可以看到生成的文件 二.java代码调用测试 public static void main(String[] args) thro...

【JavaScript从入门到精通】第三课 初探JavaScript魅力-03

第三课 初探JavaScript魅力-03 函数传参 上节课的时候我们已经讲了什么是函数,实际上,函数在功能上就类似于css的class一样,将一段代码包裹起来使用。为了让函数的功能更加的丰富和实用,我们需要用到的就是 函数传参 。我们...

前三篇
后三篇