仓酷云

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

[DIV+CSS] 来讲讲:CSS3实例教程:探究cal()功效

[复制链接]
简单生活 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-15 23:11:04 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

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

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

x
可以增加更多的用户而不需要建立独立的版本。可以一次设计,随处发布。
破洛洛文章简介:CSS3中有良多的埋没的模块与功效。在这里我们将探究cal()功效;这个功效大概会改动你之前计划结构的体例.
CSS3中有良多的埋没的模块与功效。在这里我们将探究cal()功效;这个功效大概会改动你之前计划结构的体例,灰常的刁悍~~

CSS3的cal()功效是用来盘算长度(lengths),数字(numbers),角度(angles),过渡(transition)/动画工夫(animationtimes)大概声响频次(soundfrequencies)。它将同意你利用夹杂盘算范例—在CSS3中也是一个非常壮大的观点。

假定一个网站的计划要包括2个浮动的元素,你想要用一个60px的程度线将其分红2个不异宽度的元素,听起来仿佛简单?假如页面计划的是960px,那末很简单,每一个都是450px。

可是假如改元素是一个浮动框大概静态的结构怎样办?假如页面计划的是600px,那末年夜部分的计划者将会将程度线设置为10%,剩下的各45%,在宽屏大概方屏的扫瞄窗口中将会变形大概有边距!

侥幸的是,新功效cal()功效同意women盘算宽度。在下面的例子中,我们就能够将其设置为总宽度的50%-30px,比方:

#element1,#element2{float:left;width:calc(50%-30px);}#element2{margin-left:60px;}

假如你想让程度线的巨细是相对字体巨细儿定,如4em,没成绩:

#element1,#element2{width:calc(50%-2em);}

大概你想要在元素四周放一个2px的border,也没有成绩:

#element1,#element2{width:calc(50%-2em-4px);border:2pxsolid#000;}

笔者倡议只管是盘算简便些,可是庞大的盘算是可以完成的,比方:

#element1,#element2{width:calc((50%+2em)/2+14px);}

该元素的扫瞄器撑持情形:
Cla()功效是W3C保举的功效,以是你会猜到哪一个扫瞄器会一向撑持?大概你的推测错了。在笔者写这篇文章的时分,只要IE9撑持,Firefox也撑持(必要其独有的前缀):-moz-cla()。Webkit内核的扫瞄器今朝还没有撑持(如Chrome和Safari)大概是Opera,改功效很有效的,信任用不了多久这些扫瞄器城市撑持的。侥幸的是你能够在你的款式表(CSS)中利用加强款式:element1,#element2{width:45%;/*allbrowsers*/width:-moz-calc(50%-30px);/*Firefox4+*/width:calc(50%-30px);/*IE9+andfuturebrowsers*/}请服膺你必要增加响应的调剂(以面临分歧的扫瞄器)。#element2{margin-left:10%;/*allbrowsers*/margin-left:-moz-calc(60px);/*Firefox4+*/margin-left:calc(60px);/*IE9+andfuturebrowsers*/}CSS3的min()和max()假如你喜好cal()元素,你大概也会细化min()和max()功效,他们能够注释2个或2个以上用逗号离隔的元素值而且可以前往最年夜值大概最小值。#myelement{width:max(300px,30%,30em);font-size:min(10px,0.6em);}这个功效在避免font过于年夜大概十分小的情形下很有效,可是不幸的是今朝对照古代的扫瞄器都不撑持min()和max()功效,我们只能冷静等候扫瞄器们撑持吧~~</p>
表现和结构分离,在团队开发中更容易分工合作而减少相互关联性
深爱那片海 该用户已被删除
沙发
发表于 2015-1-17 20:12:40 | 只看该作者
Dreamweaver在所见即所得添加链接,也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈,用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。
老尸 该用户已被删除
板凳
发表于 2015-1-22 15:21:50 | 只看该作者
在刚开始接触网页的第一堂课上,听说网页制作会是一门很无聊并且很难听懂的过程,而事实却印证了这样一个事实。
灵魂腐蚀 该用户已被删除
地板
发表于 2015-1-31 09:05:21 来自手机 | 只看该作者
Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。
莫相离 该用户已被删除
5#
发表于 2015-2-6 19:00:15 | 只看该作者
在刚开始接触网页的第一堂课上,听说网页制作会是一门很无聊并且很难听懂的过程,而事实却印证了这样一个事实。
再见西城 该用户已被删除
6#
发表于 2015-2-18 08:53:56 | 只看该作者
dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS,三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。
山那边是海 该用户已被删除
7#
发表于 2015-3-6 03:29:05 | 只看该作者
滚动条)层属性--溢出(visible/hidden/scroll/auto)
因胸联盟 该用户已被删除
8#
发表于 2015-3-12 20:46:57 | 只看该作者
还是在Dreamweaver所见即所得添加链接是,可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。
愤怒的大鸟 该用户已被删除
9#
发表于 2015-3-20 03:56:30 | 只看该作者
不管老师做怎样的解释,而我却对它感到很是吃力,诸如里面有许多不知道的功能。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

GMT+8, 2024-5-18 08:20

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

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