原文链接:A CSS styled table version 2
做前台开发时肯定会遇到使用button,a标签的时候,每次点击相关这些标签的时候,我们会经常看到有一个虚线框出现,从视觉效果来看,有虚线框会很刺眼,形象到用户浏览的视觉中心,所以我们有必要将这个刺眼的虚线框去掉。利用google和百度,整理一下相关的方法,方便以后开发当中使用。
方法一:使用css方法
a {blr:expression(this.onFocus=this.blur())} /*for IE*/
a {outline:}/*for FireFox*/
IE浏览器下面还可以使用IE下的私有的html属性:hideFoucs,在标签的结构中加入hidefocus=”true”属性。即:
<a href="http://www.g.cn" hidefocus="true" title="谷歌">谷歌</a>
方法二:使用javascript方法:
通过javascript遍历页面Dom
window.onload=function()
{
for(var i=0; ii<document.links.length; ii++)
document.links$[$ii$]$.onfocus=function(){this.blur()}
}
[...]
2009年07月7日 - 2:37 下午
分类为 JavaScript | 没有评论
使用js操作css属性和css中的写法不同:
1、对于没有中划线的css属性一般直接使用style.属性名即可;
如:obj.style.margin,obj.style.width,obj.style.left,obj.style.position等。
2、对于含有中划线的css属性,将每个中划线去掉并将每个中划线后的第一个字符换成大写即可;
如:obj.style.marginTop,obj.style.borderLeftWidth,obj.style.zIndex,obj.style.fontFamily等。
这个规律我想大多数的前端开发者也都熟知。对在css中有一个特殊的属性其js使用方法确比较特殊。
因为 float 是javascript的保留字,那怎么在js中书写样式表中的 float 呢?
我们不能直接使用obj.style.float来使用,这样操作是无效的。
其正确的使用方法是为:IE:obj.style.styleFloat,其他浏览器Mozilla(gecko),ff等用 styleFloat:obj.style.cssFloat。
给个例子让大家好理解:
<div onclick="alert(this.style.float);this.style.float=’left’;alert(this.style.float);">测试1</div>
<div onclick="alert(this.style.float);if(this.style.cssFloat) {this.style.cssFloat=’left’;}else{this.style.styleFloat=’left’;}alert(this.style.float);"& gt;测试2</div>
2009年07月2日 - 3:32 下午
分类为 JavaScript | 没有评论
我们在设计网页的时候会经常用到背景图片。有时候页面已经打开了,这些图片实际上已经download到本地了,但IE还是会试图再次请求下载这些图片,导致页面要加载半天才能载入进来,这样无疑增加Http Requests,容易导致用户浏览的页面表示不够友好,消耗大量服务器的带宽,给服务器带来很大的压力。
下面这段JS代码就是用来解决这个IE的BUG的。
/**
* bug to fix: Flickering CSS Background Images in IE6
* conditions: when IE’s cache settings are “Every visit to the page” (a common developer’s setting)
**/
if (/*@cc_on @_jscript_version === 5.6 || @*/false) {
try {
document.execCommand("BackgroundImageCache", false, true);
} catch(err) {}
}
使用CSS控制DIV层,使这个DIV层一直在浏览器底部,代码如下:
#foot{
width:100%;
height:50px;
position:absolute;
top:100%;
margin-top:-50px;
background:Blue;
color:white;
}
首先要设置定位为绝对定位,并设置top为100%,当div的height为N数值时,其div层就必须设margin-top为-N值。IE,FF通过测试。
2009年06月17日 - 5:26 下午
分类为 Xhtml+CSS | 没有评论
今天在蓝色理想看到了冰极峰关于弹性流体布局的文章时候,自己对流体布局有了一个重新的认识。不过今天在这里整理的是冰极峰同学在代码里面提到的万能float闭合Clearfix Hack。
万能float闭合Clearfix Hack可以用来解决多个div对齐时的间距不对,将以下代码加入CSS 中,给需要闭合的div加上 class=”clearfix” 即可,那叫一个爽啊…
下面是著名的万能float闭合Clearfix Hack
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
2009年09月25日 - 10:20 上午
学习了。欢迎回访 那些花儿:www.iphpmysql.cn
2009年09月30日 - 5:34 下午
恩,收藏先。。