存档

‘web前端’ 分类的存档

如何安装google page speed？

2010年7月22日 渴慕晨光 3 条评论

使用google网站管理员工具时，在性能选项里面提到了page speed可以用来测试网站速度。
那怎么安装google page speed呢？
一 前提条件
1 作为firefox插件，必须有firefox
2 必须先安装firefox的firebug插件 阅读全文...

分类: web前端 标签: , ,

建议保护图片JavaScript屏蔽鼠标右键选择操作

2010年5月13日 渴慕晨光 没有评论

不想让人下载图片那是不可能的，但是对于电脑菜鸟来说JavaScript屏蔽鼠标右键选择这个操作可以起到一些作用。

<script language="javascript" type="text/javascript">
<!--
document.oncontextmenu=function(){return   false;}//屏蔽右键菜单
document.onpaste=function(){return   false;}//屏蔽粘贴
document.oncopy=function(){return   false;}//屏蔽复制
document.oncut=function(){return   false;}//屏蔽剪切
document.onselectstart=function(){return   false;}//屏蔽选择
//-->
</script>

分类: web前端 标签: ,

QQ,MSN,SKYPE,阿里旺旺等在线状态代码

2009年12月10日 渴慕晨光 没有评论

1.如何在网页上显示腾讯QQ在线洽谈?
QQ在线咨询代码(qq在线交谈代码/qq在线客服代码/qq在线状态代码/qq在线客服代码)
(将qq号码换成你的号码,site后面换成你的网站就可以了)

<a target="blank" href="http://wpa.qq.com/msgrd?V=1&Uin=qq号码&Site=QQ咨询&Menu=yes"><img border="0" SRC=http://wpa.qq.com/pa?p=1:qq号码:6 alt="点击这里给我发消息" align="absmiddle"></a>
阅读全文...

分类: web前端, web编程 标签: , , ,

IE浏览器的条件注释：CSS判断浏览器

2009年9月28日 渴慕晨光 1 条评论
<!--[if lte IE 6]>
<LINK rel="stylesheet" type="text/css" href="images/StyleSheet.css" />
<![endif]-->
<!--[if IE 7]>
<LINK rel="stylesheet" type="text/css" href="images/css.css" />
<![endif]-->
#example{color:red ;}/*firefox*/
* html #example{color:blue;}/*ie6*/
*+html #example{color:green;}/*ie7*/
<!–[if lte IE 6]>……<![endif]–>
Ite：less than or equal to意思是小于或等于IE6浏览器，用于IE浏览器的条件注释，常用于CSShack，针对IE的JS等。
在进行WEB标准网页的学习和应用过程中，网页对浏览器的兼容性是经常接触到的一个问题。其中因微软公司的Internet Explorer(简称IE)占据浏览器市场的大半江山，此外还有Firefox、Opera等。需要对这些浏览器进行兼容。 阅读全文...
分类: web前端, web编程 标签: , , ,

让页面中所有链接都在新窗口打开

2009年7月22日 渴慕晨光 5 条评论

突然要用到的一个功能，不错。要想页面上所有的链接都在新窗口打开，其实很简单，就只要一段简单的代码就搞定了。
在需要用此功能的页面<head>与 </head>之间加入：

<base target="_blank">

注意：< base >必须写在< head >标记里

分类: web前端, web编程 标签:

如何跳出整个框架集页面？

2008年10月9日 渴慕晨光 没有评论

 问题：
框架集 有三个页面，top,left,main。left上面有一个logout，链接到logout.php，想logout之后，跳出框架集的三个页面。

自己的解决方法：<a href="logout.php" target="_top">logout</a></p>

logout.php里面header到首页就可以了。

分类: web前端, web编程 标签:

IE6中伪类:hover的使用及BUG及修正（CSS）

2008年8月22日 渴慕晨光 2 条评论

:hover 是我们在 CSS 设计中最常运用的伪类之一，许多绚丽效果的实现离不开伪类 :hover，比如我们常见的纯 CSS 菜单、相册效果等等。

或许用了这么久的伪类 :hover，还有部分朋友还不完全了解 hover 的规则：

在 CSS1 中此伪类仅可用于 a 对象。且对于无 href 属性（特性）的 a 对象，此伪类不发生作用。

在 CSS2 中此伪类可以应用于任何对象。

但目前 IE5.5、IE6 仅支持 CSS1 中的 :hover，不过新出的 IE7 是支持 CSS2 中的 :hover。

当我们用伪类 :hover 做某些特殊效果时，依据 CSS2 很好完成，但为了现在占据主流浏览器的 IE6 ，我们又不得不做很多工作，比如给添加a元素等来模拟完成最终的效果。

或许这样讲太空洞，请看下面一个常见的触发显示的例子（仅选择IE6为例讲解）。

我们先用 CSS2 的写法来实现：

XHTML部分：

<ul>
<li>鼠标移过来触发我吧！<a href="#" title="">哈哈，终于被你发现了！</a></li>
</ul>

CSS部分：

* {
margin:0;
padding:0;
}
ul {
list-style:none;
margin:100px;
}
li {
height:100px;
width:100px;
background:#000;
font-size:12px;
color:#fff;
position:relative;
}
li a {
display:none;
}
li:hover a{
display:block;
text-decoration:none;
width:100px;
height:100px;
background:#c00;
position:absolute;
top:50px;
left:50px;
color:#fff;
}

大家可以测试发现在 Firefox 等对 CSS2 支持很好的浏览器中，可以显示我们所要达到的效果，但在 IE6 中却无法实现。

下面让我们换一种思维，所用 CSS1 的写法来看看，这个时候由于无法支持 li 元素 :hover 的使用，我们只好把所有文字包含到 a 中，对 a 使用 :hover ，并且将要显示隐藏的部分放到 span 元素中，首先我们对 XHTML 进行部分调整，调整如下：

XHTML部分：

<ul>
<li><a href="#" title="">鼠标移过来触发我吧！<span>哈哈，终于被你发现</span></a></li>
</ul>

CSS 中我们将 a 的设置成块级元素，并使 a 的大小和宽度和 li 的相同，并设置 a 为相对位置，用 a 来模拟上例中的 li ；而用 span 来模拟上例中的 a ，设置 span在默认情况下隐藏（display:none;），当 a 被触发时（:hover），则 span 显示（display:block;）

CSS部分：

* {margin:0;padding:0;}
ul {list-style:none;margin:100px;}
li {height:100px;width:100px;background:#000;font-size:12px;}
li a {
display:block;
height:100px;
width:100px;
position:relative;
color:#fff;
text-decoration:none;
}
li span {display:none;}
li a:hover span {
display:block;
width:100px;
height:100px;
background:#c00;
position:absolute;
top:50px;
left:50px;
color:#fff;
}

可我们发现上例中的效果，在 IE6 中依然无法显示，难道我们的代码写错了，可检查来检查去一点错误也没有（不信你找个高高手问问，他们依然会回答你，这代码完全正确），难道是标准中的说明是错的？还是 IE6 浏览器连 CSS1 也不支持？很多疑问从四面八方跑来了……

那到底是什么问题呢？
不是标准说明的错，也不是 IE 浏览器不支持 CSS1，而是 IE 浏览器自身解析的问题，是 IE5.5 和 IE6 中伪类:hover 的 BUG。

那又该如何解决这个问题呢？
这个 BUG 可以通过在链接的属性中增加某些特殊的 CSS 属性声明来消除。

下面我们对上面的第二个例子进行实验，究竟哪些属性可以帮我们来消除这些 BUG。

对 CSS 代码我们增加：

li a:hover {}

对其属性我们仅设定 width:100px; 发现在 IE6 中依旧没有变化，我们尝试着更改 width 的 value ，比如使其 width:99px，奇怪的事情发生了，在 IE6 中，隐藏的部分在触发的时候显示出来了。我们再对 li a:hover 的属性仅设定 color 来测试（初始值为 #fff），更改 color 值，发现在 IE6 下却也不能触发显示，奇怪，奇怪，真奇怪……是不是依旧是一头雾水……没关系，继续往下实验，或许归类了我们就能发现规律了！

我们再用其他属性进行设置：width，positon，background，text-decoration，font-size，font-weight，font-family，border，float，display，font-style，margin，padding，text-align，overflow，text-transform，text-indent，z-index，vertical-align。

我们发现除了 text-decoration，color，z-index 不能触发显示（对于不能触发显示的部分，可以还有某些遗漏的属性，欢迎朋友补充）外，其他属性均可以做为消除伪类 :hover BUG 的特定属性。

说明：

  1. 对于 dispaly 不可以用本例来测试，可另外写个更简单的例子（去除 ul/li，a和span中的position ）。在实际应用中怿飞不建议改变 display 值来做为特定属性消除此 BUG，而且在某些例子中此属性不一定能消除 BUG。
  2. 对于做为特定属性的 border 和 background 中的颜色我们还可用全写和简写来改变，如 #fff 和 #ffffff 在消除 BUG 中解析为 2 个不同的值。
分类: web前端, web编程 标签: , ,