—— 画大象

        对于百度空间css代码的菜鸟，各种网上的教程已经足够。在此特别推荐微雨心情与玩转百度空间编写的系列css教程《百度空间技术手册》 等，很简单也很实用。

　　如果你已经熟悉各种雕虫小技，并且想把代码写的更专业，那么建议你仔细阅读css速查手册及css手册简编。最好把每个不清楚的参数都试练一遍。这里最难掌握就是margin与padding，能把这两个参数用好的人并不多。

 　　做到了上面两点，你基本上算个css老鸟了。现在，唯一羁绊你的就是百度空间的css布局。下图给出一个大体的首页框架，细节部分可参考我的css模板注释（前前后后花了1个月时间整理验证，至少能节省你一周的时间）。

　　如果这些资料都满足不了你的需求，那你一定能用到我秘密研制的这个“终极技巧”。之所以叫“终极技巧”，是因为没有比它再强的方法了。那就是——看网页源码！ 

　　以百度新添加的“最新访问模块”为例。打开网页源代码，搜索“最近访客”关键字。会发现下面这段代码：

<DIV class=modhead><SPAN class=modtit>最近访客</SPAN></DIV></TD> 
<TD class=modtc noWrap align=right></TD> 
<TD class=modtr width=7>&nbsp;</TD></TR></TBODY></TABLE> 
<DIV class=modbox id=m_track> 
<TABLE width="100%"> 
<TBODY> 
<TR> 
<TD vAlign=bottom align=middle><A href="/daxiaguojing" target=_blank><IMG src="http://himg.baidu.com/sys/portraitn/item/21d1646178696167756f6a696e673101.jpg" border=0><BR>daxiaguojing </A></TD> 
<TD vAlign=bottom align=middle><A href="/xinhaitg" target=_blank><IMG src="http://himg.baidu.com/sys/portraitn/item/15bcc0b4d7d4b4f3baa3b5c4d3e374670501.jpg" border=0><BR>来自大海的鱼tg </A></TD></TR> 
<TR> 
...

　　看到“id=m_track”了么，我可以负责任的说，这个就是访客区域的入口！以后凡是找到“id=xxxxxx”的代码。你都可以在css中用“#xxxxxx{}”的方法调用。如果不确定，可以用background测试下。

　　再往下找，发现<TABLE>表格标记，我用大腿猜出来这是访客区域中4行2列的访客名单。再往下看就是我们最熟悉的<A>和<IMG>标记。其中，<A>代表超链接，<IMG>代表图片。下面就是排列组合的游戏了。 

　　最近访客区域
　　#m_track{}  /*最近访客*/ 
　　#m_track a{}  /*文字链接*/ 
　　#m_track a:hover{}  /*文字悬停效果*/ 
　　#m_track a img{}  /*头像图片链接*/ 
　　#m_track a:hover img{}  /*图片悬停效果*/ 

　　理论上呢，前面的<DIV >、<TABLE>、<TBODY>、<TR> 、<TD>标记你都可以用，就是长了点。例如：

　　#m_track div.table.tbody.tr.td a:hover img{} /*访客区域的 子区域的 表格中的 表格主体中的 第一行的 第一列的 图片链接的 悬停效果*/

　　这里写得越长，指示的位置也就越具体。当然了，你要不怕麻烦尽管写。有了这个技术，就能精确定义模板的每个小细节。称之为“终极技巧”不为过吧 ^^

p.s. 很早就想写一篇技术文章，把我这3个月的经验与大家分享。苦于百度高手如林，我这点东西实在拿出手。更重要的是，设计中技巧往往是次要因素，创意与美学才是正根。

微雨心情 温馨提示：更多内容请点击《百度空间技术手册》