随笔 - 28, 文章 - 0, 评论 - 3, 引用 - 0
数据加载中……

2010年2月21日

网页宽度多少最适合?(转)

公司网站最近一个月统计出来的访客分辨率报表图:
2009-04-21_133507

可见,目前使用800*600的几乎是微乎其微了,1024还是居于上风,目前19,21寸甚至更大的显示正在逐步被广泛使用,所以N年前流行的778,780等等都好像是几个世纪以前的事情了。

再看一组数据

网站 首页页面宽度 px
Yahoo! 950
淘宝 950
MySpace 960
新浪 950
网易 960
Live Search 958
搜狐 950
优酷 960
AOL 960

上面都是Alexa全球排名前100的站点,而且WordPress的皮肤,百分之90以上都是960px宽。为什么设计师们都喜欢这个数据(950px/960px)呢?以下部分转自网页栅格系统研究(1):960的秘密,作者:玉伯

设计师们对苹果情有独衷。在 1024 x 768 的分辨率下,打开Firefox:

自然状态下,Firefox窗体的大小约为 974 x 650. 减掉左右两边7px的边框,网页的实际大小为上图中的红色部分,高宽为 960 x 650.

数字背后的奥妙

上面的“自然”出现,细究自然是不让人信服的。苹果系统的设计者们在没有喝醉酒的情况下选择了960,而不是其它什么1000之类的整数,自然另有奥妙。

科学界有很多问题都可以归结到数学问题上,我们也从数学着手:

960可以分解为2的6次方乘以3和5, 这使得960可以分割成以下宽度的整数倍:

2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40,
48, 60, 64, 80, 96, 120, 160, 192, 240, 320, 480

共26种(26 = 7 * 2 * 2 – 2, 减去2是去掉1和960自身),我们标记为:

N(960) = N(2^6 * 3 * 5) = 26

根据上面的算法,可以得到:

N(360) = N(2^3 * 3^2 * 5) = 22
N(480) = N(2^5 * 3 * 5) = 22
N(720) = N(2^4 * 3^2 * 5) = 28
N(750) = N(2 * 3 * 5^3) = 14
N(800) = N(2^5 * 5^2) = 16
N(960) = N(2^6 * 3 * 5) = 26
N(1000) = N(2^3 * 5^3) = 14
N(1024) = N(2^10) = 9
N(1440) = N(2^6 * 3^2 * 5) = 34
N(1920) = N(2^7 * 3 * 5) = 30

根据直觉(严格证明也不难,不过还是留给数学系的学生去证明吧),我们得到一个有趣的结论:

要使得N(width)最大,width的取值有两个系列:

A系列: …, 320, 720, 1440, …

B系列: …, 480, 960, 1920, …

N越大,可组合的宽度值就越多。对栅格系统来说,这意味着越灵活!

目前绝大多数显示器都支持 1024 x 768 及其以上分辨率。为了有效的利用屏幕宽度同时保证栅格的灵活度,可以看出960是非常合适的。这样,在目前主流显示器下,960就成为网页栅格系统中的最佳宽度了。(也许不久的将来,将会流行1440)

以上内容转自http://lifesinger.org/blog/?p=375

posted @ 2010-03-23 14:01 Angle Wang 阅读(1020) | 评论 (0)编辑 收藏

悟透JavaScript【转】

     摘要: 非常好的一篇文章,作者李战,阿里软件的老顽童,混迹IT江湖多年。在数据库、Web架构、前端技术,及数据库全文检索方面有深厚内力.相信你读完此文,必定功力大增。 引子 编程世界里只存在两种基本元素,一个是数据,一个是代码。编程世界就是在数据和代码千丝万缕的纠缠中呈现出无限的生机和活力。 数据天生就是文静的,总想保持自己固有的本色;而代码却天生活泼,总想改变这个世界。 你看,数据代码间的关系与...  阅读全文

posted @ 2010-03-23 13:44 Angle Wang 阅读(306) | 评论 (0)编辑 收藏

从零开始学习jQuery(转)

从零开始学习jQuery (一) 开天辟地入门篇

从零开始学习jQuery (二) 万能的选择器

从零开始学习jQuery (三) 管理jQuery包装集

从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式

从零开始学习jQuery (五) 事件与事件对象

从零开始学习jQuery (六) jQuery中的Ajax

从零开始学习jQuery (七) jQuery动画-让页面动起来!

从零开始学习jQuery (八) 插播:jQuery实施方案

从零开始学习jQuery (九) jQuery工具函数

从零开始学习jQuery (十) jQueryUI常用功能实战

从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件

posted @ 2010-03-23 13:41 Angle Wang 阅读(216) | 评论 (0)编辑 收藏

一些专业博客和技术网站收录

蓝色理想:http://www.blueidea.com/ 网站设计人员之家,主要关于网站前端设计内容,通常搜CSS内容会搜到这里。

http://blog.bingo929.com/注前端开发/网页设计/网站可用性/用户体验,暴风彬彬的趣味互联网生活…

淘宝网用户体验设计UED: http://ued.taobao.com/blog/
口碑网用户体验设计UED: http://ued.koubei.com/
阿里妈妈用户体验设计UED: http://ued.alimama.com/
阿里巴巴(中国站) 用户体验部: http://www.aliued.cn/
阿里软件UED团队: http://www.alisoftued.com
19楼UED团队: http://ued.dukuai.com/blog/
用户为中心的设计(UCD),UCD大社区,http://ucdchina.com/

个人技术博客:
李会军:http://www.dotneteye.cnorg 去过博客园的应该都知道吧,神仙级专家。
赵劼:http://www.cnblogs.com/JeffreyZhao/ 同上,为博客员知名专家,特佩服他!
淘宝玉伯:http://lifesinger.org/blog/ 淘宝前端,对前端细节研究很深入!博客更新也算频繁。
淘宝怿飞:http://www.planabc.net/ 淘宝前端,花名圆心,博客内容也很值得看。
cssrain:http://www.cssrain.cn/ 懒人开发人员一定要去看看哦,资源超多,很多效果例子。特别是jquery。

源码站:
http://www.codeplex.com 微软的.NET源码发布站,很多很好的.NET源代码

posted @ 2010-03-23 13:37 Angle Wang 阅读(224) | 评论 (0)编辑 收藏

良好的用户体验,必须是全方位的【转】

用户体验(User Experience,简称UX 或 UE)是一种纯主观的在用户使用一个产品(服务)的过程中建立起来的心理感受。因为它是纯主观的,就带有一定的不确定因素。个体差异也决定了每个用户的真实体验是无法通过其他途径来完全模拟或再现的。但是对于一个界定明确的用户群体来讲,其用户体验的共性是能够经由良好设计的实验来认识到。计算机技术和互联网的发展,使技术创新形态正在发生转变,以用户为中心、以人为本越来越得到重视,用户体验也因此被称做创新2.0模式的精髓。”—–百度百科

现在,几乎人人都在谈、在做用户体验,有为了用户体验而用户体验的;有不知何为用户体验,就乱指挥一通的;有做了几天可用性改进就宣称飞跃的…..当然,也有很多是踏踏实实为广大人民做实事,做好产品设计的。
不管怎样,以下的思考文字中希望有那么一点点是闪光的。
 
看了百度百科的词条,结合自己的经验,可以这么理解:用户体验,是通过接触某样有形或者无形的事物后,建立在用户身上的一个范围比较广的情感叠加,跟乐高积木是一样一样的,堆得好,可以很高,某一块不稳,就会全倒下。那,到底有多广呢?

1.一个购书体验:流程流畅度

给自己买一本书,我想到的是淘宝和当当,有人会说:买书当然去当当或者卓越了。我不是这么认为的,首先,都是网购,淘宝也卖书,并且能讨价还价,能了解更多细节,而当当不能,但如果在淘宝上价格太高,没有当当划算,且不是很急着买,那我会选择当当。
—–这里面有两个点:网络购物习惯养成的条件反射 和  买卖家之间的交流 ,这两个是体验的一部分。
决定上当当后,打开首页,logo旁的“十年品质 放心低价”,有点暖,而导航下左边的这个绿色突出的区域也表明,当当主要核心业务就是书!整个配色在视觉上挺舒服,而导航和搜索也让我很快找到我要买的书—《教父》。

15

——站点的载入速度是个大问题,当当基本能在3秒内打开首页,不错的优化。广告语和用色贴合国内消费人群的心理,起码对于我来说,觉得:可信赖,不太乱。
找到我要的书后,我点击了购买,进入了我的购物车,有一个疑虑、不舒服:

24

—–不知道这个是好,还是坏,可能对于不同的人,有不同的感受,这个推荐本身是很好的,但让我疑惑的是,它大面积的空间和众多黄色按钮,让我找不着北了,因为到这步,我心里想着:该结算了,但处于商业目的,推荐区域在一定程度上(或许我比较闲的时候,推荐对我有用)干扰了我。
接下来的结算流程很顺利,我选择的是货到付款,很好的是:最后提示我,发货地点是广州,会在2-3天后发货,邮箱也很快收到订单生成的邮件。接下来就是等待,三天后,接到声音不太舒服的电话,说是当当网的,我想,应该是书到了。可怜的是,对方收钱时,零钱不够。
—–最终是买到书了,快递的小伙子找不了我的零钱,我也没要了,书的包装不太好。
整个过程,总体打分8.5分。总的来说,这本书的购买的体验流畅度是很满意的,没有出现意外的中断,要知道体验的流程能完整的走完才意味着,这个产品、这个服务,是可用的,这是根基,其他的视觉效果和折扣等等,都是建立在他之上。而流畅度,就跟用户在这个过程中碰到疑惑和不解的强烈程度是成反比的,想提高流畅度,就需要捋清楚,让这个核心购买流程以最短的时间完成,减少干扰。

2.边缘体验,一样的重要

上面的购书例子,有个地方很重要,那就是最后的线下体验,我把他作为边缘体验的一种,有别于线上的核心业务。
订单下来后,系统能根据我提交的送货地址,选出最近的发货地点,减少物流时间,并且让购买者知道,这个点是好的,说明:我一直为你着想。
但快递环节却有点问题,因为存在一定的不可控因素。送快递的人,需要经过一定的培训,否则,是在砸当当的牌子。电话中的语气让人不舒服,书的包装问题也让人不安,书角磨破了,就这两个点,购买者就有可能把整个交易撤销。
属于边缘体验范畴的还有很多,例如:你到了友商网举办的一个论坛,门前的海报是否能够传递本次论坛的信息、是否能够将友商网的品牌进行诠释,给你的良好感觉有多少?再例如市场营销人员的着装和谈吐,在用户眼里,在一定程度上,也在间接体验他们的产品,起码,穿着拖鞋的营销,不会给人好的感觉。
边缘体验,一样重要。

3.无形的体验

无形的体验有两种,一种是某用户在使用、体验产品后得出口碑传播给另外的用户或者潜在用户,对于后者,他已开始无形情感体验;另一种是用内而外的,是生产此产品的团队或者说这个企业由内发出的一些信息,有意的或无意的信息。
对于第一种,有时候口碑会决定了某个用户是否与产品有缘,举个例子,小姨买了一个xx牌子的冰箱,用了两个月,灯管坏了,打开冰箱门灯不亮了,联系维修后好景不长,还是坏,于是她对死党说:以后打死也不会买xx牌的东西了,这个死党有可能以后就跟这个牌子绝缘了,因为她对“它”的无形体验很不好。当然,这个口碑产生的根源,就是产品质量本身。
而第二种范围包括的就比较大了,如果是上市公司,那么你的财务状况是否良好;组织结构是不是频繁大调整;员工整体对外的信息放射是否正面;网络媒体,传统媒体传播的信息是否有利公司发展(不管是不是软文),这些,都是用户或者潜在用户、普通人可能接触到的一面,这也是一个无形的体验。

4.引领用户的“体验”

在初步发展阶段,无数产品和服务都是跟随用户需求,用户需要什么,就给什么,以找准需求点为重中之重,这个是对的,但到了产品成熟期,到了市场占有率足够高后,需要考虑的,就是引导潮流,引领用户朝双赢的方向。web中的视觉概念设计,汽车中的概念车,走的,就是这个路线。

5.核心产品体验

这个放在最后是因为是人都知道,核心产品,必须做好可用性,通过不断迭代,适当做好减法,提供一个体验好的产品。具体到各个产品和服务各不相同,无需展开。
总之用户体验设计并不复杂,但需要耐得住性子,需要注意触角,因为,从接触这个品牌那一刻起,用户体验就在进行,是叠加还是消耗呢?就看能否尽量做到人人UE,能否将这些好的idea引导、聚合。

posted @ 2010-03-23 13:32 Angle Wang 阅读(191) | 评论 (0)编辑 收藏

css sprite学习(转)

一,关于CSS Sprite
CSS Sprites是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言,不高于200KB的单张图片的所需载入时间基本是差不多的,所以无需 顾忌这个问题。
按照yahoo的rules for high performance web sites的原则,应当较少Client与Server端间 的HTTP Request次数。通过CSS Sprites方法将多张图片组装成单独的一张图片,可以有效减少HTTP请求 的次数。
当整幅图片载入完成后,你就可以使用CSS方法通过设置背景位置的方式完成所需图片的准确调用。

加速的关键,不是降低重量,而是减少个数。传统切图讲究精细,图片规格越小越好,重量越小越好,其实规格大小无所谓,计算机统一都按byte计算。客户端每显示一张图片都会向服务器发送请求,所以,图片越多请求次数越多,造成延迟的可能性也就越大。

二,CSS Sprite的使用

有几篇关于CSS Sprites的文章,基本上把其原理和机制说明得很清楚。

What Are CSS Sprites?

How to create CSS sprites

Creating Rollover Effects with CSS Sprites

Building a Dynamic Banner with CSS Sprites

High Performance Web Sites中关于CSS Sprites的内容3.2. CSS Sprites

三,CSS Sprite的例子

[原文:http://blog.rexsong.com/?p=746#comments]

1. 图片限制(Image Slicing)

典型如文本编辑器,小图标特别多,打开时一张张跑出来,给用户的感觉很不好。如果能用一张图解决,则不会有这个问题,比如百度空间、163博客、Gmail都是这么做的。

Image Slicing’s Kiss of Death
http://www.alistapart.com/articles/sprites

2. 单图转滚(Single-image Rollovers)

触发切换图片的需求,传统方案得重新请求新图片,因为网络问题经常造成停留或等待。如果能把多种状态合并成一张图,就能完美解决,然后再使用背景图技术模拟动态效果。

ColorScheme Ratings
http://demo.rexsong.com/200608/colorscheme_ratings/

3. 延长背景(Extend Background Image)

如果图片的某边可以背景平铺无限延长,则不需要每个角、每条边单独搞出来,图片能少一个就少一个。其实,这个理论还可以扩展到四角容器里,好处是能大大简化HTML Structure。

Extend Background Image
http://demo.rexsong.com/200705/extend_background_image/

综合案例

Google Korea(1和2技巧)
http://demo.rexsong.com/200705/google_korea/

CSS Menus(2和3技巧)
http://demo.rexsong.com/200705/css_background_menus/

四,CSS Sprites的问题

由于IE6存在的background的flicker问题IE6/Win, background image on <a>, cache=‘check every visit’: flicker!,有人针对此问题提出了解决方案Fast Rollovers Without Preload

关于IE6的flicker问题,fivesevensix.com上有一篇很不错的研究文章Minimize Flickering CSS Background Images in IE6

另外:brunildo.orgCSS tests and experiments是关于css各种功能不错的参考手册和测试工具。

五,相关资源

What Are CSS Sprites?

http://www.peachpit.com/articles/printerfriendly.aspx?p=447210&rl=1

CSS Sprites: Image Slicing’s Kiss of Death

http://www.alistapart.com/articles/sprites/

CSS Sprites Generator

http://www.csssprites.com/

http://spritegen.website-performance.org/

Fast Rollovers Without Preload

http://wellstyled.com/css-nopreload-rollovers.html

JavaScript Sprite Animation Using jQuery

http://www.sitepoint.com/blogs/2007/07/20/javascript-sprite-animation-using-jquery/

http://www.sitepoint.com/blogs/2007/07/05/css-using-percentages-in-background-image/

How to create CSS sprites

http://fatagnus.com/how-to-create-css-sprites/

Creating Rollover Effects with CSS Sprites

http://www.devarticles.com/c/a/Web-Style-Sheets/Creating-Rollover-Effects-with-CSS-Sprites/

Building a Dynamic Banner with CSS Sprites

http://www.devarticles.com/c/a/Web-Style-Sheets/Building-a-Dynamic-Banner-with-CSS-Sprites/

CSS Sprites and IE/Win Flicker Issue

http://www.brajeshwar.com/2006/css-sprites-and-iewin-flicker-issue/

css用法测试工具:CSS tests and experiments

http://www.brunildo.org/test/index.html

posted @ 2010-03-23 13:24 Angle Wang 阅读(614) | 评论 (0)编辑 收藏

js点击切换图片

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title></title>
 <script type="text/javascript" language="javascript" >
 <!--
  window.onload=function(){
 document.getElementById("box").style.backgroundImage="url(1.jpg)";
 var box=document.getElementById("box");
 box.onclick=function(){
 //alert(box.style.backgroundImage);
 //alert(typeof(box.style.backgroundImage));
 if(box.style.backgroundImage.indexOf("1.jpg")!=-1)
 {box.style.backgroundImage="url(2.jpg)";}else {box.style.backgroundImage="url(1.jpg)"}
 }
  }
 -->
 </script>
 <style type="text/css">
 <!--
 #box{width:800px;height:600px;}
 -->
 </style>
</head
&lt;body>
<div id="box">
&nbsp;
</div>
</body>
</html>

posted @ 2010-03-22 11:06 Angle Wang 阅读(6441) | 评论 (1)编辑 收藏

css布局:侧边固定长度,内容自动适应

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title></title>
 <style type="text/css">
 <!--
 #wrap{background:#000;}
 #content{margin-left:250px;height:1000px;background:#963;}
 #sideber{width:240px;float:left;height:1000px;background:#369;}
 -->
 </style>
</head>
<body>
<div id="wrap">
<div id="sideber">&nbsp;</div> <!--要让浮动元素放前面-->
<div id="content">&nbsp;</div>
</div>
</body>
</html>

posted @ 2010-03-22 10:44 Angle Wang 阅读(474) | 评论 (0)编辑 收藏

IE6/IE7/IE8/Firefox/Chrome/Safari的CSS hack兼容一览表

不同的浏览器对CSS的解释都有一点出入,特别是padding, line-height这些要细微控制的地方,下面的hack基本可以解决这个问题:
• 在属性前加下划线(_),那么此属性只会被IE6解释
• 在属性前加星号(*),此属性只会被IE7解释
• 在属性值后面加"\9",表示此属性只会被IE8解释
详细出处参考:http://www.jb51.net/css/24946.html

各浏览器CSS hack兼容表:
 

整体测试代码示例:

复制代码代码如下:
.test{
color:#000000;
color:#0000FF\0;
[color:#00FF00;
*color:#FFFF00;
_color:#FF0000;
}


复制代码代码如下:
#menu { line-height: 23px; }/* firefox 浏览器实行这句定义 */
#menu { line-height: 26px\9; }/*ie6,ie7,ie8 这句定义主要尖对IE8来hack*/
#menu { *line-height: 23px; }/*ie6,ie7 这句定义主要尖对IE7来hack*/
#menu { _line-height: 23px; }/*ie6 浏览器优先实行这句定义*/
或者写成一句,注意顺序
#menu { line-height:23px; line-height: 26px\9; *line-height: 23px; _line-height:23px; }
或者
* html #menu { line-height: 23px; } /* IE6 浏览器实行这句定义 */
*+html #menu { line-height: 23px; }/* IE7 浏览器实行这句定义*/

其他说明:
1、如果你的页面对IE7兼容没有问题,又不想大量修改现有代码,同时又能在IE8中正常使用,微软声称,开发商仅需要在目前兼容IE7的网站上添加一行代码即可解决问题,此代码如下:
<meta http-equiv="x-ua-compatible" content="ie=7" />
2、body:nth-of-type(1) 如果这样写,表示全局查找body,将会对应第一个<body>。
3、还有其他写法,比如:
*html #test{}或者 *+html #test{}
4、*+html 对IE7的hack 必须保证HTML顶部有如下声明:
http://www.w3.org/TR/html4/loose.dtd
5、顺序:Firefox、IE8、IE7、IE6依次排列。
小知识:什么是CSS hack?
  由于不同的浏览器,比如IE6、IE7、IE8、Firefox等,对CSS的解析认识不一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。
  这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果。
  这个针对不同的浏览器写不同的CSS code的过程,就叫CSS hack,也叫写CSS hack。
下面是补充:

复制代码代码如下:
selector{
property:value; /* 所有浏览器 */
property:value\9; /* 所有IE浏览器 */
+property:value; /* IE7 */
_property:value; /* IE6 */
}


详细出处参考:http://www.jb51.net/css/24946.html

posted @ 2010-03-16 11:28 Angle Wang 阅读(1143) | 评论 (0)编辑 收藏

CSS3的border-radius(圆角)

border-radius(圆角)的几点说明.

 

border-radius(圆角)的几点说明:

border-radius:长度
Firefox支持border-radius(圆角):-moz-border-radius:2px;
webkit内核的Safari和Chrome支持border-radius(圆角):-webkit-border-radius:2px;
Opera支持border-radius(圆角):border-radius:2px;
IE不支持border-radius(圆角)

我们还可以随意指定圆角的位置,左上、左下、右上、右下四个方向。在firefox、webkit内核的Safari和Chrome和opera(css3)、中的具体书写格式如下:

-moz-border-radius-topleft / -webkit-border-top-left-radius / border-top-left-radius
-moz-border-radius-topright / -webkit-border-top-right-radius / border-top-right-radius
-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius / border-bottom-left-radius
-moz-border-radius-bottomright / -webkit-border-bottom-right-radius /border-bottom-right-radius

border-radius(圆角)还有其他一些用法,Firefox、webkit内核的Safari和Chrome和opera(css3)其他写法有些略微的差异,具体可以查看以下网址:https://developer.mozilla.org/en/CSS:-moz-border-radius
http://www.the-art-of-web.com/css/border-radius/
http://dancewithnet.com/2008/12/27/border-radius-and-rounded-corner/

eg:/* content */
.blockcommon{
 margin-left: 10px;
 margin-right: 10px;
 -moz-border-radius: 3px;
 -khtml-border-radius: 3px;
 -webkit-border-radius: 3px;
 border-radius: 3px;
 background: #fff;
 border: 1px solid #eed8c6;
}

posted @ 2010-03-12 16:16 Angle Wang 阅读(284) | 评论 (0)编辑 收藏

css下margin、padding、border、background和font缩写示例

CSS代码简化在工作中是非常有益的,也是必要的。在编写CSS代码时,经常会出现冗余的代码,为了提高代码的质量及文件压缩到最小,使代码具有可读性,不得不把CSS代码简化。
margin
  margin-top:1px;
  margin-right:1px;
   margin-bottom:1px;
  margin-left:1px;
  代码简化为:margin:1px
  margin-top:1px;
  margin-right:2px;
  margin-bottom:1px;
  margin-left:2px;
  代码简化为:margin:1px 2px
  margin-top:1px;
  margin-right:2px;
  margin-bottom:3px;
  margin-left:2px;
  代码简化为:margin:1px 2px 3px
  margin-top:1px;
   margin-right:2px;
  margin-bottom:3px;
  margin-left:4px;
  代码简化为:margin:1px 2px 3px 4px
  注意:当属性值是0的时候单位可以不写如:0px 直接就写成0
padding
  padding的书写方法和margin相类似
  padding-top:1px;
   padding-right:1px;
  padding-bottom:1px;
  padding-left:1px;
  代码简化为:padding:1px
  padding-top:1px;
  padding-right:2px;
  padding-bottom:1px;
  padding-left:2px;
  代码简化为:padding:1px 2px
  padding-top:1px;
  padding-right:2px;
   padding-bottom:3px;
  padding-left:2px;
  代码简化为:padding:1px 2px 3px
  padding-top:1px;
  padding-right:2px;
   padding-bottom:3px;
  padding-left:4px;
  代码简化为:padding:1px 2px 3px 4px
border
  border-width:1px;
   border-style:solid;
  border-color:#000000;
  代码简化为:border:1px solid #000
background
  background-color:#CCFFFF;
   background-image:url(图片路径);
  background-repeat:repeat-x;
   background-position:5px 4px;
  代码简化为:background:#CFF url(图片路径) repeat-x 5px 4px
font
  font-size:26px;
   font-weight:bold;
  font-family: “宋体”;
  代码简化为:font:26px bold “宋体”
color属性值
  color:#000000;
  color:#ff0000;
  代码简化为:color:#000, color:#f00

posted @ 2010-03-12 14:17 Angle Wang 阅读(235) | 评论 (0)编辑 收藏

浅淡!important对CSS的重要性(转)

CSS中的!important是一个非常重要的属性,有时候发挥着非常大的作用,52CSS.com这方面的知识并不是非常多,我们看下面的文章,对它作比较感观的了解。
  前几天写一些CSS代码的时候又难为我了,因为那个该死的IE6对CSS的支持是如此的差劲,以前我还没注意过,因为做的东西基本都是基于IE的,可是我这次为博客写的CSS要支持不止IE一个浏览器,可恨的是我装的Windows 7,这里面自带的是IE8浏览器,我自认为已经没有问题了,可是打开IE6,仍然出现错位,于是我决定看看IE6到底是什么情况。
  我把所有的CSS块儿全部使用边框包起来,结果看到在IE中两个div之间的距离明显要宽于其他浏览器,比如你写一个div的margin属性为20px,那么在IE中就好像是40px一样,这也就是为什么本来精度计算的刚刚好,在IE下却偏偏错位的原因。
  后来我看到了!important这个属性,这个属性其实也是css规范中的,结果IE6愣是不支持,也正因为它不支持,才让很多的CSSer们找到了解决的方法。一般来讲,在css中,如果在同一个css块中写下两个同样的属性,那么其实是按照最下面的来执行的,比如说:

 Example Source Code [www.52css.com]
.home{
    margin-left:20px;
    margin-left:40px;
}

  那么在执行的时候其实是按照40px来执行的,!important的出现就是为了让用户自己设置被执行语句的优先级。如果把上面的语句改为:

 Example Source Code [www.52css.com]
.home{
    margin-left:20px!important;
    margin-left:40px;
}

  那么在火狐、google浏览器以及IE7以上版本下将会按照20px来执行,而在IE6下却仍然按照40px来执行,因为IE6并不支持!important规范,我们就可以按照这个规则来满足IE6的设计需要,什么时候发现IE6和其他浏览器显示效果不同,那么就设置两个,在上面的一个加入!important标记,而下面的一句则不需要添加,这样IE6就按照下面的来执行了。资深的CSSer说:如今的CSS处处!important。这可都是天杀的IE6惹的祸,大家说IE6就是一坨代谢产物一点也不为过。
  

posted @ 2010-03-11 15:14 Angle Wang 阅读(210) | 评论 (0)编辑 收藏

学习中的点滴

记录学习,工作中遇到的点点滴滴的问题。
1、需要把 background-attachment 属性设置为 "fixed",才能保证该属性在 Firefox 和 Opera 中正常工作。
例子:

<html>
  <head>
  <style type="text/css">
   body
   {
     background-image:url('eg_bg_03.gif');
     background-repeat:no-repeat;
     background-position:center;
     background-attachment:fixed;
   }
  </style>
  </head>
  <body>

  </body>
</html>

2、

clear:both

 CSS中 clear:both;可以终结在出现他之前的浮动
  

语法: clear : none | left |right | both


参数:

none : 允许两边都可以有浮动对象

both : 不允许有浮动对象

left : 不允许左边有浮动对象

right : 不允许右边有浮动对象


说明: 该属性的值指出了不允许有浮动对象的边。请参阅float属性。 对应的脚本特性为clear


示例:

div { clear : left }

img { float: right }

<div style="clear:both;"></div>

主要是用在div套div的结构中。如果内div是浮动的,一般都需要clear浮动,不然的话内div会超出外div的框架

所用什么时候用clear:both;就很重要,一般我们在需要清除浮动的时候用到clear:both;不要轻意用到clear:both;因为它也有副伯用.

我们写一个clear:both;的例子:

<div style="float:left;width:100px;"> clear:both第1行第1列,</div>
<div style="float:left;width:700px;"> clear:both第1行第2列,</div>
<div style="clear:both;"> clear:both第2行。</div>


<div style="float:left;width:100px;"> 第1列,</div>
<div style="float:left;width:700px;"> 第2列,</div>
<div>第三列</div>
------------------------------------------------------------------------------------------------
<div style="float:left;width:100px;"> 第1列,</div>
<div style="float:left;width:700px;"> 第2列,</div>
<div style="clear:both;"></div>
<div>第三列</div>


3css疑难问题收集
表格与内联对象不换行:
table{
width:30em; 
table-layout:fixed;/* 只有定义了表格的布局算法为fixed,下面td的定义才能起作用。 */ 
td{ 
width:100%; 
word-break:keep-all;/* 不换行 */ 
white-space:nowrap;/* 不换行 */ 
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */ 
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用。*/ 

.text-overflow { 
display:block;/*内联对象需加*/ 
width:31em; 
word-break:keep-all;/* 不换行 */ 
white-space:nowrap;/* 不换行 */ 
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */ 
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用。*/ 
}

posted @ 2010-03-11 10:46 Angle Wang 阅读(248) | 评论 (0)编辑 收藏

随机显示图片的JS代码

关于随机显示图片的代码很多,但有的只能在IE下才有效果,如果换在Firefox或其他浏览器下就会失去效果,能做到两全的JS真的很少,今天给大家介绍一个很简单的JS随机显示图片的代码。
以下是代码:

// JavaScript Document
var m=10; //随机显示图片的总数量
var n=Math.floor(Math.random()*m+1)
document.write ("<img src='/banner/banner_"+n+".gif' border=0 galleryimg=no>");
//

  上面代码的意思是图片保存在/banner/文件夹下,根据设置的图片总数量,分别放入10张从banner_01.gif到banner_10.gif的图片,在执行这个JS时,它会随机显示从banner_01.gif到banner_10.gif的图片。
  保存这个JS为banner.js。

在网页相应的地方写入调用代码

以下是代码:

<script language="JavaScript" src="/Js/banner.js"></script>//-->

//调用

这段代码可以在IE和Firefox下有效显示。


简单的JavaScript随机显示图片广告的效果
兼容性:IE6+ FireFox2+ Opera9+

<script>
/******************************************************
* 简单的JavaScript随机显示图片广告的效果  Share JavaScript (http://www.ShareJS.com)
* 使用此脚本程序,请保留此声明
* 获取此脚本以及更多的JavaScript程序,请访问 http://www.ShareJS.com
******************************************************/

var str=new Array("http://www.sharejs.com/code/image/img/1.jpg","http://www.sharejs.com/code/image/img/2.jpg","http://www.sharejs.com/code/image/img/3.jpg");
var a;
a=str[parseInt(Math.random()*(str.length))];
document.write("<img src="+a+">");
</script>


posted @ 2010-03-04 09:47 Angle Wang 阅读(3544) | 评论 (0)编辑 收藏

相邻选择器

这个选择器的正式名称(根据W3C)是临近同属组合器。我觉得这个名称既长又复杂,因此把它简称为相邻选择器。虽说是"相邻",但相邻选择器选取的却是一个元素的下一个元素。基于图3-14中的标记,图3-24中的标记示范了相邻选择器的形式。

注意:

IE 6本身并不支持相邻选择器;请查阅本书的网址www.wrox.com/go/beginning_css2e以获取兼容性方面的帮助。

 
图  3-24

在图3-24中,可以看到加号被用来表示两个元素之间的相邻关系。你在这点上也许会有疑问:这么做看起来很舒服,但实际用途是什么?难道不能单独引用div#body来达到同样的效果吗?为什么需要一个相邻选择器?很高兴你这样问。在特定的情况下这个选择器会发挥作用,比如当几份HTML文档引用同一份样式表时。在一部分文档中,带有id名称heading的<div>元素和带有id名称body的<div>元素是相邻的,即它们在源文件中相继出现。在其他文档中这两个元素或许不是相邻的。如果你对这两种理论上不同的文档有不同的模板需求的话,自然会想通过某种方法来引用那些相邻的元素,这就是相邻选择器实际应用的一个例子。正如我在上一节"直接子选择器"中提到的那样,有时你不想创建新的id和类名。在某些情况下,当你使用相邻选择器时,能够避免创建新的类和id名称。

在接下来的概念验证型例子中,你将亲自试验相邻选择器。

试一试 相邻选择器

例3-5  按以下步骤,了解相邻选择器是如何工作的。

1. 在文本编辑器中输入以下标记:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'>
<head>
<title>Next Sibling Selectors</title>
<link rel='stylesheet' type='text/css' href='Example_3-5.css' />
</head>
<body>
<h1>Next Sibling Selectors</h1>
<p>
The next sibling selector (or adjacent sibling combinator as
it's officially called) allows you to select an element based on
its sibling. This paragraph has a lightyellow background and
darkkhaki text.
</p>
<p>
This paragraph has a yellowgreen background and green text.
</p>
<p>
This paragraph has no colored background, border, or text.
</p>
</body>
</html>

2. 保存上述标记为Example_3-5.html。

3. 在文本编辑器中输入以下CSS:

body {
font: 12px sans-serif;
}
p {
padding: 5px;
}
h1 + p {
background: lightyellow;
color: darkkhaki;
border: 1px solid darkkhaki;
}
h1 + p + p {
background: yellowgreen;
color: green;
border: 1px solid green;
}
4.保存样式表为Example_3-5.css。将它在支持相邻选择器的浏览器中载入,你将看到如图3-25所示的结果。
 
(点击查看大图)图  3-25

工作原理

相邻选择器基于相邻关系应用样式。下面是对Example_3-5.css中有关样式的分析。

Example_3-5.css中的第一个样式应用于Example_3-5.html的第一段。h1 + p表示如果<p>元素是直接跟在<h1>元素后的元素,则应用本规则中的声明。

h1 + p {
background: lightyellow;
color: darkkhaki;
border: 1px solid darkkhaki;
}

只有当<p>元素是直接与<h1>元素相邻的元素时,这条规则才起作用。

第二条规则里使用了一个更为复杂的相邻选择器。它表示如果一个<p>元素直接相邻于另一个<p>元素,并且后者也直接相邻于一个<h1>元素时,应用本规则中的声明。

h1 + p + p {
background: yellowgreen;
color: green;
border: 1px solid green;
}

就像直接子选择器可以基于父子关系应用样式一样,相邻选择器可以基于相邻关系应用样式。

在很多时候,如果能基于元素的属性或属性值应用样式会很有用。

posted @ 2010-02-26 13:10 Angle Wang 阅读(297) | 评论 (0)编辑 收藏

li和ul标签用法举例

LI代码的格式化:
A).运用CSS格式化列表符: ul li{
list-style-type:none;
}
B).如果你想将列表符换成图像,则: ul li{
list-style-type:none;
list-style-image: url(/blog/images/icon.gif);
}
C).为了左对齐,可以用如下代码: ul{
list-style-type:none;
margin:0px;
}
D).如果想给列表加背景色,可以用如下代码: ul{
list-style-type: none;
margin:0px;
}
ul li{
background:#CCC;
}
E).如果想给列表加MOUSEOVER背景变色效果,可以用如下代码: ul{ list-style-type: none; margin:0px; }
ul li a{ display:block; width: 100%; background:#ccc; }
ul li a:hover{ background:#999; }说明:display:block;这一行必须要加的,这样才能块状显示!

F).LI中的元素水平排列,关键FLOAT:LEFT: ul{
list-style-type:none;
width:100%;
}
ul li{
width:80px;
float:left;
}
<ul><li>的区别
<LI> 的参数设定(常用):
例如: <li type="square" value="4">

type="square"
只适用于非顺序清单,设定符号款式,其值有三种,如下,内定为 type="disc":
符号 是当 type="disc" 时的列项符号。
符号 if" width=10 height=10 border=0> 是当 type="circle" 时的列项符号。
符号 是当 type="square" 时的列项符号。
value="4"
只适用于顺序清单,设定该一项的数目,其後各项将以此作为起始数目而递增,但前面各项则不受影响,其值只能是 1,2,3.. 等整数,没有内定值。
<UL>称为无序清单标记。
所谓无序清单就是在每一项前面加上 、、等符号,故又称符号清单。
<UL> 的参数设定(常用):
例如: <UL type="square">

type="square"
设定符号款式,其值有三种,如下,内定为 type="disc":
符号 是当 type="disc" 时的列项符号。
符号 是当 type="circle" 时的列项符号。
符号 是当 type="square" 时的列项符号。

<ul>是项目列表,<li>是列表项,项目列表就是用符号来列的,所以你列出来默认的就是黑点啦,还有一个是<ol>这个是编号列表,用数字来列的,也是用<li>做列表项
<li>是 list item 即列表项,但列表有很两种,所以外面得有 <ul> 或者 <ol> 用来区别无序列表(小点点)和有序列表(1,2,3...)。

posted @ 2010-02-25 11:14 Angle Wang 阅读(379) | 评论 (0)编辑 收藏

CSS实现隔行换色2种方法

网页设计制作,CSS实现隔行换色的2种方法:

第1种方法:
<style type="text/css">
UL.myul1 LI{background-color: expression(this.sourceIndex%2==0?'#9FB7F6':'#B6C8F8');
}
</style>
<ul class="myul1">
<li id="li1">111</li>
<li id="li2">222</li>
<li id="li2">333</li>
<li id="li2">444</li>
<li id="li2">555</li>
<li id="li2">666</li>
</ul>


第2种方法:

<style type="text/css">
<!--
.li01 { background:#FFF; }
.li02 { background:#000; }
li a{width:100%;display:block;}
li a:hover{background:red;}
-->
</style>

<div id="list01"><ul>
<li class="title"><a href="#">title</a></li>
<li><a href="#">111</a></li>
<li><a href="#">222</a></li>
<li><a href="#">333</a></li>
<li><a href="#">444</a></li>
<li><a href="#">555</a></li>
<li><a href="#">666</a></li>
</ul></div>

<script Language="Javascript1.2">

objName=document.getElementById("list01").getElementsByTagName("li")

for (i=0;i<objName.length;i++) {
(i%2==0)?(objName(i).className = "li01"):(objName(i).className = "li02");
}
</script> 

posted @ 2010-02-25 10:35 Angle Wang 阅读(228) | 评论 (0)编辑 收藏

DIV CSS网页布局:三行三列自适应高度的DIV布局

通常在DIV布局中,自适应高度一直是比较头疼的问题,一般大都采用背景图、外套DIV、右栏覆盖左栏来解决。现在加了脚本后,简单多了,假如有三个水平并列的DIV,fbox、mbox、sbox,只要在标签中写入:onload="P7_equalCols('fbox','mbox','sbox')",测试条件:ie5.x、ie6.0、FF1.03、NS7.2、opera8.01   
JS代码:版权归原作者,仅供学习研究.
 Example Source Codeom]
/*  
------------------------------------------------ 
PVII Equal CSS Columns scripts 
Copyright (c) 2005 Project Seven Development 
www.projectseven.com 
Version: 1.5.0 
------------------------------------------------ 
*/ 
function P7_colH(){ //v1.5 by PVII-www.projectseven.com 
var i,oh,hh,h=0,dA=document.p7eqc,an=document.p7eqa;if(dA&&dA.length){ 
for(i=0;i oh=dA[i].offsetHeight;h=(oh>h)?oh:h;}for(i=0;i dA[i].style.height=h+'px';}else{P7_eqA(dA[i].id,dA[i].offsetHeight,h);}}if(an){ 
for(i=0;ih){ 
dA[i].style.height=(h-(hh-h))+'px';}}}else{document.p7eqa=1;} 
document.p7eqth=document.body.offsetHeight; 
document.p7eqtw=document.body.offsetWidth;} 

function P7_eqT(){ //v1.5 by PVII-www.projectseven.com 
if(document.p7eqth!=document.body.offsetHeight||document.p7eqtw! =document.body.offsetWidth){ 
P7_colH();} 

function P7_equalCols(){ //v1.5 by PVII-www.projectseven.com 
if(document.getElementById){document.p7eqc=new Array;for(i=0;i document.p7eqc[i]=document.getElementById(arguments[i]);} setInterval("P7_eqT()",10);} 

function P7_eqA(el,h,ht){ //v1.5 by PVII-www.projectseven.com 
var sp=10,inc=10,nh=h,g=document.getElementById(el),oh=g.offsetHeight,ch=parseInt(g.style.height) ; 
ch=(ch)?ch:h;var ad=oh-ch,adT=ht-ad;nh+=inc;nh=(nh>adT)?adT:nh;g.style.height=nh+'px'; 
oh=g.offsetHeight;if(oh>ht){nh=(ht-(oh-ht));g.style.height=nh+'px';} 
if(nh

posted @ 2010-02-25 10:08 Angle Wang 阅读(528) | 评论 (0)编辑 收藏

DIV CSS网页布局常用的方法与技巧

CSS布局常用的方法
float:none|left|right 
取值:
none: 默认值。对象不飘浮
left: 文本流向对象的右边
right: 文本流向对象的左边 

它是怎样工作的,看个一行两列的例子 
xhtml代码:

 Example Source Code
<div id="wrap"> 
<div id="column1">这里是第一列</div> 
<div id="column2">这里是第二列</div> 
<div class="clear"></div> /*这是违背web标准意图的,只是想说明在它下面的元素需要清除浮动*/ 
</div>

CSS代码:
 Example Source Code
#wrap{width:100;height:auto;} 
#column1{float:left;width:40;} 
#column2{float:right;width:60;} 
.clear{clear:both;}


position:static|absolute|fixed|relative
取值:
static: 默认值。无特殊定位,对象遵循HTML定位规则
absolute: 将对象从文档流中拖出,使用left,right,top,bottom等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象,则依据body对象。而其层叠通过z-index属性定义
fixed: 未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范
relative: 对象不可层叠,但将依据left,right,top,bottom等属性在正常文档流中偏移位置 

它来实现一行两列的例子 
xhtml代码:
 Example Source Code
<div id="wrap"> 
<div id="column1">这里是第一列</div> 
<div id="column2">这里是第二列</div> 
</div>

CSS代码:
 Example Source Code
#wrap{position:relative;/*相对定位*/width:770px;} 
#column1{position:absolute;top:0;left:0;width:300px;} 
#column2{position:absolute;top:0;right:0;width:470px;} 

他们的区别在哪?
显然,float是相对定位的,会随着浏览器的大小和分辨率的变化而改变,而position就不行了,所以一般情况下还是float布局!


CSS常用布局实例
单行一列

 Example Source Code
body{margin:0px;padding:0px;text-align:center;} 
#content{margin-left:auto;margin-right:auto;width:400px;} 

两行一列 
 Example Source Code
body{margin:0px;padding:0px;text-align:center;} 
#content-top{margin-left:auto;margin-right:auto;width:400px;} 
#content-end{margin-left:auto;margin-right:auto;width:400px;} 

三行一列
 Example Source Code
body{margin:0px;padding:0px;text-align:center;} 
#content-top{margin-left:auto;margin-right:auto;width:400px;width:370px;} 
#content-mid{margin-left:auto;margin-right:auto;width:400px;} 
#content-end{margin-left:auto;margin-right:auto;width:400px;}

单行两列
 Example Source Code
#bodycenter{width:700px;margin-right:auto;margin-left:auto;overflow:auto;} 
#bodycenter#dv1{float:left;width:280px;} 
#bodycenter#dv2{float:right;width:420px;} 

两行两列
 Example Source Code
#header{width:700px;margin-right:auto;margin-left:auto;overflow:auto;} 
#bodycenter{width:700px;margin-right:auto;margin-left:auto;overflow:auto;} 
#bodycenter#dv1{float:left;width:280px;} 
#bodycenter#dv2{float:right;width:420px;} 

三行两列
 Example Source Code
#header{width:700px;margin-right:auto;margin-left:auto;} 
#bodycenter{width:700px;margin-right:auto;margin-left:auto;} 
#bodycenter#dv1{float:left;width:280px;} 
#bodycenter#dv2{float:right;width:420px;} 
#footer{width:700px;margin-right:auto;margin-left:auto;overflow:auto;clear:both;} 


单行三列
绝对定位 

 Example Source Code
#left{position:absolute;top:0px;left:0px;width:120px;} 
#middle{margin:0px190px0px190px;} 
#right{position:absolute;top:0px;right:0px;width:120px;} 


float定位一
xhtml代码:
 Example Source Code
<div id="wrap"> 
<div id="column"> 
<div id="column1">这里是第一列</div> 
<div id="column2">这里是第二列</div> 
<div class="clear"></div>/*用法web标准不建议,但是记住下面元素需要清除浮动*/ 
</div> 
<divid="column3">这里是第三列</div> 
<divclass="clear"></div>/*用法web标准不建议,但是记住下面元素需要清除浮动*/ 
</div> 

CSS代码:
 Example Source Code
#wrap{width:100;height:auto;} 
#column{float:left;width:60;} 
#column1{float:left;width:30;} 
#column2{float:right;width:30;} 
#column3{float:right;width:40;} 
.clear{clear:both;} 


float定位二
xhtml代码:
 Example Source Code
<div id="center"class="column"> 
<h1>Thisisthemaincontent.</h1> 
</div> 
<div id="left"class="column"> 
<h2>Thisistheleftsidebar.</h2> 
</div> 
<div id="right"class="column"> 
<h2>Thisistherightsidebar.</h2> 
</div>

CSS代码:
 Example Source Code
body{ 
margin:0; 
padding-left:200px;/*LCfullwidth*/ 
padding-right:190px;/*RCfullwidth CCpadding*/ 
min-width:200px;/*LCfullwidth CCpadding*/ 

.column{ 
position:relative; 
float:left; 

#center{ 
width:100; 

#left{ 
width:200px;/*LCwidth*/ 
right:200px;/*LCfullwidth*/ 
margin-left:-100; 

#right{ 
width:190px;/*RCwidth*/ 
margin-right:-100; 
}

posted @ 2010-02-25 10:04 Angle Wang 阅读(175) | 评论 (0)编辑 收藏

CSS Hack汇总快查

 

原文:http://andymao.com/andy/post/76.html

屏蔽IE浏览器(也就是IE下不显示)

*:lang(zh) select {font:12px  !important;} /*FF的专用*/
select:empty {font:12px  !important;} /*safari可见*/
这里select是选择符,根据情况更换。第二句是MAC上safari浏览器独有的。
仅IE7识别

*+html  {…}
当面临需要只针对IE7做样式的时候就可以采用这个HACK。
IE6及IE6以下识别

* html  {…}
这个地方要特别注意很多地主都写了是IE6的HACK其实IE5.x同样可以识别这个HACK。其它浏览器不识别。
html/**/ >body  select {……}
这句与上一句的作用相同。
仅IE6不识别

select { display /*IE6不识别*/:none;}
这里主要是通过CSS注释分开一个属性与值,流释在冒号前。
仅IE6与IE5不识别

select/**/ { display /*IE6,IE5不识别*/:none;}
这里与上面一句不同的是在选择符与花括号之间多了一个CSS注释。
仅IE5不识别

select/*IE5不识别*/ { display:none;}
这一句是在上一句中去掉了属性区的注释。只有IE5不识别
盒模型解决方法

selct {width:IE5.x宽度; voice-family :"\"}\""; voice-family:inherit; width:正确宽度;}
盒模型的清除方法不是通过!important来处理的。这点要明确。
清除浮动

select:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
在Firefox中,当子级都为浮动时,那么父级的高度就无法完全的包住整个子级,那么这时用这个清除浮动的HACK来对父级做一次定义,那么就可以解决这个问题 。

截字省略号

select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
这个是在越出长度后会自行的截掉多出部分的文字,并以省略号结尾,很好的一个技术。只是目前Firefox并不支持。
只有Opera识别

@media all and (min-width: 0px){ select {……}  }
针对Opera浏览器做单独的设定。
以上都是写CSS中的一些HACK,这些都是用来解决局部的兼容性问题,如果希望把兼容性的内容也分离出来,不妨试一下下面的几种过滤器。这些过滤器有的是写在CSS中通过过滤器导入特别的样式,也有的是写在HTML中的通过条件来链接或是导入需要的补丁样式。

IE5.x的过滤器,只有IE5.x可见


@media tty {
i{content:"\";/*" "*/}} @import 'ie5win.css'; /*";}
}/* */
IE5/MAC的过滤器,一般用不着

[Copy to clipboard] [ - ]CODE:
/*\*//*/
    @import "ie5mac.css";
/**/
IE的if条件Hack

<!--[if IE]> Only IE <![endif]-->
所有的IE可识别
<!--[if IE 5.0]> Only IE 5.0 <![endif]-->
只有IE5.0可以识别
<!--[if gt IE 5.0]> Only IE 5.0+ <![endif]-->
IE5.0包换IE5.5都可以识别
<!--[if lt IE 6]> Only IE 6- <![endif]-->
仅IE6可识别
<!--[if gte IE 6]> Only IE 6/+ <![endif]-->
IE6以及IE6以下的IE5.x都可识别
<!--[if lte IE 7]> Only IE 7/- <![endif]-->
仅IE7可识别

posted @ 2010-02-25 10:00 Angle Wang 阅读(150) | 评论 (0)编辑 收藏

制作网页的一般大小

高度:没有一个固定值,因为每个人的浏览器的工具栏不同。
宽度:
1、在IE6.0下,宽度为显示器分辨率减21,比如1024的宽度-21就变成1003。但值得注意的是IE6.0(或更低)无论你的网页多高都会有右侧的滚动条框。
2、在Firefox下,宽度的分率辨减19。比如1024的宽度-19就变成1005
3、在Opear下,宽度的分率辨减23。比如1024的宽度-23就变成1001
注:Firefox或Opear在内容少于浏览器高度时不显示右侧滚动条。

所以如果是1024的分辨率,你的网页不如设成1000安全一点。
如果是800的分辨率一般都设成770

posted @ 2010-02-21 09:17 Angle Wang 阅读(295) | 评论 (0)编辑 收藏