仓酷云

标题: 来讲讲：兼容支流扫瞄器的CSS突变代码制造下拉菜单 [打印本页]
作者: 莫相离    时间: 2015-1-15 23:20
标题: 来讲讲：兼容支流扫瞄器的CSS突变代码制造下拉菜单
在网页制作中，有许多的术语，例如：CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识。
破洛洛文章简介：这篇文章将告知你怎样誊写CSS突变代码使其兼容支流扫瞄器：IE，Firefox3.6+，Safari和Chromr。别的，实验更新利用了CSS突变的下拉菜单演示。
Webkit先容CSS突变特征差未几有两年工夫了，但因为与年夜部分扫瞄器不兼容的缘故原由，很少实践使用。值得欣喜的是Firefox3.6+已撑持CSS突变，我们能够经由过程款式出现突变效果，而不用创立一个突变图象。这篇文章将告知你怎样誊写CSS突变代码使其兼容支流扫瞄器：IE，Firefox3.6+，Safari和Chromr。别的，实验更新利用了CSS突变的下拉菜单演示。
Webkit引擎
以下代码合用于webkit引擎的扫瞄器，如Safari，Chrome等。它会从顶部(#ccc)究竟部(#000)出现一个线性突变。
  1. background:-webkit-gradient(linear,lefttop,leftbottom,from(#ccc),to(#000));
复制代码
来讲讲：兼容支流扫瞄器的CSS突变代码制造下拉菜单
登录/注册后可看大图

Firefox3.6+
  1. background:-moz-linear-gradient(top,#ccc,#000);
复制代码
来讲讲：兼容支流扫瞄器的CSS突变代码制造下拉菜单
登录/注册后可看大图

InternetExplorer
以下的滤镜代码只能被IE注释实行：
  1. filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#cccccc,endColorstr=#000000);
复制代码
来讲讲：兼容支流扫瞄器的CSS突变代码制造下拉菜单
登录/注册后可看大图

跨扫瞄器CSS突变（演示）
分离将下面的三块代码，就是一个跨扫瞄器的突变效果。注：我增加了一个背景色彩以防用户利用的扫瞄器不撑持该功效。
  1. background:#999;/*fornon-css3browsers*/filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#cccccc,endColorstr=#000000);/*forIE*/background:-webkit-gradient(linear,lefttop,leftbottom,from(#ccc),to(#000));/*forwebkitbrowsers*/background:-moz-linear-gradient(top,#ccc,#000);/*forfirefox3.6+*/
复制代码
来讲讲：兼容支流扫瞄器的CSS突变代码制造下拉菜单
登录/注册后可看大图

CSS突变下拉菜单
以下是一个利用CSS3笔墨暗影(text-shadow)，圆角(radius-border)，暗影(box-shadow)的纯CSS突变下拉菜单，未触及任何JavaScript或图片。


来讲讲：兼容支流扫瞄器的CSS突变代码制造下拉菜单
登录/注册后可看大图

InternetExplorer的范围性
IE的突变滤镜不撑持多重突变(color-stop)，突变角度(gradientangle)，径向突变(radialgradient)。这意味着你只能利用StartColorStr和EndColorStr两种色彩指定程度或垂直的线性突变。
停止语
请注重并非一切扫瞄器都撑持CSS突变属性。为包管平安，在编码页面结构时不要依附于CSS突变，它只合适用来增强款式体现。
</p>
表现和内容相分离。将设计部分剥离出来放在一个独立样式文件中，你可以减少未来网页无效的可能。
作者: 再现理想    时间: 2015-1-17 21:55
Dreamweaver在所见即所得添加链接，也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈，用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。
作者: 活着的死人    时间: 2015-1-26 20:11
使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。
作者: 小魔女    时间: 2015-2-4 21:34
Dreamweaver在所见即所得添加链接时，可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。
作者: 老尸    时间: 2015-3-1 16:00
布局表格、绘制层、制作CSS样式表等，这些内容迷糊了我的视线，真是没想到制作一个精巧别致的网页是如此的困难，可是心有不甘。
作者: 简单生活    时间: 2015-3-10 21:15
滚动条)层属性--溢出(visible/hidden/scroll/auto)
作者: 透明    时间: 2015-3-17 11:11
由CS4 版本开始，则转用WebKit 排版引擎（亦即Google Chrome和Apple Safari浏览器所用的排版引擎）作为网页预览。
作者: 变相怪杰    时间: 2015-3-24 10:10
学Dreamweaver技术的过程其实是一个增加信心的过程。



欢迎光临 仓酷云 (http://ckuyun.com/) Powered by Discuz! X3.2