好几天没更新博客了，刚实战完一个HTML+CSS的简单项目。经过几天的摸索，发现收益良多。之前只是单纯得写demo，看知识点，没有亲自实战项目。但实战过后才会了解，如何才能更好地提升自己的技术。针对这次项目开发，我总结了以下内容：
一、技术总结
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 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）、结构化命名
例如：