时光博客

css

CSS的border实现三角的随想

沉寂了好久哇,今天出了冒个泡,证明我还活着,然后再有模有样来篇技术稿,然后继续沉寂。

今天在CSS88的博客看到一篇有趣的文章《用css的border属性实现三角》。首先我会站在自己角度思考一下,如果要实现这样的三角效果,我会采取哪种方法?

我的第一反应就是用图片,但是同时也考虑到图片的缺点,如果以个页面需要几种样式的三角,是不是需要做几种图片?另外如果页面有换肤的需求,是不是同时图片也得换?

于是出于优化的思想考虑,看到用CSS来解决三角应该属于最佳解决方案吧,至少节约了三角图片的下载时间和便于换肤。但是也有他的缺点,因为是CSS的,所以必须考虑到各个浏览器对CSS的兼容状态。

当然本文仅讨论如何用border实现三角。首先来看下面以副图片:

effect_1.jpg - 大小: 48.54 KB - 尺寸:  x  - 点击打开新窗口浏览全图

继续阅读

IE6中的min-width一般解决方法

上次翻译的一篇文章How to Use CSS to Solve min-width Problems in Internet Explorer中已经找到了非JavaScript和CSS expression 实现IE中的min-width。

这次我们看看CSS expression的实现方法:

#content{   
_width: expression(((document.compatMode && document.compatMode=='CSS1Compat')? document.documentElement.clientWidth : document.body.clientWidth) < 700? '600px' : 'auto');   
}  

这里的 

((document.compatMode && document.compatMode=='CSS1Compat')? document.documentElement.clientWidth : document.body.clientWidth) < 700  

只是个判定条件,判定页面body的宽度,如果页面body的宽度小于700(这个要根据具体的页面来指定),就把content的宽度指定为600,否则就让它自适应宽度。这里的content宽度,可以根据自己的情况来设定。

[译]min-width的跨浏览器兼容解决方法

项目中用到min-width,找了很多解决方案,都不管用,上蓝色经典问了些高人。版主推荐了一篇国外技术文章,觉得价值比较大,就翻译一下,收藏起来。英文比较差,如果翻译有错,还请指正。

介绍
min-width这个属性除了IE6,以及IE5.X以外的浏览器一般都支持.所以本文主要是针对IE的CSS Hack!
对网页设计人员来说,缺乏支持的最小宽度min-width在Internet Explorer中造成了许多问题.到现在为止,唯一模拟min-width的方法是使用JavaScript或Internet Explorer的expressions语法(间接的JavaScript).经过几个小时的尝试,我发现了一个纯CSS的方法.我的方法需要额外的一些div控制宽度和最小宽度,但我相信这是一个很小的代价,一个非 JavaScript方法工程跨浏览器(甚至在Mac IE5)

继续阅读

©2008-2017 - 时光博客 Ucloud

京ICP备15052479号-2返回顶部