关于页面整合中遇到的若干问题

最近，对一个新项目的所有页面进行了最后的调整和优化，中间发现了许多问题，在此总结一二，供大家参考指正：

1、HTML标签和属性和属性的语义化。语义化一个是对搜索引擎友好，容易被抓取，这个大家都比较了解；还有一个是标签的语义化对项目建设中人员之间的合作也有很大的帮助，比方说<h1>—<h5> 这是作为标题使用的，在一个项目中，如果有一个统一的规范，哪些地方用h1，哪些地方用h2，h1的css样式是怎样的，这样在在以后页面整合和代码优化的时候，既能让整合人员或者新员工很快的熟悉代码，也能增加css样式的重复使用率，减少代码量。
标签的具体语义，请参考w3cschool里面的xhtml1.0手册：http://www.w3cschool.cn/index-54.html

2、CSS的定义与重复使用。Css命名规范在网上有很多标准，比方头部head、导航nav、底部 footer等，日常使用中基本上也都在这样使用，所以标准没有一个特别统一的，基本上都是以英文的方式main-content或mainContent。在定义样式时，最好使用单独定义样式，
比如，
<div class=”content”>
<div class=”main-content”></div>
<div class=”side-content”></div>
</div>

单独定义样式：.content{width:960px;}
.main-content{width:650px;float:left;}
.side-content{width:300px;float:right;}

而有人习惯使用：.content .main-content{width:650px;float:left;}
.content .side-content{width:300px;float:right;}

单独定义样式的方法可以提高css样式的重复使用率、减少代码量。上面这个例子可能显示不出来单独定义的好处，但是当你嵌套好多标签后，效果就显而易见了。

3、背景图片与页内图片 。背景图片在这是通过css样式定义background的图片，页内图片是使用html中img标签。什么时候使用背景图片，什么使用页内图片？

我的总结是，需要包含有用信息的，与后台数据有关的图片（如产品图片、用户头像、用户等级等）都以页内图片img显示；
不需要包含有用信息的，与后台数据无关的（如背景、图标、按钮等）则需要通过css样式定义background实现，最好使用Css Sprites整合。

原因呢，语义化的充分体现。

4、圆角按钮使用技巧。使用圆角按钮是，如果设置鼠标划过效果的话，背景需要变化，当圆角按钮字数不固定时，应该这样操作：

结构：
<a><span>短按钮</span></a>
<a><span>长按钮长按钮</span></a>

css：
a{float:left;background:url(bg.gif) no-repeat left top;height:28px;overflow:hidden;}
a span{float:left;margin-left:5px; background:url(bg.gif) no-repeat right top;line-height:28px;padding-right:5px;text-align:center;overflow:hidden; cursor:pointer;}
a:hover{background-position:0px -28px;}
a:hover span{background-position:right -28px;color:#df6e37;}
图片bg.gif：（如图片图片bg.gif）
显示效果：（如图片显示效果.gif）

转载自：http://ued.iciba.com/?p=1019