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

15
2013
02

CSS3浏览器支持参照表

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

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

944510.5

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


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. ...
22
2008
09

CSS三栏布局-固定自适应

CSS三栏布局-固定自适应,所谓固定自适应是利用CSS中的min-width和max-width来控制CSS的宽度,来达到自适应的三栏布局效果. 方法一如下: 1.根据浏览器字体设置自动适应 2.固定宽度自适应浏览器 你也可以指定min-width:来控制最小宽度,以保证页面不会太小
07
2008
07

控制网页满屏显示最简单的方法

Css控制网页满屏显示?在做一些内容比较少的网页时,通常会用到一个满屏效果来使网页铺满屏幕,但现在的显示器很多样话,支持的分辨率也有所不同,那怎么才能使得网页的高宽都100%显示呢?

Css控制网页满屏显示,百度一下可以找到很多方法,想用SCRIPT实现,用DIV的浮动属性,这都得写大把的代码来实现.可以是用过Dreamweaver2004的朋友应该会知道在这里面可以用表格的宽度和高度100%来实现它,同时CSS也可以控制100%.但从Dreamweaver2005以后高级的CSS编写工具中达不到这一效果.

...
02
2008
06

CSS控制未知高度网页垂直居中

网页垂直居中,水平居中的问题相对很多网页设计者都碰到过。对于一个未知高度和宽度的网页来说,要网页居中对齐,确实是一个棘手的问题,特别在IE7.0和Firefox里面。
以前用CSS弄了些水平居中的网页,很简单,在<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">这个DTD下,只要将DIV赋予一个margin:auto;的样式就可以居中了。但垂直问题,以前没有去注重它,知道今天用到才想到解决的方案。成功后拿出来跟大家分享下,看下面的代码。

...