仓酷云

标题: 来谈谈：CSS3属性使网站计划加强同时不用弱可用性 [打印本页]

作者: 小妖女 时间: 2015-1-15 23:37
标题: 来谈谈：CSS3属性使网站计划加强同时不用弱可用性
所有的设计第一步就是构思，构思好了。
网页制造poluoluo文章简介：上面破洛洛将带你一同砚习5个分歧的CSS3属性，假如从如今起你就入手下手实验在你的网站中利用它们，那你将让你的网站完成既计划加强又不会消弱可用性。
　　层叠款式表(css)是Web计划的一种言语，CSS的下一代版本CSS3已蓄势待发。你是不是可看入手下手利用它们却又不知从何动手呢？固然另有一些新属性没有失掉官方切实其实认，可是一些扫瞄器已入手下手撑持来自CSS3得新特征了。
　　但成绩是——很多扫瞄器撑持了，惟独最次要的InternetExplorer扫瞄器仍不撑持！
　　良多人特别是中国的前端er们会以为既然IE不撑持，那就先不体贴CSS3。实在不该如许的，CSS3如今能为我们带来甚么优点呢？最少如今我们就可以利用那些CSS3的新特征来举行计划加强。
计划加强是指在不影响网站可用性的基本上，利用一些初级款式来提拔网站的视觉效果。
实在关于怎样辨别计划加强与不影响可用性的区分仍是有必定的坚苦的:

计划加强的例子：利用border-radius属性为盒模子增加圆角，让网站更富有吸引力。不外，即便圆角属性不被扫瞄器撑持，它也不会影响网站的一般利用。
计划消弱可用性的例子：在某个元素下面层叠了一个利用了RGBA色彩值背景的元素，下面的元素利用半通明效果，很明显这两个元素都是必需让用户看到的。很明显，有一部分利用旧扫瞄器的用户想要看到上面的元素内容是很坚苦的，这类计划就下降了可用性。

　　上面破洛洛将带你一同砚习5个分歧的CSS3属性，假如从如今起你就入手下手实验在你的网站中利用它们，那你将让你的网站完成既计划加强又不会消弱可用性。
　　以下是在使用CSS3计划加强之前的一般效果:

1.通明色彩

今朝撑持的扫瞄器:AppleSafari4,Firefox3.0.5+,GoogleChrome1+
RGBA同意你把持某个特征添补色彩的不通明度，不管是文本、背景、边框仍是背景色彩。
设置色彩通明度的时分，你必要利用RGB色彩值，不成以再利用十六进制值，而谁人”A”则代表通明度，你能够设置从0(通明)到1(不通明)之间的数值。
1
rgba(0-255,0-255,0-255,0-1)你还能够独自利用RGB值:
1
2
3
4
5
6
7
8
.topbox{
color:rgb(235,235,235);
color:rgba(255,255,255,0.75);
background-color:rgb(153,153,153);
background-color:rgba(0,0,0,0.5);
border-color:rgb(235,235,235);
border-color:rgba(255,255,255,0.65);
}有个好动静就是最少你可使用CSS滤镜独自针对IE扫瞄器设置背景色彩。

点击图片检察明晰年夜图
注:因为Wordpress不克不及显现以上代码，以是将其弄成图片，以是你必要自行写以上代码了哦。

2.圆角

今朝撑持的扫瞄器:AppleSafari3+,Firefox1+,GoogleChrome1+
边框半径用于设置和模子每一个角的曲率，似乎有一对与特定的角落虚圆半径(r):
1
border-radius:r;固然border-radius是将来CSS3的一部分，不外如今不管Mozilla(Firefox)和Webkit(Safari和Chrome)都已有了本人的圆角版本。
1
2
3
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;你也能够独自设置某个角的半径:
CSS3
Mozilla
WebKit
border-top-right-radius
-moz-border-radius-topright
-webkit-border-top-right-radius
border-bottom-right-radius
-moz-border-radius-bottomright
-webkit-border-bottom-right-radius
border-bottom-left-radius
-moz-border-radius-bottomleft
-webkit-border-bottom-left-radius
border-top-left-radius
-moz-border-radius-topleft
-webkit-border-top-left-radius
border-radius
-moz-border-radius
-webkit-border-radius

3.笔墨暗影

今朝撑持的扫瞄器:AppleSafari3+,Firefox3.0.5+,GoogleChrome1+
为文本增加暗影效果，把持暗影左/右和上/下的偏移，还能够设置暗影的色彩。
1
text-shadow:xyblurcolor;你能够分离通明色彩值来设置笔墨暗影的明暗:
1
text-shadow:-2px2px10pxrgba(0,0,0,.5);你还可让笔墨有多个暗影，每一个暗影属性利用逗号分开:
1
2
text-shadow:0010pxrgba(0,255,0,.5),-10px5px4pxrgba(0,0,255,.45),
15px-4px3pxrgba(255,0,0,.75);

4.盒暗影

今朝撑持的扫瞄器:AppleSafari4+,Firefox3+,GoogleChrome1+
为某个和元素增加暗影的CSS3属性声明格局与文本暗影不异:
1
box-shadow:xyblurcolor;和文本暗影一样，Mozilla和Webkit也有他们本人的盒暗影划定规矩:
1
2
3
-webkit-box-shadow:0010pxrgb(0,0,0);
-moz-box-shadow:0010pxrgb(0,0,0);
box-shadow:0010pxrgb(0,0,0);你也能够为某个盒元素增加多个暗影，仍旧是利用逗号分开。
1
2
3
4
5
6
-webkit-box-shadow:0020pxrgb(0,255,0),-10px5px4pxrgba(0,0,255,.45),
15px-20px20pxrgba(255,0,0,.75);
-moz-box-shadow:0020pxrgb(0,255,0),-10px5px4pxrgba(0,0,255,.45),
15px-20px20pxrgba(255,0,0,.75);
box-shadow:0020pxrgb(0,255,0),-10px5px4pxrgba(0,0,255,.45),
15px-20px20pxrgba(255,0,0,.75);

5.多背景图

今朝撑持的扫瞄器:AppleSafari1.3+,GoogleChrome1+
为某个单一元素增加多个背景图的话仅必要为分歧的背景图声明之间增加都好来分开开。固然，你还要为别的扫瞄器筹办一张完全的图片。
1
2
3
4
5
background-image:url(astro-127531.png);
background-image:url(astro-127531.png),url(Hubble-112993.png);
background-repeat:no-repeat;
background-position:bottomleft;
background-position:bottomleft,topright;

“买五送一”-扭转任何元素

今朝撑持的扫瞄器:AppleSafari4+,Firefox3.5+,GoogleChrome1+
固然它今朝不算是CSS3中的一部分，但Webkit已有了它本人的一套变形属性，Mozilla也在效仿。变形包括了良多分歧范例的值，不外个中最成心思也是最有效的就是扭转了。
1
2
-webkit-transform:rotate(-15deg);
-moz-transform:rotate(-15deg);

下图为不撑持CSS3的扫瞄器所出现出来的模样(如Opera9):

检察实例Demo(必要利用Safari4+,Firefox3.5+,orChrome1+扫瞄器)

一个样式规则由一个选择器后跟一个声明块组成，声明块是一个大容器,由大括号中间的部分组成,声明块中间的空间会被忽略。

作者: 透明 时间: 2015-1-17 23:36
还可以在Dreamweaver常用工具中选择超级链接，完成相应的填写即可。

作者: 再见西城 时间: 2015-1-24 12:46
学Dreamweaver技术的过程其实是一个增加信心的过程。

作者: admin 时间: 2015-2-1 16:23
帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。

作者: 海妖 时间: 2015-2-7 09:57
在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。

作者: 再现理想 时间: 2015-2-21 22:21
俗话说：兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中，我们难免会遇到各种各样的问题。

作者: 谁可相欹 时间: 2015-3-6 22:48
HTML技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器）

作者: 山那边是海 时间: 2015-3-13 23:08
学Dreamweaver技术的过程其实是一个增加信心的过程。

作者: 分手快乐 时间: 2015-3-20 23:07
每天上网看着那样多的网页，于是我才下定决心选择了网页制作这一门课程，目的就是希望以后能够做出一个完美的网页来。

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