一、技术总结
1、公共样式的设定
在开始项目之前，我们可以先大体了解一下项目中每个页面的内容，比如字体样式，段落结构，文字大小等。我们可以针对这些内容来设定一个固定的样式文件。在开发中 就可以直接引入此文件，而无需再重复敲CSS代码。
/*基本样式*/ * { margin:0; padding:0; } body { font-family: "微软雅黑"; } .clear { /*清除两边浮动*/ clear: both; } .fl { /*清除左浮动*/ float: left; } .fr { /*清除右浮动*/ float: rightright; } a { /*去掉链接的默认下划线*/ text-decoration: none; } li { /*去掉列表默认样式*/ list-style: none; }需要用到时就直接在类名后加上所要用到的类名即可：
<div html' target='_blank'>class="div01 lf"></div> <div class="div02 clear"></div>
2、整体布局
开发项目过程时，若事前先将每一页的框架搭建好，而后期就只需把具体内容填充进去就可以了。而我就习惯用以下框架来实现页面整体布局：
<body> <div id="header"></div><!--页面顶部内容--> <div id="nav"></div><!--导航部分--> <div id="content"></div><!--页面中间内容--> <div id="footer"></div><!--页面底部--> </body>
一般来说，设定好页面大体框架后，剩下的就直接一块一块地填充进去就方便些了，这样开发起来思路也比较清晰。当然还要设定相应的CSS样式，但这个要视项目的具体 要求来做。
3、切图要素
当大体布局弄好后，接下来应该就是从切图开始入手了，虽然没有太多技术性的操作，但也有些要注意的地方。比如在切图中，要特别注意的是尺寸。虽然有些是比较细微 的部分，需要耐心处理。因为细节性的问题往往也会导致结果的不同。其实不要认为差不多就可以了，有时候差一点就是差一点，当效果不尽人意的时候，到头来还是得再去花时间去修改。再者，在保存切图时，由于会自动生成一个images文件，所以我们不用再自己新建目录，或者也不用进入到某个目录中，不然它还是会在相应的位置出现images这个文件夹。
4、命名、代码书写规范
规范的命名有助于提高代码可读性。在网上也有挺多相关的规范，在这里我也简单罗列几点：
（1）、直观命名
当在设计Web页面以及需要对一个div进行标识的时候，最自然的想法就是使用可以描述元素所在页面位置的词汇来对其命名。
例如： top-panel
horizontal-nav
left-side
（2）、结构化命名
例如： main-nav
subnav
（3）、基于成员的命名规范
基于成员的命名规范是指按照文件,文件夹的从属关系,通过归类的方法进行命名,这样可以使文件的排列具有较强的逻辑性.
例如:一个图片文件是在鼠标点击之前为"file_on".而在点击后的图片文件命名为"file_off"根据这个类别命名.更加的清晰.
5、学会制作“雪碧图”
在项目开发中少不了会加入许多小图标，小图片。若一张张切下来后保存起来后，使用起来也比较麻烦，加之所占内存也大，如此一来页面加载速度就慢了许多。这可不是 什么好事，大大降低了用户体验度。所以，我们可以事先把小图片切下来放在同一张页面，到时候开发时就只需要把这张图片引入即可。然后再跟进情况调整背景图片的位 置，利用background-position这个属性可以设置。
6、知识点的清晰
在做项目时，我由于对某些知识点不够熟悉，不能熟练运用，所以导致开发速度慢。当我们熟练掌握了一个知识点后，是可以快速地写出代码实现相应的效果。在这个项目开发过程中，我主要是对以下知识点不够熟悉：
（1）、关系选择符的使用
（2）、伪类选择符的使用
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。
新闻热点
疑难解答
