ibm.com/developerworks博文页面风格的csdn博文制作

ibm.com/developerworks博文页面风格的csdn博文制作

写ibm.com/developerworks风格的博客

说明

文章题目

副标题

标题后的分割线

目录

一级目录

二级目录

三级目录

正文分割线

子标题

普通段落

小节的分割线

回页首链接

说明

ibm.com/developerworks博文页面风格的csdn博文制作个人觉得ibm.com/developerworks文章的风格很好，简洁明了不枯燥，看上去就是专业类型的。发现有两个风格，如这两个页面：http://www.ibm.com/developerworks/cn/opensource/os-ast/index.html 和http://www.ibm.com/developerworks/cn/linux/theme/cim/ 。两个各有优缺点，我试着将他们统一一下，最后的页面效果如http://blog.youkuaiyun.com/yanfabin/archive/2009/12/17/5025375.aspx ，呵呵自我感觉不错。

没有写内部样式表，把样式都写到html标签里了，代码丑了些～

回页首

文章题目

<p style="margin-top: 0px; margin-bottom: 0px; padding-bottom: 8px; line-height: 19px; padding-top: 5px;" mce_style="margin-top: 0px; margin-bottom: 0px; padding-bottom: 8px; line-height: 19px; padding-top: 5px;"> <a name="pageTop"></a> <span style="font-weight: bold; font-size: 18px; font-family: Arial, sans-serif;" mce_style="font-weight: bold; font-size: 18px; font-family: Arial, sans-serif;">文章标题</span> </p>

回页首

副标题

<p> <em>副标题或者文章出处</em> </p>

回页首

标题后的分割线

<div> <img src="https://i-blog.csdnimg.cn/blog_migrate/aa275807bcab6d823b647cea2889304f.gif" mce_src="https://i-blog.csdnimg.cn/blog_migrate/aa275807bcab6d823b647cea2889304f.gif" alt="" width="100%" height="4" /> </div>

回页首

目录

目录分级，可以分为一级、二级、三级目录。

一级目录

<div style="display: block; padding: 0px; margin: 5px 0px;" mce_style="display: block; padding: 0px; margin: 5px 0px;"> <div style="display: block; float: left; width: 16px; height: 16px;"><img src="https://i-blog.csdnimg.cn/blog_migrate/4ec6bfb2493331ecc9203c7e0a627bd1.gif" alt="" width="16" height="16" /></div> <div style="display: block; height: 16px;"> <a href="#一级目录" mce_href="#一级目录">一级目录</a></div> </div>  

二级目录

<div style="display: block; padding: 0px; margin: 5px 1em;" mce_style="display: block; padding: 0px; margin: 5px 1em;"> <div style="display: block; float: left; width: 16px; height: 16px;"><img src="https://i-blog.csdnimg.cn/blog_migrate/4ec6bfb2493331ecc9203c7e0a627bd1.gif" alt="" width="16" height="16" /></div> <div style="display: block; height: 16px;"> <a href="#二级目录" mce_href="#二级目录">二级目录</a></div> </div>  

三级目录

<div style="display: block; padding: 0px; margin: 5px 2em;" mce_style="display: block; padding: 0px; margin: 5px 2em;"> <div style="display: block; float: left; width: 16px; height: 16px;"><img src="https://i-blog.csdnimg.cn/blog_migrate/4ec6bfb2493331ecc9203c7e0a627bd1.gif" alt="" width="16" height="16" /></div> <div style="display: block; height: 16px;"> <a href="#三级目录" mce_href="#三级目录">三级目录</a></div> </div>  

回页首

正文分割线

<div style="margin-bottom: 10px; margin-top: 5px;" mce_style="margin-bottom: 10px; margin-top: 5px;"> <img src="https://i-blog.csdnimg.cn/blog_migrate/05ac63f463130bd1876c1af927ae88a3.gif" mce_src="https://i-blog.csdnimg.cn/blog_migrate/05ac63f463130bd1876c1af927ae88a3.gif" alt="" width="100%" height="1" /> </div>

回页首

子标题

<p style="margin-top: 0px; margin-bottom: 0px; padding-bottom: 8px; line-height: 19px; padding-top: 5px;" mce_style="margin-top: 0px; margin-bottom: 0px; padding-bottom: 8px; line-height: 19px; padding-top: 5px;"> <span style="font-weight: bold; font-size: 18px; font-family: Verdana，Arial, sans-serif;" mce_style="font-weight: bold; font-size: 18px; font-family: Verdana，Arial, sans-serif;"> <a name="子标题一"></a>子标题一</span> </p>

回页首

普通段落

<p style="margin-top: 0px; margin-bottom: 0px; padding-bottom: 8px; line-height: 19px; padding-top: 5px;" mce_style="margin-top: 0px; margin-bottom: 0px; padding-bottom: 8px; line-height: 19px; padding-top: 5px;"> 段落一 </p>

回页首

小节的分割线

<div style="width: 100%;"> <img src="https://i-blog.csdnimg.cn/blog_migrate/05ac63f463130bd1876c1af927ae88a3.gif" mce_src="https://i-blog.csdnimg.cn/blog_migrate/05ac63f463130bd1876c1af927ae88a3.gif" alt="" width="100%" height="1" /> </div>

回页首

回页首链接

<div style="text-align: right;" mce_style="text-align: right;"> <img src="https://i-blog.csdnimg.cn/blog_migrate/c34923c5525c03e01818932f9002b251.gif" mce_src="https://i-blog.csdnimg.cn/blog_migrate/c34923c5525c03e01818932f9002b251.gif" border="0" alt="" width="16" height="16" /> <strong><a href="#pageTop" mce_href="#pageTop">回页首</a></strong> </div>

回页首