很多开发者在编写Xhtml和css习惯使用类似于960GS、Blueprint等框架，尽管这些框架确实在一定程度上节省了编写代码的时间，提高了工作效率，不过这些框架可能无法适应你的每一个项目。
在使用这些框架时，你要改写它们的代码，以便和自己的代码搭配，或者改变自己的代码。也有可能会删除一些不相关的代码。这样总总都导致了代码不够整洁干净。但是事实上，框架确实节省了很多时间，所以为何不根据自己的需要做一个属于自己的Xhtml&Css框架？本教程就讲解如何自定义符合自己要求的框架。
1.Xhtml头部（header）文件
编写自己Xhtml&css最好的时候就在你想建设一个新网站的时候，花点额外时间把它们保存成框架。
一般而言，编写新站点的Xhtml会从头部文件开始，我们要编写一个能够适应90%的网站的Xhtml头部文件，一般而言包括head、logo和网站的容器（container）。试看下面的代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Title</title> <meta name="description" content="" /> <meta name="keywords" content="" /> <link rel="stylesheet" href="main.css" /> </head> <body> <div id="container"> <div id="header"><a title="" href="index.php"><img src="images/logo.jpg" alt="" /></a></div> <ul id="nav"> <li><a class="home active" title="" href="index.php"></a></li> </ul>
从上面可以看到，这些代码包含了大多数站点头部会用到的标签，同时将可能会变动的内容留空。这样下次再建设新的网站时，就能够很快完成xhtml头部的工作。
当然编写自己的Xhtml和Css框架要尽可能符合自己的需求，所以上面的代码只是仅供参考而已。
2.Xhtml尾部（footer）文件
Xhtml尾部文件的设置思想和头部一样，尽可能满足大多数网站的需求，这里尾部文件的编写要相对简单一些，请看下面代码：
<div id="footer"></div> </div> </body> </html>
你可以看到，这是一个简单的尾部代码，当然你也可以根据自己的需要，制作比如侧边栏（sidebar）等文件，总之要根据自己的日常工作来编写相应代码。
3.css文件
编写一个符合自己需求的css框架文件，在建设网站时也是一个好的开端。一般而言，我喜欢让自己的CSS框架包含一个CSS Reset和一些基本的样式结构，字体排版等。同时我也会把几个常用页面预先划出几个区域，需要编写时，直接写入相关区域。试看下面的CSS代码：
/*****CSS RESET*******/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } :focus { outline: 0; } ins { text-decoration: none; } del { text-decoration: line-through; } table { border-collapse: collapse; border-spacing: 0; } /****BODY STYLES********/ body { font-family: Arial; font-size: 14px; color: #3A454F; background: url('images/bkgHome.jpg') repeat-x #FFF top; } p { line-height: 17px; } h1 { font-size: 30px; } #container { margin: 0 auto; width: 800px; } /****HEADER STYLES*******/ /*****NAV STYLES*******/ /*****FOOTER STYLES*******/ /*****HOME CONTENT STYLES*******/ /*****SUB CONTENT STYLES*******/
注意在上面的CSS文件中，我设置了一些比较基本的样式，但是不能编写太多代码，代码越多就意味着很难适用于多数网站，所以编写这些CSS框架文件时，思考一下哪些代码是很多网站都会用到的或者你自己工作中经常用到的。
4.编写多个框架文件
目前我们所编写的Xhml和CSS框架是适用于创建一个静态的站点，但是很多时候我们要建设一些动态网站，比如我们经常会用到Wordpress来建设博客，或者编写一个新的Wordpress主题，因此，根据自己的工作需求，也可以做一个wordpress下的框架。
通常来讲，一个符合我自己需求的wordpress框架是一个包含几个文件和必须的Loops的空白主题，用我们上面编写的静态框架结合wordpress内置的函数，我们可以很快地创建自己wordpress框架。这个方法同样适用于其他的CMS。
5.总结
使用别人的框架最大的缺点在于要花一些时间去改动代码以便适合自己的需求，因此编写一些符合自己需要的框架显得很有必要。
不同阶段，通常会建设一些不同的网站，所以可以隔一段时间修改一下你的框架，并保存成另一个框架爱，最后你有很多框架可以适应不同的建站需求，极大地节省了时间。