一起CSS

当前位置:一起CSS

margin叠加原理

日期:2009-05-11 分类:CSS

margin 叠加是什么?就是当垂直外边距相遇时,它们将叠加,叠加的高度取较大的。下面按各种情况及附图来说明。

当一个元素出现在另一个元素上面时,第一个元素的底边界与第二个元素的顶边界发生叠加,如图:

margin叠加

元素的顶边界与前面元素的底边界发生叠加。

阅读全文 >

查看:1,337 评论:2 标签:,

用jQuery去除链接虚线

日期:2009-04-12 分类:前端技术

链接点击后会出现虚线框,因为链接一般都有跳转页面,所以不容易看出来。如果没有跳转或阻止了这个行为的话,就能很明显的看到虚线。这个虚线在某些情况下会影响美观,所以可以考虑把它去掉。虽然在《去除点击链接时出现的虚线框》中说了几种方法,而且一起使用也能兼容 IE 和 FF ,但未免麻烦了点。前两天看到使用 jQuery 解决这个问题问题的方法,很简单,而且兼容性很好,所以把它“拿”过来了。具体代码如下:

$(function(){
	$('a').bind('focus',function(){
		if(this.blur){ //如果支持 this.blur
			this.blur();
		};
	});
});

细心的您可能发现了按钮点击后也会出现虚线框,那就一起把它去掉吧:

$(function(){
	$('a,input[type="button"],input[type="submit"]').bind('focus',function(){
		if(this.blur){ //如果支持 this.blur
			this.blur();
		};
	});
});

查看Demo

很简单吧,简单的都没有什么技术含量了。。。

查看:1,914 评论:20 标签:,,

超过宽度显示省略号(无js全兼容)

日期:2009-03-22 分类:CSS

曾经发表过《我看超过部分自动隐藏或显示省略号》,表达了用 CSS 处理“超过宽度显示省略号”不合适的一些观点,然而前段时间在逛蓝色理想经典论坛的时候,发现了一种用 CSS 处理此问题的不错的办法,似乎反驳了我的观点,作者[14px ]突破了传统,以“范围底线”为思路创造了一种更好的办法,具体的思路请看以下的详细分析:

思路:

我们要达到的效果是:当“字符超过额定宽度”,则“显示三个小点”。

  1. 当“字符超过额定宽度”,对于页面来说可能发生的一个改变就是:换行!
  2. 换行将导致该范围的底线降低。
  3. 那么,我们的目的则可以换算成:该范围的底线降低时显示三个小点。

阅读全文 >

查看:1,510 评论:11

网页版"Firebug"

日期:2009-03-9 分类:前端技术

Firebug 可以说是 FF 最强大的插件之一,它不但可以查看 xhtml 代码、CSS 代码、JS 代码、DOM 结构,还可以临时修改这些代码,是开发不可缺少的利器。这也许您早已知道,但网页版的 "Firebug" 你听说吗?其实也不是 Firebug 了,而是类似于 Firebug ,功能也没有真正的 Firebug 那么强大,仅可以用来查看网页 DOM 结构和一些 CSS 样式。虽然功能不多,但在某些情况下、某些时候已经够了,特别值得一提的是:它可以在多种浏览器:IE 、FF 、Chrome 中正常运行,除了 Opera ,所以在某些时候还是用的上滴。看看效果吧:

网页版Firebug

阅读全文 >

查看:1,202 评论:9 标签:

IE6支持PNG透明(alpha通道)的4种方法

日期:2009-02-19 分类:前端技术

想特别说明一下,IE6与生俱来就支持png8的索引色透明度,但不支持png的 alpha 透明度。而我们一直要解决的是让IE6支持PNG的 alpha 透明度。下面我收集整理了4种方法,但都是以滤镜、Js、css 等作为基础模拟还原效果,虽然没有真正的解决alpha透明度问题,但也总算解决了燃眉之急。

IE6支持png8透明:

IE6与生俱来就支持png8的索引色透明度,但不支持png或8位以上的 alpha 透明度。而对于非动画的GIF建议你使用PNG8,因为体积会更小。 测试实例:http://blog.gulu77.com/demo/200809/test_IE6png8/

1、AlphaImageLoader 筛选器

使用简介:在每个标签样式中插入: filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’image.png’, sizingMethod=’scale’) 官方原文:http://support.microsoft.com/kb/294714/zh-cn go 测试实例:http://blog.gulu77.com/demo/200809/test_AlphaImageLoader/

2、PNG Transparency in IE

使用简介:相对来说比较简洁,使用一段包含滤镜的JavaScript 就可以模拟图片或背景 PNG alpha 透明度。 官方原文:http://codingforums.com/archive/index.php?t-80555.html go 测试实例:http://blog.gulu77.com/demo/200809/test_PNGTransparncyinIE/

阅读全文 >

查看:1,148 评论:7 标签:,,

分类

最新日志

最新评论

存档

链接

  • 亚当学院
  • CSS视频教程下载
  • 前沿视频教室
  • 前端爱好者
  • GoodText
  • Kily`s Blog
  • mymickey
  • 秦丰网站策划
  • 奥想创意
  • 我的职业生涯
  • 蜗爱CSS
  • 蜈蚣's Blog
  • web标准学习—小辉博客
  • 十字花匠

© Copyright 2010 一起CSS All Rights Reserved