仓酷云

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

[DIV+CSS] 给大家带来HTML5和CSS3给网站计划带来杰出效果

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

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

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

x
样式的调整更加方便。内容和样式的分离,使页面和样式的调整变得更加方便。
网页制造poluoluo文章简介:这些CSS3功效会给你的网站带来杰出的效果.
1.圆角效果

CSS3新功效中最经常使用的一项是圆角效果,尺度HTML方块工具是90度方角的,CSS3能够帮你完成圆角。
1.moz-border-radius:20px;
2.webkit-border-radius:20px;
3.border-radius:20px;
乃至单个角也能够完成圆角,不外Mozilla和Webkit的语法稍有分歧。
1.moz-border-radius-topleft:20px;
2.moz-border-radius-topright:20px;
3.moz-border-radius-bottomleft:10px;
4.moz-border-radius-bottomright:10px;
5.webkit-border-top-rightright-radius:20px;
6.webkit-border-top-left-radius:20px;
7.webkit-border-bottom-left-radius:10px;
8.webkit-border-bottom-rightright-radius:10px;
所撑持的扫瞄器:Firefox,Safari,Chrome
用例:Twitter.
2.图形化界限

望文生义,图形化界限就是同意利用图片作为工具的界限,语法以下:
1.border:5pxsolid#cccccc;
2.webkit-border-image:url(/images/border-image.png)5repeat;
3.moz-border-image:url(/images/border-image.png)5repeat;
4.border-image:url(/images/border-image.png)5repeat;
这里,border:5px设定了界限的宽度,然后,每一个界限的图片界说告知扫瞄器,利用图片的多年夜一部分来充任界限。界限图片还能够针对每条边独自设置:
1.border-bottom-rightright-image
2.border-bottom-image
3.border-bottom-left-image
4.border-left-image
5.border-top-left-image
6.border-top-image
7.border-top-rightright-image
8.border-right-image
撑持的扫瞄器:Firefox3.1,Safari,Chrome.
用例:Blog.SpoonGraphics.
3.块暗影与笔墨暗影

暗影效果曾让Web计划师既爱又恨,如今,有了CSS3,你不再必要Photoshop,已有网站在利用这个功效了,如24Wayswebsite.
1webkit-box-shadow:10px10px25px#ccc;
2moz-box-shadow:10px10px25px#ccc;
3box-shadow:10px10px25px#ccc;
前两个属性设置暗影的X/Y位移,这里分离是10px,第3个属性界说暗影的虚化水平,最初一个设置暗影的色彩。笔墨暗影也能够如许设置:
text-shadow:2px2px5px#ccc;
撑持的扫瞄器:Firefox3.1,Safari,Chrome(只撑持Box暗影),Opera(只撑持笔墨暗影).前3个数字暗示红绿蓝三色的值,最初一个值代表通明度,别的,我们还可使用opacity完成通明度(今朝的灯箱效果多利用该技能-译者)
用例:24Ways.
4.利用RGBA完成通明效果

今朝,Web计划中的通明效果次要靠PNG图片完成(但在IE扫瞄器撑持得其实不好-译者),在CSS3,能够间接完成通明效果。
1.rgba(200,54,54,0.5);
2.background:rgba(200,54,54,0.5);
3.color:rgba(200,54,54,0.5);
1.color:#000;
2.opacity:0.5;
撑持的扫瞄器:Firefox,Safari,Chrome,Opera(opacity)和IE7(opacity,withfixes).
用例:24Ways(RGBA).
5.利用@Font-Face完成定制字体

Web计划中有几种字体是对照平安的,如Arial,Helvetica,Verdana,Georgia,ComicSans(中文的,一样平常来讲宋体是独一平安的-译者),如今,利用CSS3的@font-face能够本人指定字体,不外由于牵涉到版权成绩,实践能用的字体也是无限的(别的,体积复杂的中笔墨体也是一个欠好办理的成绩-译者)。
语法以下:
@font-face{
font-family:Anivers;
src:url(/images/Anivers.otf)format(opentype);
}
撑持的扫瞄器:Firefox3.1,Safari,Opera10andIE7(必要一番周折,假如你不怕贫苦,能够在IE完成这个功效,请参考:makefont-faceworkinIE)
用例:TapTapTap.
固然CSS3尚在开辟中,下面提到的这些功效已能够在部分扫瞄器中利用了,特别是Safari。不幸的是,Safari并不是支流扫瞄器。
Firefox今朝具有大批用户基本,别的,行将推出的Firefox3.1撑持很多CSS3效果,由于Firefox用户的晋级主动性很高,因而,会有很多用户能够提早体验CSS3的新功效。
GoogleChrome往年方才公布,它基于Webkit引擎,因而和Safari很类似,由于Safari次要用于Mac市场,Chrome能够恰好填补Windows市场的空白。
依据统计数据,2008年11月止,44.2%的用户利用Firefox,3.1%利用Chrome,2.7%利用Safari,意味着CSS3的部分功效已能够撑持近半Internet用户,而在Web计划圈子,这个比例大概更高,约莫有73.6%(Blog.SpoonGraphics供应的数据)
6.负面要素
下面报告的这些CSS3功效会给你的网站带来杰出的效果,但仍有一些负面的要素必需思索:
1.InternetExplorer:46%的Internet没法看到这些效果,因而不要将这些器材用于主要的计划。同时包管,在这些效果不起感化的中央,有替换计划可用。
2.CSS考证成绩:这些CSS3功效并不是终极版本,今朝分歧的扫瞄器利用分歧标签完成这些功效,大概为你的StyleSheet带来考证上的成绩。
3.痴肥代码:由于分歧扫瞄器要利用分歧界说语法,终极将招致你的CSS代码非常痴肥。
4.不妥的利用:对这些效果的不妥利用,大概带来一些不良成果,暗影效果特别云云。

目前我们的站就是div+css做的,美工可以通过css直接控制我的程序输出的页面动态数据的样式DIV就只是布局元素.
只想知道 该用户已被删除
沙发
发表于 2015-1-17 23:44:03 | 只看该作者
时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上
灵魂腐蚀 该用户已被删除
板凳
发表于 2015-1-24 19:48:07 | 只看该作者
Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。
飘飘悠悠 该用户已被删除
地板
发表于 2015-2-2 13:55:45 | 只看该作者
由CS4 版本开始,则转用WebKit 排版引擎(亦即Google Chrome和Apple Safari浏览器所用的排版引擎)作为网页预览。
飘灵儿 该用户已被删除
5#
发表于 2015-2-7 22:55:52 | 只看该作者
还可以在Dreamweaver常用工具中选择超级链接,完成相应的填写即可。
金色的骷髅 该用户已被删除
6#
发表于 2015-2-23 18:42:11 | 只看该作者
这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时,就要多花时间对其产生初步的印象。此外,多操作也是非常重要的。
变相怪杰 该用户已被删除
7#
发表于 2015-3-7 10:10:25 | 只看该作者
这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时,就要多花时间对其产生初步的印象。此外,多操作也是非常重要的。
因胸联盟 该用户已被删除
8#
发表于 2015-3-15 00:54:08 | 只看该作者
所见则所得网页编辑器的优点就是直观性,使用方便,容易上手.
谁可相欹 该用户已被删除
9#
发表于 2015-3-21 19:06:09 | 只看该作者
帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

GMT+8, 2024-6-2 16:54

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

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