走，我们去看灰机！
评论关闭 | Read More...
关于页面整合中遇到的若干问题
最近，对一个新项目的所有页面进行了最后的调整和优化，中间发现了许多问题，在此总结一二，供大家参考指正：
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：
显示效果：
从点点、tumblr的差异浅谈用户体验
最近，在网上遇到点点的广告，有种在地铁遇到58的感觉–走哪都能碰见。点点如此火爆不是没有理由，比起微博点点一次能发更多的文字、图片，侧重点更倾向兴趣分类，不论摄影、美食、电影。。。每个人都能找到自己兴趣的集中营，获得最新的信息。“投稿”是一大利器，某些备受关注的帐号其实自己不发东西，全靠征集，在刚注册谁都不认识的环境里，给这些热门的帐号投稿，就能换来百人以上的好评，在这个浮躁、自我膨胀的时代，确实是满足虚荣心的捷径。
偶然间在国外网站发现了点点的“原版”，之前2者长相上近似克隆，最近点点才把风格换了，有种表兄弟的感觉。在把2者进行比较后发现了一些有趣的事情，在这里分享下，欢迎拍砖。
