06
2014
05

自适应网页设计中的字体单位选择

在做手机web或app的时候,为适应不同屏幕,你可能需要写很多针对不同屏幕大小的css代码,那么这个时候我们如果用固定大小去设置字体的大小就要些很多代码了。这个时候我们需要使用相对大小了,这样该其他我们之需要修改指定根元素的值了。css3中也出现新的字体单位rem,在几乎所有的自适应网页设计的书籍及文章中都推荐使用em作为字体单位,甚至推荐你使用em来作为你所有设置size部分的单位。那么em和px如果转换呢?

1 ÷ 父元素的font-size × 需要转换的像素值 = em值

21
2014
02

打造纯CSS箭头,兼容所有主流浏览器

箭头再UI设计时会经常用到,小的如一个小箭头标示符,大的如一个弹出框都会用到箭头。用的最多的是截取一张各个方向的截图,然后再用css控制位置。这样稍显麻烦,如用纯CSS打造箭头会方便不少。今天研究bootstrap的时候看到了popover的箭头是用纯CSS打造的,然后就对此研究了一下,由于bootstrap的箭头不支持IE6,IE7,自己重修做了个能适应不同浏览器的纯CSS箭头,记录下来。


纯CSS箭头最终效果

popover-arrow.jpg

11
2014
02

box-sizing的使用及浏览器盒子模式回顾

box-sizing是一个CSS3中的属性,他的出现让传统的盒子模式有所改变,算是一个非常重要的属性,一个可以让你回到浏览器怪异模式的时代。先回顾下盒子模式。


盒子模式( 标准模式和IE的怪异模式的区别)

盒子模式在各浏览器分为两种: 标准模式和IE的怪异模式(quirksmode),两种模式的区别和简单就是区域的宽度高度换算方法。从一个简单的例子来看这两模式的区别。

.box {
    width: 200px;
    height: 200px;
    border: 20px solid black;
    padding: 50px;
    margin: 50px;
}


08
2014
02

CSS hacks和IE hacks写法总结

这是个很常见的问题,而且让人烦躁的主题,css hacks! 你漂亮整洁代码的破坏者,维护成本提高的老鼠屎。好吧,但不得不说他存在时必要的,作为前端开发者如果你一直做的是新项目可能会用的比较少,但对于维护老项目的同学来说,hacks是解决浏览器必不可少的杀器之一。很久以前写过该方面的文章:

浅谈CSS hack区别IE6.IE7.FireFox的几种CSS HACK写法 ,IE的if条件注释Hack

15
2013
02

CSS3浏览器支持参照表

CSS3还不是W3C的一个标准规范,但是很多主流浏览器已经开始支持它许多新的属性,下面就是一个CSS3属性的浏览器支持参照表。(来自w3schools,收藏下来以便日后方便查询)

icon图标后加数字的是表示该浏览器的那个版本:

944510.5

The number indicates the browser version in which the property was first supported.


09
2010
08

一段CSS控制文字禁止选择、复制代码惹得祸

CSS控制文字禁止选择、复制这样行吗?也许很多朋友不曾用过,当然我曾经也没有接触过这个玩意儿,总觉得这东西部够实在。网站做出来就是跟大家分享的,何必搞得像国家机密一样把版权搞得这么严重呢?而且很多时候像这些东西都是JS来控制的,基本可以搞定IE就不错了,想看你网页上的东西还是有很多办法的,这样的小CASE就防防菜鸟盗版罢了。

不过没办法,项目需要这些玩意儿,我们还得加上,再加上最近做银行的玩意儿,说起来算是需要安全性较好,这样的细节也得搭上。

废话说了一大篇,我们就来看看这段让我郁闷半个钟的CSS代码吧。这是一段可以控制网页上文字禁止选择和复制的CSS代码,兼容火狐和IE。听上去很牛X,看看代码......

10
2008
10

浅谈CSS hack

什么是CSS hack?网页设计者在开始迷茫的问题?当在不同的浏览器看到自己做出来的网页长不同样子的时候更加会感觉这个问题的严重性?下面就介绍以下CSS hack.

由于不同的浏览器,比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等,对CSS的解析认识不一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果

这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果。

...

10
2008
10

区别IE6.IE7.FireFox的几种CSS HACK写法

区别IE6.IE7.FireFox的几种CSS HACK写法,下面是找到的集中CSS HACK的几种写法,经过测试,非常有效.呵呵.
区别IE6FF
       background:orange;*background:blue;
...
26
2008
09

再写CSS控制未知高度DIV垂直居中

在CSS代码里面我曾经写过一篇文章CSS控制未知高度网页垂直居中 ,在这里介绍了一种让未知高度的DIV在浏览器中垂直居中. 而这个方法在达到这个目的的同时出现了一个问题.那就是当浏览器窗口缩小后我们会发现有一部分主体内容看不到了。如下图:

这是浏览器打开的时候

...
26
2008
09

IE的if条件注释Hack

IE Hack,写CSS经常遇到的问题. 而在if IE起着非常大的作用.if ie什么意思 呢. 下面就列举了一些在CSS常见的HACK控制语句吧.

  1. <!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]-->
  2. ...