全部博文（372）
2012年（372）
分类： 虚拟化
2012-04-11 16:31:14
来公司的前三个月，我所做的事情最多的是重构与切图。
其实到现在为止，所做的事情最多的依然是重构、切图、外加写整个站点的js脚本。
对标签的理解：
下面给出一段小页面，在无样式的情况下，依然可以正常显示。
在这样的一段无样式的结构中，整个页面依然可以得到很好的反馈。有标题，有内容。这应该就是所谓的语义化标签吧。在这里需要解释一下，为什么要用语 义话的标签呢？其实第一是方便人的开发，当第一次拿到这个页面的时候，看了一眼结构，就会明白，喔，原来
【我推荐一本书，可以当工具书来查阅。《HTML权威指南第三版》】
对样式的理解：
对于样式，我个人比较借鉴YUI的挂钩组合模式，下面是具体的代码。
.ft14{font-size:14px;}.wd200{width:200px;}.mt30{margin-top:30px;}
也许有的同学要问了，这样挂钩组合的模式，那不是增加整个HTML页面的文件大小么。其实这种模式的写法，可以考虑到组件的应用。一个静态页面中所要显示的内容，可以划分为几个组件，方便于重复使用。样式分化的细致，也是方便于维护。
另外对于CSS Sprites技术的使用，需要考虑到具体项目的大小、时间的安排。具体例子如下：
.link, .links{background:url('合并的图片');}【加载图片的样式需要组合在所需要此背景图片的节点中。】
.le1{background-position:0px;}
.le2{background-position:20px 40px;}【此样式为具体定位样式】
CSS Sprites技术有好处也有坏处，所以具体的安排依然要看情况而定。
【我推荐一本书，可以当工具书来查阅。《CSS权威指南第三版》】
CSS3在实际开发中，如果自己的项目只面向IE6 IE8用户，或者说火狐低版本用户，则完全不予考虑。当然，现阶段CSS3使用最多的就是圆角、阴影、文字阴影、滑动等。我自己比较喜欢使用CSS3，来 渲染页面，达到一些比较好的效果与用户体验。【可以买《CSS3权威指南》，这本书可以当工具书来看】。
实际开发中，我们最大的工程量就是在兼容各种游览器，所以对游览器兼容，以及各种游览器的特性也要有所了解。
.le{_width:20px;} //ie6可识别
.le{*width:20px;} //ie7可识别
.le{width:20px\9;} //ie8可识别
*+html .le{width:20px;} //ie7 ie8可识别
/-------------------------------------
//微软官方提供的API，专门用于兼容IE系列游览器
以此类推
--------------------------------------/
.le{-moz-width:20px;} //此火狐识别
//--google and apple--//
@media screen and (-webkit-min-device-pixel-ratio:0) {
.school{margin-top:0px;}
}
优先级的问题，应该从最标准的开始写起。
还有一些需要注意的地方，比如float:left;margin-left:20px;在ie6中是双倍的，需要display:inline;在写内模块时，最好使用padding属性。外模块时用margin属性。
PNG透明的问题：
在ie6中png透明，我使用的是DD_belatedPNG，下载地址：
它的作用是对背景图片的处理，代码如下：
对于img标签的透明，可以使用JQuery.ifixpng，下载地址：p
它的作用比较广，但是我只处理img标签中的Png图片。网站中，有详细的帮助文档，告诉大家如何使用它。
此外我有时候也会使用第三种方式，微软自己的API滤镜，它的使用方式如下：
.le{
background-image: url(../style/img/Signin/apple/appleLeft.png)!important;
background-repeat: no-repeat;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='');
_ background-image: none;
}
实际项目开发时，还需要注意命名规则，模块化开发，公共组件等等问题，其实这些经验性的开发流程，可以看一本书，基本都有详细的介绍这些开发模式。
【推荐《高质量编写代码》与《高性能网站建设指南》】。
