仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 705|回复: 8
打印 上一主题 下一主题

[DIV+CSS] 学习下更简便的 CSS 清算浮动体例

[复制链接]
若相依 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-16 10:31:20 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
任何语言都有它的优越性,Div作为网页布局的标签,它可以很轻快的达到想要的效果,并且可以节约代码,我希望以后学这个标签的同学,要掌握它的每一个知识点,充分利用这个标签。



清算浮动有良多种体例,像利用br标签自带的clear属,利用元素的overflow,利用空标签来设置clear:both等等。但思索到兼容成绩和语义化的成绩,一样平常我们城市利用以下代码来清算浮动。
/*清算浮动*/
.clearfix:after{
visibility:hidden;
display:block;
font-size:0;
content:"";
clear:both;
height:0;
}
.clearfix{
zoom:1;
}
其道理是,在「初级」扫瞄器中利用:after伪类在浮动块前面加上一个非display:none的不成见块状内容来,并给它设置clear:both来清算浮动。在ie6和7中给浮动块增加haslayout来让浮动块撑高并一般影响文档流。
下面的代码应当是如今支流的清算浮动体例。如今付出宝就利用如许的体例。而如今,NicolasGallagher给出了一个更简便的计划:
.cf:before,.cf:after{
content:"";
display:table;
}
.cf:after{
clear:both;
}
.cf{
zoom:1;
}
道理仍是一样的。利用:after伪类来供应浮动块后的clear:both。分歧的是,埋没这个空缺利用的是display:table。而不是设置visibility:hidden;height:0;font-size:0;如许的hack。
值得注重的是这里中的:before伪类。实在他是来用途理top-margin边折叠的,跟清算浮动没有多年夜的干系。但由于浮动会创立blockformattingcontext,如许浮动元素上的另而一元素上假如恰好有margin-bottom而这个浮动元素恰好有margin-top的话,应当让他们不折叠(固然这类情形其实不罕见)。
当然从外界的各种渠道中,特别是互联网上,我们了解到现在市面上的公司并不关心网页是如何生成的,他们需要的是快速、高效的工作和花哨的页面。
小女巫 该用户已被删除
沙发
发表于 2015-1-18 06:47:46 | 只看该作者
经过两天的学习,总算对Dreamweaver有进一步的了解了,心中不免有些激动。今天和其他几位老师交流了一下,感觉受益匪浅.
愤怒的大鸟 该用户已被删除
板凳
发表于 2015-1-21 20:41:44 | 只看该作者
Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。
若天明 该用户已被删除
地板
发表于 2015-1-30 22:22:34 | 只看该作者
可以使用 CSS 检查工具进行设计。
灵魂腐蚀 该用户已被删除
5#
发表于 2015-2-6 16:26:47 | 只看该作者
帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。
再现理想 该用户已被删除
6#
发表于 2015-2-17 08:02:05 | 只看该作者
只要我们努力,无论是怎样的艰难险阻,成功依然会迎面直击。在刚开始时我觉得dreamweaver mx XX很难理解。
山那边是海 该用户已被删除
7#
发表于 2015-3-5 17:45:17 | 只看该作者
Dreamweaver在所见即所得添加链接时,可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。
爱飞 该用户已被删除
8#
发表于 2015-3-12 11:38:46 | 只看该作者
布局表格、绘制层、制作CSS样式表等,这些内容迷糊了我的视线,真是没想到制作一个精巧别致的网页是如此的困难,可是心有不甘。
第二个灵魂 该用户已被删除
9#
发表于 2015-3-19 21:54:33 | 只看该作者
这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时,就要多花时间对其产生初步的印象。此外,多操作也是非常重要的。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-5-23 14:27

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表