仓酷云

标题: 来谈谈：css实例教程:了解Float的寄义 [打印本页]

作者: 因胸联盟 时间: 2015-1-15 23:26
标题: 来谈谈：css实例教程:了解Float的寄义
凡是和我讨论客户段效率的全是脑子有问题的，影响的全是图片和FLASH，所以我一直建议一个提交按钮就不要用图片带代替了。
网页制造poluoluo文章简介：css实例教程:了解Float的寄义.
课程关头词：浮动

页面结构有两种体例
1）浮动Float
2）定位Position

明天就来一个小小的实习，让人人了解Float的寄义

【例子】
请求：
1）两个方块，一个白色#900，一个蓝色#009；
2）白色方块宽度和高度均为200像素，蓝色方块
宽度为300像素，高度为200像素；
3）白色方块蓝的上外边距(margin-top)和左外边距(margin-left)均为20像素；

页面效果以下：

源代码：例子2.rar人人应当注重到了，固然白色方块的宽度并非100%，可是蓝色并未和白色处于统一行，这就是块状元素对照“强横”的一点，（即便块状元素的宽度不是100%，它也不同意其他元素和他同在一行）为了打消这类“霸权”，让白色和蓝色方块都处在一行，如图

此时就必要拿出我们的利器Float！只必要在白色方块的CSS内里加上“float:left;”，这时候候在IE6中能够看到蓝色方块切实其实跑到白色方块的前面了，而且处于一行了，可是在FireFox中却酿成了以下效果：

这时候候就必要注重了，FF中假如后面的地区浮动了，前面的谁人地区很有大概就会和后面的地区产生堆叠并错位。
怎样才干办理这个成绩，办理这个扫瞄器兼容的成绩，很简单，只必要在蓝色方块的CSS代码中也到场“Float:left;”，成绩就办理了，加上尝尝，看看在FF中蓝色方块是否是和白色方块处于一行了~

到这里，人人应当分明Float的感化了吧，就是为了打消块状元素“霸权主义”的一把利器！在结构页面的时分偶然候是必要打消块状元素霸权主义才干结构好哟，好比KwooJan的博客两头内容部分，分为右边(LEFT)和右侧(RIGHT)，就是要用下面这个办法结构的哟，以下图

仔细的同砚会注重到，在IE6中白色方块间隔扫瞄器的右边距并非CSS代码中界说的20像素，而是40像素，以下图：

实在这是IE6的一个BUG，(IE6双倍边距BUG)，只需满意上面3个前提才会呈现这个BUG:

1）要为块状元素；
2）要左边浮动；
3）要有左外边距(margin-left)；

办理这个BUG很简单，只必要在响应的块状元素的CSS树形中到场“display:inline;”，代码以下：

#redBlock{
width:200px;
height:200px;
background:#900;
margin-top:20px;
margin-left:20px;
float:left;
display:inline;
}

如今再看看，是否是IE6和FF显现一样了呢~

呵呵，这节课也对照简单吧，假如人人有不分明的能够留言，我会做进一步注释。
下节课，我们讲讲“浮动扫除(Clear)”成绩！

终极代码：终极代码.rar(587Bytes)
精简后的代码CSS加载更快，人人一看就分明了^_^</p>
Table中布局中，垃圾代码会很多，一些修饰的样式及布局的代码混合一起，很不利于直观。而Div更能体现样式和结构相分离，结构的重构性强。

作者: 因胸联盟 时间: 2015-1-17 22:39
布局表格、绘制层、制作CSS样式表等，这些内容迷糊了我的视线，真是没想到制作一个精巧别致的网页是如此的困难，可是心有不甘。

作者: 爱飞 时间: 2015-1-31 13:28
Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。

作者: 莫相离 时间: 2015-2-6 19:53
不管老师做怎样的解释，而我却对它感到很是吃力，诸如里面有许多不知道的功能。

作者: 不帅 时间: 2015-2-18 12:20
技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。

作者: 灵魂腐蚀 时间: 2015-3-6 08:09
使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。

作者: 乐观 时间: 2015-3-12 23:30
只要我们努力，无论是怎样的艰难险阻，成功依然会迎面直击。在刚开始时我觉得dreamweaver mx XX很难理解。

作者: 深爱那片海 时间: 2015-3-20 06:03
使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。

欢迎光临仓酷云 (http://ckuyun.com/)