仓酷云

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

[DIV+CSS] 带来一篇CSS Hack兼容各扫瞄器是不是一般

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

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

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

x
不管你用什么工具软件制作网页,都有在有意无意地使用CSS。用好CSS能使你的网页更加简炼,同样内容的网页,有的人做出来有几十KB,而高手做出来只有十几KB。
网页制造poluoluo文章简介:CSSHack是在尺度CSS没举措兼容各扫瞄器显现效果时才会用上的弥补办法,我们在poluoluo.com中不泛深切先容CSS兼容性的文章。在各扫瞄器厂商剖析CSS没有告竣分歧前,我们只能用如许的办法来完成如许的义务。
CSSHack是在尺度CSS没举措兼容各扫瞄器显现效果时才会用上的弥补办法,我们在poluoluo.com中不泛深切先容CSS兼容性的文章。在各扫瞄器厂商剖析CSS没有告竣分歧前,我们只能用如许的办法来完成如许的义务。
  在poluoluo.com上你大概能搜刮到一年夜堆的CSSHack,可是我明天公布的你大概其实不都很懂得,由于这些都是只针对独自一个扫瞄器的CSSHack。为了向你展现这些CSSHack是不是一般运作,我新建六个P标签,并给每个P标签一个独有的id。这将向你展现CSSHack的运作情形。

<pid="opera">我来自Opera7.2-9.5</p>
<pid="safari">我是奇妙的Safari</p>
<pid="firefox">我来自Firefox</p>
<pid="firefox12">我是你爷爷Firefox1-2</p>
<pid="ie7">我是IE7</p>
<pid="ie6">我是脑瘸IE6</p>
  然后我让这些P标签默许都不显现

<styletype="text/css">bodyp{display:none;}</style>
  利用IECSS前提正文辨别IE扫瞄器
  最复杂的辨别IE扫瞄器的办法天然是利用他们的前提正文。微软创立了一个壮大的语法来让我们往完成这个功效。我不想再具体地先容IE前提正文了,我想你在搜刮引擎能搜刮到上万个搜刮条目,我这里只需这两个:

<!--[ifIE7]>
<styletype="text/css">
</style><![endif]-->
<!--[ifIE6]>
<styletype="text/css"></style>
<![endif]-->
  利用CSS剖析器Hacks辨别IE
  虽然说IE前提正文非常复杂好用,可是假如你想把全体的CSS放到一个文件里的话,那末你不能不利用其余办法。注重这里的IE7Hack将只对IE7无效,由于IE6基本不晓得>选择符。同时你也得注重>选择符关于其他扫瞄器一样是有效的。

html>body#ie7{*display:block;}
body#ie6{_display:block;}
  CSSHack辨别Firefox
  第一个利用了body:empty来辨别Firefox1和2。第二个hack利用了全体Firefox扫瞄器的专有扩大-moz。-moz只对Firefox无效,利用这个Hack年夜可不用忧虑其他扫瞄器的影响。

body:empty#firefox12{display:block;}
@-moz-documenturl-prefix(){#firefox{display:block;}}
  CSSHack辨别Safari
  Safari的CSShack与Firefox的hack看起来很像,利用的是Safari扫瞄器的专有扩大-webkit且只对Safari扫瞄器无效。

@mediascreenand(-webkit-min-device-pixel-ratio:0){#safari{display:block;}}
  CSSHack辨别Opera

@mediaalland(-webkit-min-device-pixel-ratio:10000),notalland(-webkit-min-device-pixel-ratio:0){head~body#opera{display:block;}}
  然后,全体合在一同即是

<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<htmllang="en">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8">
<title>CSSBrowserHacks-poluoluo.com</title>
<styletype="text/css">
bodyp{
display:none;
}


html:first-child#opera{
display:block;
}

html>body#ie7{
*display:block;
}

body#ie6{
_display:block;
}

body:empty#firefox12{
display:block;
}

@-moz-documenturl-prefix(){
#firefox{
display:block;
}
}


@mediascreenand(-webkit-min-device-pixel-ratio:0){
#safari{
display:block;
}
}

@mediaalland(-webkit-min-device-pixel-ratio:10000),notalland(-webkit-min-device-pixel-ratio:0){
head~body#opera{
display:block;
}
}
</style>
</head>
<body>
<pid="opera">我来自Opera7.2-9.5</p>
<pid="safari">我是奇妙的Safari</p>
<pid="firefox">我来自Firefox</p>
<pid="firefox12">我是你爷爷Firefox1-2</p>
<pid="ie7">我是IE7</p>
<pid="ie6">我是脑瘸IE6</p>
</body>
</html>
  CSSHack虽好且便利兼容各扫瞄器,可是通不外W3C考证,以是还得本人衡量是不是有需要往利用。</p>
Table中布局中,垃圾代码会很多,一些修饰的样式及布局的代码混合一起,很不利于直观。而Div更能体现样式和结构相分离,结构的重构性强。
admin 该用户已被删除
沙发
发表于 2015-1-17 22:33:24 | 只看该作者
Dreamweaver在所见即所得添加链接,也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈,用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。
不帅 该用户已被删除
板凳
发表于 2015-1-24 15:13:47 | 只看该作者
可以使用 CSS 检查工具进行设计。
分手快乐 该用户已被删除
地板
发表于 2015-2-7 16:50:44 | 只看该作者
运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环
愤怒的大鸟 该用户已被删除
5#
发表于 2015-2-22 21:25:47 | 只看该作者
还是在Dreamweaver所见即所得添加链接是,可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。
柔情似水 该用户已被删除
6#
发表于 2015-3-7 05:12:03 | 只看该作者
时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上
活着的死人 该用户已被删除
7#
发表于 2015-3-14 14:30:49 | 只看该作者
时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上
金色的骷髅 该用户已被删除
8#
发表于 2015-3-21 11:22:03 | 只看该作者
Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器,在编辑时能同时看到源码和设计界面,非常方便新手学习制作网页。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

GMT+8, 2024-12-29 22:41

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

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