Html/Css

border三角

.to-top{display:block;overflow:hidden;width:0px;height:0px;border:6px solid #ccc;border-color:#ccc #fff;border-width:0 6px 6px 6px;}

最佳IE6环境下实现PNG-24的应用方案

运用JS实现IE6下的PNG透明效果
相关JS地址:
http://www.14pc.com/demo/ie6png.js
方法:
在使用PNG的页面中引用代码
<!–[if IE 6]>
<script type=”text/javascript” src=”下载下来的JS路径”></script>
<script>
DD_belatedPNG.fix(’CSS选择器, 应用类型’);
</script>
<![endif]–>

引用函数是 DD_belatedPNG.fix() , 括号里分别填写应用PNG的CSS选择器(可使用ID选择器和类选择器)和应用类型(分为img和background两种)。
如DD_belatedPNG.fix(’#box-one, img’) 或者 DD_belatedPNG.fix(’.header, background’) 等。
这些可以简写成 DD_belatedPNG.fix(’#box-one, .header, img,background’); 。
更多选择器的如 DD_belatedPNG.fix(’#box-one, .header,#footer,.box-two a:hover, img,background’); 等等。
http://www.osmn00.com/?p=419


专门IE6中png的透明(滤镜方法)

前几天在做一个项目时.原来的logo是png格式,body的背景是水平平铺的渐变效果.在IE6中.logo处在土灰色中.因为IE6中不支持它.当时的做法.再做了一个gif的(gif效果质量有点不好)
专门针对IE6.在页面结构logo的地方加上一段JS:
var isie6 = window.XMLHttpRequest ? false: true;
if (document.getElementsByTagName("h1"))
document.getElementsByTagName('h1')[0].getElementsByTagName('img')[0].src = (isie6) ? 'imageStyle/logo.gif': 'imageStyle/logo.png';

我知道有点欺骗感觉.不过今天在看新浪围脖的html结构时发现这一段
CSS:
.bigName .logo {
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='http://simg.sinajs.cn/miniblog/images/common/logo.png'); _background-image: none; }

html:
<div class="bigName">
<h1 class="logo"><a href="javascript:;" id="id1"></a></div>

.看过之后我才明白IE6下PNG的透明原来是这样的.呼呼.学习哉!
方法也是用JS判断IE的版.如果IE6的话.用CSS中background属性显示logo.当然,如果这个logo还有链接的话.还要对这空的a标签进行block设置,而如果非IE6.那么就在这个a标签里写入一个img(不管你是appendChild还是innerHTML).
例子:


推荐阅读最佳IE6环境下实现PNG-24的应用方案

网页head标签里的一些知识

以下是QQ空间页面的引用

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn" lang="zh-cn" xmlns:qz="http://qzone.qq.com/">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="Content-Language" content="utf-8"/>
<meta name="author" content="ㄑ可乐ㄑㄑ"/>
<meta name="Copyright" content="Tencent"/>
<meta name="Description" content="...."/>
<meta name="Keywords" content="丶.8o23.乐,ㄑ可乐ㄑㄑ,Qzone,QQ空间,Blog,博客,网络日志,播客,腾讯,QQ,Tencent"/>
<meta name="robots" content="all"/>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
<title>丶.8o23.乐 [http://312709349.qzone.qq.com]</title>
<script type="text/javascript">document.domain="qq.com";var _s_=new Date();</script>
<base href="http://cnc.imgcache.qq.com/"></base>
<link rel="alternate" type="application/rss+xml" title="RSS news feed" href="http://feeds.qzone.qq.com/cgi-bin/cgi_rss_out?uin=312709349"/>
<link rel="Shortcut Icon" href="http://cnc.imgcache.qq.com/qzonestyle/qzone_client_v5/img/favicon.ico" type="image/x-icon"/>
<link rel="archives" title="丶.8o23.乐" href="http://b.cnc.qzone.qq.com/cgi-bin/blognew/simpleqzone_blog_title?hostuin=312709349"/>

head标签里的Meta和link了几个不知道.一个一个看:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

这个是定义当前文档的编码和类型,utf-8和text/html
<meta http-equiv="Content-Language" content="utf-8"/>

这个是定义当前内容的语言.
<meta name="author" content="ㄑ可乐ㄑㄑ"/>

网页的author(作者)
<meta name="Copyright" content="Tencent"/>

网页的Copyright(版权)
<meta name="Description" content="...."/>

网页内容的简短说明,这个从SEO上看文字最好控制在100左右
<meta name="Keywords" content="丶.8o23.乐,ㄑ可乐ㄑㄑ,Qzone,QQ空间,Blog,博客,网络日志,播客,腾讯,QQ,Tencent"/>

网页的关键字
<meta name="robots" content="all"/>

- 定义网页搜索引擎索引方式
此处的all是指搜索引擎将索引此网页与继续通过此网页的链接索引
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>

解决IE8的问题,让IE8以IE7模式游览
<link rel="alternate" type="application/rss+xml" title="RSS news feed" href="http://feeds.qzone.qq.com/cgi-bin/cgi_rss_out?uin=312709349"/>

Rss订阅.可以使网页获取XML.
<link rel="archives" title="丶.8o23.乐" href="http://b.cnc.qzone.qq.com/cgi-bin/blognew/simpleqzone_blog_title?hostuin=312709349"/>

网页的归档信息

另外还有一些不常见到的

<meta http-equiv="MSThemeCompatible" Content="Yes" />

--:是否在IE中 开/关系统的主题
<meta http-equiv="Content-Script-Type" Content="text/javascript" />

指明页面中脚本的类型
<meta http-equiv="Refresh" Content="5; Url=http://www.14pc.com/" />

让网页在多少秒后刷新自己或转到的页面
<meta name="google-site-verification" content="fAqQluW4K2gCz2kY9R2LkkVbBeNvSZsOiuzRLEo9H10" />

google验证网页时用到的
<meta name="date" content="2010-01-01T20:50:30+00:00" />

定义网页的的生成时间,格式为GMT

条件注释的一点小理解---[if ! IE]

Hack中的条件注释
1. <!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]-->
2. <!--[if IE]> 所有的IE可识别 <![endif]-->
3. <!--[if IE 5.0]> 只有IE5.0可以识别 <![endif]-->
4. <!--[if IE 5]> 仅IE5.0与IE5.5可以识别 <![endif]-->
5. <!--[if gt IE 5.0]> IE5.0以及IE5.0以上版本都可以识别 <![endif]-->
6. <!--[if IE 6]> 仅IE6可识别 <![endif]-->
7. <!--[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]-->
8. <!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]-->
9. <!--[if IE 7]> 仅IE7可识别 <![endif]-->
10. <!--[if lt IE 7]> IE7以及IE7以下版本可识别 <![endif]-->
11. <!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]-->

其中第一个非IE的情况,我犯了好几回错误.不过后来在DW中发现:
按此在新窗口浏览图片
这个似乎说明:!IE游览器对条件注释成灰色不解释
所以偶觉得:如果非IE中要条件注释只要注释后,让条件里的信息不成灰色就行了.
所以

<!--[if !IE]>
<!-->
<link href="css.css" rel="stylesheet" type="text/css" />
<!-->
<![endif]-->

从一本书上看到,非IE也可以是这样
<![if !IE]>
<link href="css.css" rel="stylesheet" type="text/css" />
<![endif]-->

这个在DW上看也不是灰色的.不过与上面的有些不同,这个包括<![if !IE]>这个注释结点也不是灰色的.

以上只是自己的理解..- -!!