迷失的光年

尽管命名CSS类的问题经常会被忽略，但这绝不等于它不重要。良好的命名能够有效提高CSS样式的编写速度，有利于CSS样式结构的组织。

常用的命名法

Web前端开发讲求灵活和创意，采用何种命名法完全取决于个人习惯、团队要求或者项目需求。目前常用的命名法无外乎CAMEL命名法和符号连接命名法。

（1）CAMEL命名法1

CAMEL命名法也被称为骆驼命名法、驼峰命名法，个人觉得驼峰这个名字很贴切。CAMEL命名法的特点是混合使用大小写字母来构成类名。程序清单1给出了CAMEL命名法。

程序清单1 采用CAMEL命名法的代码

<div class="wrapper">

<div class="leftContent">

<div class="title">

<div class="top">我是标题的顶部</div>

</div>

</div>

</div>

（2）符号连接命名法

最具代表性的两种符号连接命名法是下划线（_）命名法和连字符（-）命名法，它们分别使用下划线（_）和连字符（-）来分隔类名中出现的关键词（left_content或left-content）。

很难说CAMEL命名法和符号连接命名法哪个更好，抉择取决于个人意识，有一种看法认为符号连接命名法的好处在于不用按“Shift”键，进而达到避免拼写错误的目的。

语义化命名法

常用的CSS命名法从直观显示的角度进行命名，而语义化命名法则是从另一个角度来对CSS类进行命名即将语义部分包含在CSS类命名中，这类似于程序开发中的匈牙利命名法。

实践过程中存在很多种语义化命名方法，这里介绍一下MySpace中国（聚友） UI Team所使用的语义化命名法：利用祖先容器类名中关键词的首字母组合作为当前类名的前缀。程序清单1所示的代码很好地诠释了其规则。

程序清单2 语义化命名法的示例代码

<div class="squirrelWrapper">

<div class="swLeftContent ">

<div class="swlcTitle">

<div class="swlctTop">我是标题的上部</div>

</div>

</div>

</div>

在程序清单1中，类名squirrelWrapper包含两个关键词squirrel和Wrapper，它们的首字母组合sw形成了swLeftContent类中的前缀部分，余下的部分依此类推。

调头回来对比程序清单1和程序清单2，我们会发现程序清单2的优点显而易见：

（1）降低了样式覆盖的概率

为了避免样式覆盖，开发者可能会使用与.wrapper .left .title .top相似的层级关系来实现程序清单2中top类，而大多数情况下，开发者直接实现.swltTop。

（2）包含语义

通过观察CSS类名可以清晰地读出CSS类的层级关系。

CSS命名规则
****************************************************
    头：header
　　内容：content/containe
　　尾：footer
　　导航：nav
　　侧栏：sidebar
　　栏目：column
　　页面外围控制整体布局宽度：wrapper
　　左右中：left right center
　　登录条：loginbar
　　标志：logo
　　广告：banner
　　页面主体：main
　　热点：hot
　　新闻：news
　　下载：download
　　子导航：subnav
　　菜单：menu
　　子菜单：submenu
　　搜索：search
　　友情链接：friendlink
　　页脚：footer
　　版权：copyright
　　滚动：scroll
　　内容：content
　　标签页：tab
　　文章列表：list
　　提示信息：msg
　　小技巧：tips
　　栏目标题：title
　　加入：joinus
　　指南：guild
　　服务：service
　　注册：regsiter
　　状态：status
　　投票：vote
　　合作伙伴：partner
*******************************************************
XHTML文件中id的命名
*******************************************************
1)页面结构
　　容器: container
　　页头：header
　　内容：content/container
　　页面主体：main
　　页尾：footer
　　导航：nav
　　侧栏：sidebar
　　栏目：column
　　页面外围控制整体布局宽度：wrapper
　　左右中：left right center
(2)导航
　　导航：nav
　　主导航：mainbav
　　子导航：subnav
　　顶导航：topnav
　　边导航：sidebar
　　左导航：leftsidebar
　　右导航：rightsidebar
　　菜单：menu
　　子菜单：submenu
　　标题: title
　　摘要: summary
(3)功能
　　标志：logo
　　广告：banner
　　登陆：login
　　登录条：loginbar
　　注册：regsiter
　　搜索：search
　　功能区：shop
　　标题：title
　　加入：joinus
　　状态：status
　　按钮：btn
　　滚动：scroll
　　标签页：tab
　　文章列表：list
　　提示信息：msg
　　当前的: current
　　小技巧：tips
　　图标: icon
　　注释：note
　　指南：guild
　　服务：service
　　热点：hot
　　新闻：news
　　下载：download
　　投票：vote
　　合作伙伴：partner
　　友情链接：link
　　版权：copyright
******************************************************
XHTML文件中class的命名
******************************************************
(1)颜色:使用颜色的名称或者16进制代码,如(不建议以表现来命名)
　　.red { color: red; }
　　.f60 { color: #f60; }
　　.ff8600 { color: #ff8600; }
(2)字体大小,直接使用"font+字体大小"作为名称,如
　　.font12px { font-size: 12px; }
　　.font9pt {font-size: 9pt; }
(3)对齐样式,使用对齐目标的英文名称,如
　　.left { float:left; }
　　.bottom { float:bottom; }
(4)标题栏样式,使用"类别+功能"的方式命名,如
　　.barnews { }
　　.barproduct { }
******************************************************
其它相关注意事项
******************************************************
    1.一律小写;
　　2.尽量用英文;
　　3.不加中杠和下划线;
　　4.尽量不缩写，除非一看就明白的单词.
　　　　主要的 master.css
　　　　模块 module.css
　　　　基本共用 base.css
　　　　布局，版面 layout.css
　　　　主题 themes.css
　　　　专栏 columns.css
　　　　文字 font.css
　　　　表单 forms.css
　　　　补丁 mend.css
　　　　打印 print.css

 咱们就拿传统的网页来说：通过盒模式来分析，无非就是三大块：网页头部，网页内容 页脚。

网页头部：LOGO，导航，系统时间，banner条，或者有些设计师也通常把会员快速登陆入口放到顶部，比如大门户：网易，新浪等等。
网页内容：
       从布局上来说：最常见的就是两列，或者三列，也有其他的。
       从内容上来说：动态焦点新闻（图片形式），新闻资讯。一般以列表形式。或者图文混排。

页脚：什么关于我们 | 联系我们 | 网站地图 等等 最后是版权信息。
友情连接通常放在网页内容和页脚之间，放在网页内容的右侧或者左侧也比较常见。

只要我们大致定好整体框架。我们就开始动工了

第一步：写网页内容。写之前要先分析网页。其实我们稍加分析就会发现，其实网页内容大部分都是以列表的形式出现的，比如导航（就是个无序列表），新闻（有序列表），友情连接。大家要养成用列表的形式去分析网页，其实，生活中，列表无处不在。

       所以我们要充分利用DIV h1 h2 ul ol li 等等把这些东西至上而下描述出来。这时候我们要抛开一切，不要考虑样式。刚开始做网页设计的人，往往直接插个表格或者插入个DIV就开始设置

样式，到头来发现网页布局很难，来回修改，到时候一团糟。包括我之前也经常犯这样的错误。

第二步：写网页样式。 （分三步走）
    1、布局样式，抛弃文字样式设置，不要对文字做任何的修饰。如我们建立个css文件叫：layout.css
    2、文字样式，也单独放在一个文件中，如：font.css
    3、主题样式，也就是对网页进行美化，如添加背景，对网页加边框，新闻标题加背景等等。我们也新建一个样式：themes.css

第三步：整合优化
    我们再新建一个css文件，比如命名为：css.css，里面放：
@import url(layout.css);/*布局样式*/
@import url(font.css);/*文字样式*/
@import url(themes.css);/*主题样式*/
我们把所有的样式都通过他进行链接起来，我们在网页中只需要插入
<link href="css/css.css" rel="stylesheet" type="text/css" />就可以了。

    到此位置样式写完了，别忘了写样式的时候要养成添加注释的好习惯，这很重要哦！~~~为以后修改节省不少时间啊……

 原创壁纸

    多为1600×1200 Aeiko.net MoodFlow End Effect DJ-Designs Bitaites.org
    Wooden Fish ocksoff.co.uk Plog 壁纸 Digital Blasphemy
    多为1280×1024 Neon Sight Japan Souldcore
    多为1024×768 Wallpaper Joe
    超高分辨率 VladStudio.com GypySpaceMuffin RealityDreamShip
    各种分辨率 Hebus.com PimpMyDesk Klowner’s 壁纸

    多种类别

    超高分辨率 InterfaceList MacDesktops Wallpaper Stock Pixelgirl Presents Quality 壁纸
    多为 1152×864 Balta.ikk.sztaki.hu
    各种分辨率 Looroll DeviantArt Shadowness Free Wallpaper Free Digital Wallpaper
    多为1024×768 Mapa.co.kr GetSkinned Groovy Screens

    大量壁纸

    多为1600×1200 Shifted Reality
    高分辨率 Wikipedia Club VAIO WinModify.com
    各种分辨率 ThemeXP Webshots CrystakXP KDE-Look.org Customize.org WinCustomize.com

    汽车壁纸

    Streat Dream 多为1280×960
    NetCarShow 多为1600×1200
    Exotic 汽车壁纸 超高分辨率
    Desktop Machine 汽车、美女、影视等, 超高分辨率

    其他分类壁纸

    3couleurs firefox 壁纸, 多为1600×1200
    9x Media 多显示器用, 高分辨率
    BellaDonna 美女壁纸, high 分辨率
    Desktop Girls 美女壁纸, high 分辨率
    Brodyaga 欧洲城市 壁纸, 多为1024×768
    WStaylor.net windows 壁纸, 各种分辨率
    Gamer 壁纸 游戏壁纸, 超高分辨率
    Michael Swanson’s Blog 多为鲜花, 超高分辨率
    Arkhipov.com vista, 鲜花壁纸, 超高分辨率

NO.1    Social Wallpapering

Web2.0是一个热门话题,给我们带来的也是全新的体验,它可以让我们自由的去评选自己喜欢的东西,投票,评论,沉沦等等,对是对于网站内喜欢的东西可以做出自己喜欢的方式.进入该网站,你可以先粗略的浏览网站为你推选的图片,然后你可以根据你个人的喜好,选择format - standard(标准规格)、widescreen(大尺寸)等等.进入之后,展示给你的图片会以最近更新或者评价最高的.

推荐理由: 自由度高,符合web2.0大众口味,流行布局.

NO.2   Foto Community

看域名也可以猜测,也是一个交流站点,令人惊讶的是,它的图片库是惊人的,有成千上万高质量的墙纸供你选择.最大的优点是,该站分类相当详细,如果你需要找一些你有目的的图片,这里比较方便.你可以投票或者评论,这些操作都是要注册的,当然,注册照样可以下载墙纸.

推荐理由:查找分类图片方便,界面清晰.

NO.3    Wallpapr

也是一个web2.0网站,这次这个网站的展现就不是那么直接了,因为它是一个墙纸搜索引擎,非常容易上手,写上几个关键词,然后选择你要展示图片的张数,20.40.100都可以.

推荐理由:搜索直接方便,找你所找.

NO.4     Customize

呵呵,真是一个不错的网站,它的亲和度出奇的显著,它没有文字的分类,基于颜色的选择,,来随机的为你推荐高质量的墙纸,当然,TAG也可以供你选择分类.相信ken在挖酷的选择.

推荐理由:根据颜色来选择你喜好的墙纸.

NO.5    devianART

在国外是老牌的墙纸网站,根据统计,该站大约有50,000,000图片分类的提供给你.换一句话说,这里没有你找不到的墙纸图片,方便的分类菜单为你的查找和浏览提供了很大的方便.比如艺术图片相当多哦.

推荐理由:这里没有你找不到的图片.

NO.6    N.Design Studio

说实话,比起上面介绍的网站,它没有太多的贮存量,但是,它至少有一个很好的优点,就为你提供一些高质量的卡通墙纸,绚丽和夺目.

推荐理由:专业精选设计

NO.7     Pixelgirl Presents

这是为女孩而存在的,很多可爱的图象墙纸,这里远离战争,远离暴力和军事,这里是可爱的田地.

推荐理由:大量可爱适合女孩的墙纸.

NO.8    Desktography

象一个图片陈列馆,很好的浏览方式,基于flash的展示,提供ZIP格式给你下载,很不错.

推荐理由:展示特别,感觉不错.

NO.9     Veer 

 每张墙纸都是单独的设计,独一无二,分类详细,需要注册才能下载.最爽的就是,它可以有8种格式大小让你选择,其中还包括IPHONE的墙纸.

推荐理由:8种大小选择.

NO.10    Vladstudio

大约有450张数字墙纸提供,造像抽象独特,交互式分类,跟以前的挖酷一样.

国外8大高清桌面壁纸网站

1、Professional Wallpaper

这是一个超级专业，无比敬业的壁纸网站。每一款壁纸都提供了宽屏16:10、普通屏4:3和5:4、HDTV16:9、双屏以及PSP和iPod不 同规格的高清壁纸。如果你想一次性更换你所有电子设备的壁纸，Professional Wallpaper是再好不过的选择了。该网站提供标签式分类，在首页的中下部你可以看到这些标签。

点击这里进入Professional Wallpaper>>

2、interfaceLIFT

知道你不仅仅需要一款精美的高清壁纸，那么在interfaceLIFT你除了可以下载到与Professional Wallpaper同样规格齐全的壁纸外这里还有一些相当不错的icon、Mac和Windows主题。当面做得广的时候，深度便变得浅了。在 interfaceLIFT你会发现很多精美的壁纸，但是不如Professional Wallpaper丰富。尽管如此，interfaceLIFT还是相当不错的！

点击这里进入interfaceLIFT>>

3、Steve Truett

如果你喜欢电子乐或者是数位建筑，抑或者你对示波器很感兴趣，那么这个壁纸网站非常适合你。很抽象的壁纸，同样提供不同规格下载。壁纸都很精美，绝不是为了充数的哦。

点击这里进入Steve Truett>>

4、mandolux

这是一个杂志化的壁纸网站，每周提供不同规格高品质的壁纸。mandolux所提供的壁纸质量都非常高，每一款都不容错过。如果你喜欢该站提供的壁 纸，你可以和Chada一样，订阅他们的RSS，这样你可以收到他们所提供壁纸的最新消息。如果需要得到他们之前的壁纸，你可以在存档页 [Archives]找到。mandolux提供的壁纸并不丰富，但是每一款都值得收藏。

点击这里进入mandolux>>

5、Jurko.net

相对于上面介绍的几个壁纸网站来说，Jurko显得有点简单，因为这个壁纸网站只提供宽屏和PDA壁纸下载。Jurko所提供的壁纸纷繁复杂，什么都有。相信你可以在这里淘到自己喜欢的。

6、Graffiti Wallpaper

建立于2004年一家老牌壁纸网站，所有壁纸都收集自互联网。比较值得一提的是，该站站长在每张壁纸下方都标注了壁纸的原作者。这是国内那些壁纸网站所没有做到的。历史的积淀，你可以看到这里的壁纸分类非常清晰明朗。慢慢淘。

点击这里进入Graffiti Wallpaper>>

7+8：这两个壁纸网站Chada曾经介绍过

7、Social Wallpapering:壁纸沉浮你做主>>

8、WallPaterMaker.NET:在线设计专属壁纸>>

50+国外壁纸下载网站

Randomwalls - 高清宽屏壁纸下载网站

30+ 国外桌面高清壁纸网站

10+Windows 7高清桌面壁纸下载

InterfaceLIFT - 支持多种设备的壁纸下载站

20张超酷的高清汽车桌面壁纸

13个HDR壁纸免费下载网站

90张全格式超高清桌面壁纸下载

8张保护眼睛的桌面壁纸

10+手机壁纸下载网站

1. jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTML Documents、CSS、Events、实现动画效果，并且方便地为网站提供AJAX交互；
2. jQuery文档说明很齐全，网上有各种语言版本，给学习者带来了极大的方便；
3. 成熟的插件比较多，当你掌握了一定的jQuery基础后，就可以利用大量的插件来设计你的页面，提高了设计的效率；
4. 兼容各种浏览器，比如IE、Firefox、Opera等等；
5. 兼容CSS2和CSS3等；
6. 实现了代码与html页面的分离，给维护工作带来了极大的方便；
7. 易学易用。比如其选择器的使用和对事件的处理，都很符合人的设计思维习惯。

jQuery学习文档推荐：

1. http://jquery.bassistance.de/api-browser/#attrMap（English）
2. http://jquery.org.cn/api/cn/api_11.xml（中文）
3. http://shawphy.com（中文）
4. http://jquery.org.cn/visual/cn/index.xml（中文）

【转载说明：本文来自很实用网站www.henshiyong.com】

jQuery相关网站：

1. http://jquery.com（jQuery官方网站）
2. http://jquery.org.cn（jQuery中文社区）

★2个图标搜索引擎

1. iconfinder:提供的图标搜索比较有特色，提供128×128的大图预览，也可以直接下载。它还提供标签云，你可以直接从标签中直接查找相关图标文件。
2. iconlet:也是一款专门的图标>搜索引擎，没有大图显示，没有标签云，完全一个垂直的搜索引擎。相比iconfinder而言，它的搜索结果要丰富许多，提供的图标尺寸大多是16x16像素的。

★39个ICON图标下载网站

这里就不一一介绍了，这些网站大体提供了免费和收费两种，我这里只列出他们免费的地址，你可以点开后看图下载。

1. watiworks
2. towofu
3. newformula
4. graphicpush
5. FastIcon
6. feedicons
7. favicon2dots
8. ColorCons
9. freeiconsweb
10. bittbox
11. designmagus
12. Ganato
13. iconicon
14. iconaholic
15. iconbuffet
16. iconbulk
17. Tango
18. dreamplay
19. iconizer
20. icon-king
21. icon-sammlungen
22. IconArchive
23. smashingmagazine
24. deviantArt
25. herjern
26. silvestre
27. sweetie
28. YellowIcon
29. ValentinaOlini
30. vikiworks
31. VistaIcons
32. wbchug
33. webfruits
34. Xi4Dox
35. userinterfaceicons
36. Flags
37. tucoo
38. cnzz
39. sucaicool

★4个手工在线制作ICO图标的网站

1. favicon：在线制作，不需要注册。
2. Online Icon Maker：通过上传图片制作ico和icon图标，另有图库备用。
3. FavIcon：可以制作透明效果的ico图标，也是通过上传图片来进行转换。
4. Favicon Editor:通过上传图片转换ICO图标。

【转载说明：本文来自很实用网站www.henshiyong.com】