最近很多朋友问我如何设计百度空间。这已经是个不太好回答的问题，因为有很多人会做图。但不会做CSS代码。所以他们不得已展示不了自己的优秀创意。
百度空间虽然扩展性强，速度快，换风格方便。但在自定义风格上仍然不够人性化。特别是一些刚入门的人来说。像我这种专业的CSS架构师看起来都觉得复杂。更不必说普通的用户，所幸的是百度中还是有很多人在学习和制作风格。
现在我在这里介绍一种更快的风格制作方法。
我把一些CSS，进行了删减。
　　代码如下：

/*欢迎访问永远为您提供好模板的OW个人主站:http://www.3000s.net*/
body{ margin:0px; border:0px; padding:0px;color:#666;/*文本颜色*/ line-height:22px;}
/*菜单*/#tab{left:50px; top:269px;}
#tab a:link,#tab a:visited{ height:47px; line-height:47px;}
#tab a:hover{}
#tab a.on,#tab a.on:link,#tab a.on:visited,#tab a.on:hover{ background:url(http://3000s.net/ow/images/ow22/images/tab_on.gif) center top no-repeat; width:78px;height:47px; text-align:center;}
#tab span{ display:none!important;}
#tab2 a,#tab2 a:link,#tab2 a:visited{color:#0000ff; font-size:12px}
/*布局*/
body{background:url(http://3000s.net/ow/images/ow22/images/bg.gif) center top;}
#header div.tit,#header div.tit a.titlink,#header div.tit a.titlink:visited{ left:40px; top:80px; font-size:18px;}
#header div.desc{left:70px; top:110px; width:285px;}
#header{ text-align:left;height:324px;background:url(http://3000s.net/ow/images/ow22/images/top.gif) center;}
.stage {margin:auto;background:url(http://3000s.net/ow/images/ow22/images/bottom.gif) center bottom no-repeat; padding:0px 0px 30px 0px;}
#main{background:url(http://3000s.net/ow/images/ow22/images/main.gif) center top; width:780!important;margin:auto;padding:0px!important;text-align:center;}
#layout{ width:760!important; margin:auto;text-align:left; text-align:left;}
.stagepad{ width:740!important; margin:auto;text-align:left;}
/*模块*/
.mod {margin:5px 0px 5px 0px;}
.modth{}.modopt{padding:0px 4px 0 0}.modtit{}a.modtit,a.modtit:visited{}a.modtitlink,a.modtitlink:visited{}.modact{}
.modbox{ background:#fff; border-left:1px solid #BBB794;border-right:1px solid #BBB794; padding:5px;}
#m_blog div.line{margin-top:5px;line-height:17px;border-top:1px dashed #CBC7AA}/*文章与文章之间的分割虚线*/
/*模块的6个小图*/
.modtl{ width:29px; height:66px;background:url(http://3000s.net/ow/images/ow22/images/modtl.gif) no-repeat bottom left; }
.modtc{background:url(http://3000s.net/ow/images/ow22/images/modtc.gif) repeat-x bottom left;line-height:66px}
.modtr{ width:29px; height:66px;background:url(http://3000s.net/ow/images/ow22/images/modtr.gif) no-repeat bottom right; }
.modbl{ width:20px; height:17px;background:url(http://3000s.net/ow/images/ow22/images/modbl.gif) no-repeat top left;}
.modbc{background:url(http://3000s.net/ow/images/ow22/images/modbc.gif) repeat-x top left;}
.modbr{ width:20px; height:17px;background:url(http://3000s.net/ow/images/ow22/images/modbr.gif) no-repeat top right;}
/*统一链接颜色*/
a:link,a:visited{ color:#5E5834!important; text-decoration:none;}
a:hover{ color:#9F986D!important; text-decoration:underline;}

#m_links div.item{background:url(http://3000s.net/ow/images/ow19/images/li01.gif) 1px 5px no-repeat; }/*这是友情链接的小图标*/
#m_comment div.item{padding-left:20px; background:url(http://3000s.net/ow/images/ow19/images/li02.gif) 0px 5px no-repeat; }
#mod_board div.item{background:url(http://3000s.net/ow/images/ow19/images/li04.gif) 0px 3px no-repeat;}
/*以上为OW设计的精简CSS代码*/

这个ＣＳＳ最大的特点是代码短。之所以这样做是因为我们设计的很多模板并不需要每个模块都进行设置，而只需要做一个统一的规划就行。上面的代码就是这个统一规划的代码，基本上这些代码就可以满足大部分ＣＳＳ设计者的需求了。当你需要调整局部的模块样式时，仍然可以用早期的ＣＳＳ代码。只要拷贝在我那些代码的最后面就行了。那些代码我将在文头章的最后面贴出来让大家参考。

说明一下上面的代码的用法。
在这里，我分成了几个大块：布局、模块、菜单、统一链接颜色

而做空间的时候最开始的一般都是从布局开始。控制布局的也就是。头#header，身体#main,.stage.#stagepad,#layout，定义文字大小，颜色什么的，然后到每个小模块。
百度空间最初始的代码并没有告诉大家有#main和#stagepad和#layout.不过在百度空间的源代码中是可以找到这些id的。当然还有一些其它的id，

百度空间结构示意图。

如果你设计的模板是居中的。只要把我的这个代码作一下修改。背景图地址。宽度。高度进行设置就行。
如果你的布局是居左显示只要把margin:auto改成float:left，想要居右就改成float:right
如果你的是全屏的，请把#main改成全屏大小。

#layout为首页的表格和博客页面的表格。其中博客页面的TD名称和首页的TD名称是不一样的。不一样的布局，TD的名字也不同。这里就不探讨这个问题。
#stagepad:这个是在内容页，相册页，还有个人文档页里用到的DIV。用它来控制内容最好了 。
一般可以不定义stage的宽度。如果你想让用户没办法自己修改背景图，可以把stage的background背景后面加个!important，如：background:url(picture.gif)!important;这样用户传什么作为背景图都会无效。

模块的6小图就是设计模块用的、顶上的modth是标题模块。可以在这里定义背景作为这个模块的标题。

#m_links div.item{background#eeeeee; }
#m_links div.item a/*友情链接名的大小颜色,未被点击 */{}
#m_links div.item a:visited/*友情链接名的大小颜色,已被点击*/{}
#m_links div.line/*友情链接见的分隔符的相关设置 */{}

上面这个友情链接的模块，如果你想单独定义这个标题目。你只要这样设置就行：
#mod_links .modth{background:url(http://3000s.net/ow/images/ow19/images/links.gif) no-repeat;}
上面就是这个友情链接的标题背景了。
你也可以设置这个友情链接的文字变为不可显示，如： #mod_links .modtit{ display:none;}

我们会发现很多模块都是这样设计的。
最新评论，留言等，都会用到 .item .cnt
.item就是这个链接的名称，是一个带链接的。
.desc是它的说明，或者评论的内容截取，也是带链接的。你也可以把它的图标统一。

下面就把所有的名字列一下表：

/*文章列表*/
#mod_bloglist
/*友情链接*/
#mod_links
/*文章分类*/
#mod_artclg
/*网友评论*/
#mod_comment
/*收藏*/
#mod_cang
/*日历*/
#mod_cals
/*相册列表*/
#mod_albumlist
/*最近读者*/
#mod_track
/*个人档案区域*/
#mod_pro
/*留言版*/
#mod_board
/*好友最新文章模块*/
#mod_friblog
/*其它*/
#comm_info
/*音乐*/
#mod_bgmusic
/*搜索*/
#mod_search
/*rss*/
#mod_rss
/*文章存档*/
#mod_filed