Hello and welcome to beautiful Jun Blog.

Archive for 'CSS'

去掉链接时虚线框的几个方法

1.直接给链接加是onfocus=”this.blur()”.

<a href=”#” onfocus=”this.blur()”>链接</a>

2.CSS实现

a{blr:expression(this.onFocus=this.close());} /* 只支持IE,过多使用效率低 */

a{blr:expression(this.onFocus=this.blur());} /* 只支持IE,过多使用效率低 */

a:focus { -moz-outline-style: none; } /* IE不支持 */

3..htc实现IE支持

<public:attach event=”onfocus” onevent=”hscfsy()”/>

<script language=”javascript”>

function hscfsy(){

this.blur();

}

</script>

调用 a {behavior:url(htc文件所在路径地址)}

4.通过JavaScript遍历实现

window.onload=function()

{

for(var ii=0; ii document.links$[$ii$]$.onfocus=function(){this.blur()}

}

5.对WordPress可以用内部的JQuery框架来去除

$(“a”).bind(“focus”,function(){

if(this.blur){

this.blur();

}

});

转自:http://leotheme.cn/javascript/quediaolinksdesxk.html

Posted on 23 六月 '10 by admin, under CSS. No Comments.

53 个CSS技巧

1. CSS Based Navigation //基于CSS的导航

2. Navigation Matrix Reloaded //导航矩块翻转

3. CSS Tabs //CSS标签

4. CSS Bar Graphs //CSS条状图表

5. Collapsing Tables: An Example //压缩表格:一个实例

6. Adam’s Radio & Checkbox Customisation Method //亚当的单选框和复选框的用户化方法

7. CSS Image Replacement //CSS图像替代

8. CSS Shadows(CSS Shadows Roundup) //CSS阴影(CSS阴影综述)

9. CSS Rounded Corners Roundup (Nifty Corners) //CSS 圆角综述(漂亮的拐角)

10. Drop Cap-Capital Letters with CSS //用CSS实现首字母下沉
(全文…)

Posted on 10 三月 '10 by admin, under CSS. No Comments.

精选30个国外优秀的CSS技术和实例

1.Hoverbox 图片集
一个纯净的基于CSS的图片集,鼠标悬停缩略图就会显示放大效果。
(全文…)

Posted on 5 五月 '09 by admin, under CSS. No Comments.

在IE6下选择文字异常问题

IE6 存在两种文字选择异常问题:
1. 绝对定位下的不能选择文字,如下在IE中常常会碰到如果将容器定位后,出现容器内的文字不可选择。

xhtml结构:

定位后无法选择容器的内容解决方案

css样式:

div {
position:absolute;
top:100px;
left:100px;
width:200px;
height:200px;
border:1px solid red
}

HTML代码:

定位后无法选择容器的内容解决方案

请在IE中测试上面的代码,你会发现文字是无法选择的。

当时我想到的方法是在<a href="#">定位后无法选择容器的内容解决方案</a>后面加上一个 空格来引发这个选择,不过这样的话就多了一个字符,不是很好。

是老外的,上面介绍的方法是通过

html, body{
width:100%;
height:100%;
margin:0px;
padding:0px;
}

(全文…)

Posted on 18 三月 '09 by admin, under CSS. No Comments.

CSS网页布局开发小技巧

在CSS网页布局开发中,会有很多小技巧,新手朋友往往对此很不熟悉。在某一两个小问题上,或许纠缠很长时间才能搞明白,虽然在webjx.com的文档中,多次提及过这方面的内容,但依然有很多朋友在这些问题上犯错。我们今天看看这些CSS技巧,认真读一读,或许您并不能完全理解,您可以在webjx.com进行搜索,扩展您所想要得到的知识,相信您会有很多收获!

一、ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值。

二、同一个的class选择符可以在一个文档中重复出现,而id选择符却只能出现一次。对一个标签同时使用class和id进行CSS定义,如果定义有重复,id选择符做的定义有效,是因为id的权重要比class大。
(全文…)

Posted on 15 三月 '09 by admin, under CSS. No Comments.

15个优秀国外CSS框架

Tags:.

什么是css框架?

实际上还是让我们从框架说起吧。
框架就是一个你可以用于你的网站项目的基本的概念上的结构体。

css框架通常只是一些css文件的集合,这些文件包括基本布局、表单样式、网格或简单结构、以及样式重置。比如:

  • typography.css 基本排版规则
  • grid.css 基于网格的布局
  • layout.css 通常的布局
  • form.css for 表单样式
  • general.css 更多通用规则

(全文…)

Posted on 11 十二月 '08 by admin, under CSS. No Comments.

ISAPI rewrite中文手册

Tags:.

我们在进行网站搜索引擎优化(SEO)或在服务器进行防盗链设置的时候,可能会用到ISAPI rewrite,下面是ISAPI rewrite的手册,翻译成中文。 (全文…)

Posted on 30 十一月 '08 by admin, under CSS. No Comments.

em与px的区别以及em特点和应用

Tags:, .

一直也搞不清楚px与em之间的关系和特点,看过95%的中国网站需要重写CSS以后后确实收获很大。平时都是用px来定义字体,所以无法用浏览器字体放大的功能,而国外大多数网站都可以在IE下使用。因为

1. IE无法调整那些使用px作为单位的字体大小;

2. 国外的大部分网站能够调整的原因在于其使用了em作为字体单位;

3. Firefox能够调整px和em,但是96%以上的中国网民使用IE浏览器(或内核)。

px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册)

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)

任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。为了简化font-size的换算,需要在css中的body选择器中声明Font-size=62.5%,这就使em值变为16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。

em有如下特点:

1. em的值并不是固定的;

2. em会继承父级元素的字体大小。

所以我们在写CSS的时候,需要注意两点:

1. body选择器中声明Font-size=62.5%;

2. 将你的原来的px数值除以10,然后换上em作为单位;

3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。

也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em,那么在声明p的字体大小时就只能是1em,而不是1.2em, 因为此em非彼em,它因继承#content的字体高而变为了1em=12px。

但是12px汉字例外,就是由以上方法得到的12px(1.2em)大小的汉字在IE中并不等于直接用12px定义的字体大小,而是稍大一点。这个问题Jorux已经解决,只需在body选择器中把62.5%换成63%就能正常显示了。原因可能是IE处理汉字时,对于浮点的取值精确度有限。不知道有没有其他的解释。

Posted on 30 十一月 '08 by admin, under CSS. No Comments.

CSS的渲染效率—-书写高效的CSS

Tags:.

根据一些CSS写作经验,如何提高渲染效率及所占用消耗的资源,我们来浅谈一下CSS的渲染效率,书写高效的CSS。

1、十六进制的颜色值对位数与大小写

编写十六进制颜色值时你可能会用小写字母或省略成3位数,关于这写法没找到确实的数据证明对浏览器的渲染效率是否有影响,但十六进制的颜色值默认标准是大写及6位数标注。在未知情况下不希望冒险而降低了渲染的效率。

* 不赞成 – color:#f3a;

* 建议用 – color:#FF33AA; (全文…)

Posted on 30 十一月 '08 by admin, under CSS. No Comments.

兼容IE6 position:fixed

Tags:, , .

IE6以下不能理解style = “position:fixed”,
所以我们要用javascript来兼容rubbish的它

我们要在js文件里写么,no,因为是IE,我们有更好的方式,那就是style.setExpression

也许应该这样
obj.style.setExpression(‘top’,'document.body.scrollTop + 100′); (全文…)

Posted on 30 十一月 '08 by admin, under CSS. No Comments.