公司网站最近一个月统计出来的访客分辨率报表图：

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

再看一组数据

上面都是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

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

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

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

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

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

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

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

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

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

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

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

淘宝网用户体验设计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源代码

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

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

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

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

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

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

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

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

3.无形的体验

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

4.引领用户的“体验”

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

5.核心产品体验

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

一，关于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.org的CSS 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

各浏览器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

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/

<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

<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>

注意：

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;

            }

（点击查看大图）图  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;

            }
            

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

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

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...）。

网页设计制作,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> 

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

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

高度：没有一个固定值，因为每个人的浏览器的工具栏不同。
宽度：
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

一 软件应用能力(选2题)：

1．Ps或者其他图像处理软件做一个如图的渐变按钮

2．Flash做一个简单的图形遮罩效果

3．把网站童车列表页的结构美感重新设计

4．用ps或者Fw等图像处理软件对一个网页平面图做切片（例图为：）

二 网页设计分析能力

1． 购物网站的主色调应该是什么样色？交友网站？体育网站？软件网站？年轻的互联网？搜索引擎？

2． 一个网站最多有几种色彩

3． 百度和google，你看哪个觉得更舒服一点？

4． 列出你所知道的几种图像格式，并说出它们之间的不同点和大部分的用途

5． 一般网站的版式有哪几种？

6． 如果背景是黑色，那么字体用什么颜色能突出字体，且不显得刺眼？

7． 在在红色中加入少量的黑色，你觉得应该是种什么感觉？

三 网页制作能力

1． 用table和div分别设计一个三行三列的网页（头部,身体,底部;身体部分为三列）

2． 列出你所用过的Html元素

3． 用li做一个横向的导航菜单，不少于三个菜单

4．背景的哪个属性来确定背景图像是否固定？

四 高级应用能力（选做）

1． 用js代码写出一个页面加载后能不断变换背景的效果

2． 利用DOM知识是列出一个ul中li的总数，li中的内容

3． 写出你会用的兼容个中不同浏览器的hack css代码，如IE7 FF

4． 说出你所知道的web标准方面的知识

5． 高级图像处理（可网上查询教程）：模仿例图

6． Form表单的哪个属性是表单数据的传送方式？

7． /images/123.jpg 与 images/123.jpg,那种写法是相对根目录的？

即使是CSS高手，也难免在书写CSS代码的时候出一些小错误，或者说，任何一种代码都是如此。小错误却往往造成大问题，浪费很多无辜的时间来调试和排错。查看下面这份CSS网页布局中易犯的10个小错误，努力的修正你可能会犯的错误，加速你的前端开发效率。

1. 检查html元素是否有拼写错误、是否忘记结束标记

即使是老手也经常会弄错div的嵌套关系。可以用dreamweaver的验证功能检查一下有无错误。

2. 检查CSS是否书写正确

检查一下有无拼写错误、是否忘记结尾的 } 等。可以利用CleanCSS来检查 CSS的拼写错误。CleanCSS本是为CSS减肥的工具，但也能检查出拼写错误。

3. 用删除法确定错误发生的位置

如果错误影响了整体布局，则可以逐个删除div块，直到删除某个div块后显示恢复正常，即可确定错误发生的位置。

4. 利用border属性确定出错元素的布局特性

使用float属性布局一不小心就会出错。这时为元素添加border属性确定元素边界，错误原因即水落石出。

5. float元素的父元素不能指定clear属性

MacIE下如果对float的元素的父元素使用clear属性，周围的float元素布局就会混乱。这是MacIE的著名的bug，倘若不知道就会走弯路。

6. float元素务必指定width属性

很多浏览器在显示未指定width的float元素时会有bug。所以不管float元素的内容如何，一定要为其指定width属性。
另外指定元素时尽量使用em而不是px做单位。

7. float元素不能指定margin和padding等属性

IE在显示指定了margin和padding的float元素时有bug。因此不要对float元素指定margin和padding属性（可以在float元素内部嵌套一个div来设置margin和padding）。也可以使用hack方法为IE指定特别的值。

8. float元素的宽度之和要小于100%

如果float元素的宽度之和正好是100%，某些古老的浏览器将不能正常显示。因此请保证宽度之和小于99%。

9. 是否重设了默认的样式？

某些属性如margin、padding等，不同浏览器会有不同的解释。因此最好在开发前首先将全体的margin、padding设置为0、列表样式设置为none等。

10. 是否忘记了写DTD？

如果无论怎样调整不同浏览器显示结果还是不一样，那么可以检查一下页面开头是不是忘了写下DTD声明。

注: 本文来源于网络，出处不明。

<head>
<style type="text/css">
  #container{
  text-align: left;
  background-color: #faf7ec;
  width: 500px;
  margin: 20px auto 0 auto;
  padding: 0;
  font-family:Arial, Helvetica, sans-serif;
  font-size:12px;
 }
#block0, #block1, #block2, #block3, #block4, #block5
{
  border-top: solid 1px #785a3c;
  margin: 0;
  padding: 10px;
}
.active {  background-color: #fff;}
.visited {  background-color: #ede7da;}
#block0, #block0.active, #block0.visited
{
  text-align: center;
  background-color: #a0dcf8;
  border-top: none;
  border-bottom: solid 4px #785a3c;
}
</style>

<script>
var ScrollWin = {
  w3c : document.getElementById,
  iex : document.all,
  scrollLoop : false,
  scrollInterval : null, // setInterval id
  currentBlock : null,   // object reference
  getWindowHeight : function(){
    if(this.iex) return (document.documentElement.clientHeight) ?
document.documentElement.clientHeight : document.body.clientHeight;
    else return window.innerHeight;
  },
  getScrollLeft : function(){
    if(this.iex) return (document.documentElement.scrollLeft) ?
document.documentElement.scrollLeft : document.body.scrollLeft;
    else return window.pageXOffset;
  },
  getScrollTop : function(){
    if(this.iex) return (document.documentElement.scrollTop) ?
document.documentElement.scrollTop : document.body.scrollTop;
    else return window.pageYOffset;
  },
  getElementYpos : function(el){
    var y = 0;
    while(el.offsetParent){
      y += el.offsetTop
      el = el.offsetParent;
    }
    return y;
  },
  scroll : function(num){
    if(!this.w3c){
      location.href = "#"+this.anchorName+num;
      return;
    }
    if(this.scrollLoop){
      clearInterval(this.scrollInterval);
      this.scrollLoop = false;
      this.scrollInterval = null;
    }
    if(this.currentBlock != null) this.currentBlock.className = this.offClassName;
    this.currentBlock = document.getElementById(this.blockName+num);
    this.currentBlock.className = this.onClassName;
    var doc = document.getElementById(this.containerName);
    var documentHeight = this.getElementYpos(doc) + doc.offsetHeight;
    var windowHeight = this.getWindowHeight();
    var ypos = this.getElementYpos(this.currentBlock);
    if(ypos > documentHeight - windowHeight) ypos = documentHeight - windowHeight;
    this.scrollTo(0,ypos);
  },
  scrollTo : function(x,y){
    if(this.scrollLoop){
      var left = this.getScrollLeft();
      var top = this.getScrollTop();
      if(Math.abs(left-x) <= 1 && Math.abs(top-y) <= 1){
        window.scrollTo(x,y);
        clearInterval(this.scrollInterval);
        this.scrollLoop = false;
        this.scrollInterval = null;
      }else{
        window.scrollTo(left+(x-left)/10, top+(y-top)/10);  
      }
    }else{
      this.scrollInterval = setInterval("ScrollWin.scrollTo("+x+","+y+")",20);   
      this.scrollLoop = true;
    }
  }
};
ScrollWin.containerName = "container";
ScrollWin.anchorName    = "anchor";  
ScrollWin.blockName     = "block";    
ScrollWin.onClassName   = "active";   
ScrollWin.offClassName  = "visited";  
</script>
</head>

<body>
<div align="center">
<div id="container">
  <a name="anchor0"></a>
  <div id="block0">
    <a href="javascript:ScrollWin.scroll('1')">链接 1</a> |
    <a href="javascript:ScrollWin.scroll('2')">链接 2</a> |
    <a href="javascript:ScrollWin.scroll('3')">链接 3</a> |
    <a href="javascript:ScrollWin.scroll('4')">链接 4</a> |
    <a href="javascript:ScrollWin.scroll('5')">链接 5</a>
  </div>
  <a name="anchor1"></a>
  <div id="block1">
    <h3><a href="#" onclick="javascript:ScrollWin.scroll('0'); return false;">顶部</a>
  链接 1</h3>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
  </div>
  <a name="anchor2"></a>
  <div id="block2">
    <h3><a href="#" onclick="javascript:ScrollWin.scroll('0'); return false;">顶部</a>
  链接 2</h3>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
  </div>
  <a name="anchor3"></a>
  <div id="block3">
    <h3><a href="#" onclick="javascript:ScrollWin.scroll('0'); return false;">顶部</a>
  链接 3</h3>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
  </div>
  <a name="anchor4"></a>
  <div id="block4">
    <h3><a href="#" onclick="javascript:ScrollWin.scroll('0'); return false;">顶部</a>
  链接 4</h3>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
  </div>
  <a name="anchor5"></a>
  <div id="block5">
    <h3><a href="#" onclick="javascript:ScrollWin.scroll('0'); return false;">顶部</a>
  链接 5</h3>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
  </div>
</div>
</div>
</body>

页头：header                    登录条：loginBar
标志：logo                        侧栏：sideBar
广告：banner                    导航：nav
子导航：subNav                菜单：menu
子菜单：subMenu               搜索：search
滚动：scroll
页面主体：main
内容：content
标签页：tab
文章列表：list
提示信息：msg
小技巧：tips
栏目标题：title
加入：joinus
指南：guild
服务：service
热点：hot
新闻：news
下载：download
注册：regsiter
状态：status
按钮：btn
投票：vote
合作伙伴：partner
友情链接：friendLink
页脚：footer
版权：copyRight

1.CSS ID 的命名
外　套：　　wrap
主导航：　　mainNav
子导航：　　subnav
页　脚：　　footer
整个页面：　content
页　眉：　　header
页　脚：　　footer
商　标：　　label
标　题：　　title
主导航：　　mainNav（globalNav）
顶导航：　　topnav
边导航：　　sidebar
左导航：　　leftsideBar
右导航：　　rightsideBar
旗　志：　　logo
标　语：　　banner
菜单内容1： menu1Content
菜单容量：　menuContainer
子菜单：　　submenu
边导航图标：sidebarIcon
注释：　　　note
面包屑：　　breadCrumb(即页面所处位置导航提示）
容器：　　　container
内容：　　　content
搜索：　　　search
登陆：　　　login
功能区：　　shop(如购物车，收银台)
当前的　　　current

2.另外在编辑样式表时可用的注释可这样写：
<– Footer –>
内容区
<– End Footer –>

3.样式文件命名
主要的 master.css
布局，版面 layout.css
专栏 columns.css
文字 font.css
打印样式 print.css
主题 themes.css

 

随着最新CSS的不断完善，越来越多的网站采用DIV+CSS布局。而原来使用table套table的网页布局模式也逐渐应该淘汰了。由于目前IE6不能支持有些标准的CSS，需要用微软特有的CSS来修复这些BUG.而且现在随着浏览器层出不穷，要是页面能够适应尽量多的浏览器成为一个课题。 但是随着CSS标准的进一步完善，浏览器将最终都会遵循这个标准，到时候写DIV+CSS布局的页面就不那么麻烦了。 但是现在，我们还是需要处理CSS在不同浏览器下的兼容性。一下是一个网友写的CSS兼容技巧，值得大家参考。 CSS兼容技巧 　　1, FF下给 div 设置 padding 后会导致 width 和 height 增加, 但IE不会.              可用!important解决 　　2, 居中问题. 　　 1).垂直居中.将 line-height 设置为 当前 div 相同的高度, 再通过 vertical-align: middle.( 注意内容不要换行.) 　　   2).水平居中. margin: 0 auto;(当然不是万能) 　　3, 若需给 a 标签内内容加上样式,需要设置 display: block;(常见于导航标签) 　　4, FF 和 IE 对 BOX 理解的差异导致相差 2px 的还有设为 float的div在ie下 margin加倍等问题. 　　5, ul 标签在 FF 下面默认有 list-style 和 padding . 最好事先声明, 以避免不必要的麻烦. (常见于导航标签和内容列表) 　　6, 作为外部 wrapper 的 div 不要定死高度, 最好还加上 overflow: hidden.以达到高度自适应. 　　7, 关于手形光标. cursor: pointer. 而hand 只适用于 IE. 针对firefox ie6 ie7的css样式 　　现在大部分都是用!important来hack，对于ie6和firefox测试可以正常显示， 　　但是ie7对!important可以正确解释，会导致页面没按要求显示!找到一个针 　　对IE7不错的hack方式就是使用“*+html”，现在用IE7浏览一下，应该没有问题了。 　　现在写一个CSS可以这样： 　　#1 { color: #333; } /* Moz */ 　　* html #1 { color: #666; } /* IE6 */ 　　*+html #1 { color: #999; } /* IE7 */ 　　那么在firefox下字体颜色显示为#333，IE6下字体颜色显示为#666，IE7下字体颜色显示为#999。 css布局中的居中问题 　　主要的样式定义如下： 　　body {TEXT-ALIGN: center;} 　　#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; } 　　说明： 　　首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中;对于IE这样设定就已经可以了。 　　但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ” 　　需要说明的是，如果你想用这个方法使整个页面要居中，建议不要套在一个DIV里，你可以依次拆出多个div， 　　只要在每个拆出的div里定义MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。 盒模型不同解释 　　#box{ width:600px; //for ie6.0- w/idth:500px; //for ff+ie6.0} 　　#box{ width:600px!important //for ff width:600px; //for ff+ie6.0 width /**/:500px; //for ie6.0-} 浮动ie产生的双倍距离 　　#box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略} 　　这里细说一下block,inline两个元素,Block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是:和其他元素在同一行上,…不可控制(内嵌元素); 　　#box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的的效果 diplay:table; 　　IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度， 　　正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。 　　比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样： 　　#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;} 页面的最小宽度 　　min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个， 　　而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个 放到 标签下，然后为div指定一个类： 　　然后CSS这样设计： 　　#container{ min-width: 600px; width:expression(document.body.clientWidth < 600? “600px”: “auto” );} 　　第一个min-width是正常的;但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。 清除浮动 　　.hackbox{ display:table; //将对象作为块元素级的表格显示}或者.hackbox{ clear:both;} 　　或者加入:after(伪对象),设置在对象后发生的内容，通常和content配合使用，IE不支持此伪对象，非Ie 浏览器支持， 　　所 以并不影响到IE/WIN浏览器。这种的最麻烦的……#box:after{ content: “.”; display: block; height: 0; clear: both; visibility: hidden;} DIV浮动IE文本产生3象素的bug 　　左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距. 　　#box{ float:left; width:800px;}#left{ float:left; width:50%;}#right{ width:50%;}*html #left{ margin-right:-3px; //这句是关键} 　　HTML代码 属性选择器(这个不能算是兼容,是隐藏css的一个bug) 　　p[id]{}div[id]{} 　　这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用 　　属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的. IE捉迷藏的问题 　　当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。 　　有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。 　　解决办法：对#layout使用line-height属性 或者给#layout使用固定高和宽。页面结构尽量简单。 高度不适应 　　高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用 　　margin 或paddign 时。 　　例：         p对象中的内容 　　CSS：#box {background-color:#eee; } 　　#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; } 　　解决方法：在P对象上下各加2个空的div对象CSS代码：.1{height:0px;overflow:hidden;}或者为DIV加上border属性