我的博客园界面自定义步骤

• 首先到网上download一个网页模板【www.oswd.org】

• 然后选好自己的模板【最好是css设计的比较规范的模板】

• 进入首页，选中页面另存为，保存为html文件

• 进入保存html文件的目录，找到style.css文件

• 根据css文件和html文件的结构，将模板的对应部分整合到style.css中，需要更换的图片可以保存到自己的相册

• 然后上传修改后的style.css文件，到博客设置中修改子标题为：<原来的子标题><link id="CustomCss" type="text/css" rel="stylesheet" href="<上传的css文件目录>"/>，并且选中“禁用默认css”
  

• 然后不断的测试并修改css文件直到看得过去

• 附加自己修改后的css文件源码
  由于是整合的两个css文件故源码比较乱，不过还好能凑合用
  **************************************************/
  #EntryTag {
      margin-top: 20px;
      font-size: 9pt;
      color: gray;
  }
  .topicListFooter {
      text-align: right;
      margin-right: 10px;
      margin-top: 10px;
  }
  #divRefreshComments{
      text-align: right;
      margin-right: 10px;
      margin-bottom: 5px;
      font-size: 9pt;
  }
  /*****第一部分结束*******************************/
  
  /**************************************************
  第二部：公共样式（全局样式）。公共会对所有页面的标签都起作用。这个部分你
  可以随意的更改，并不会牵扯到其他的皮肤模板。但是每次更改都要注意你的皮肤
  模板所有页面的变化。因为它们是全局的。
  **************************************************/
  * {
      margin: 0;
      padding: 0;
  }
  html {
      height: 100%;
  }
  body {
      color: #464646;
      font-family:"微软雅黑", "verdana","ms song","Arial","Helvetica", "sans-serif";
      font-size: 9pt;
      min-height: 101%;
      background:transparent url('/skins/summerGarden/images/bg.jpg')  repeat-x;   
      background-color: #FAF7EF;
  }
  table {
      border-collapse: collapse;
      border-spacing: 0;
  }
  fieldset, img {
      border: 0;
  }
  
  h1, h2, h3, h4, h5, h6 {
      font-size: 100%;
      font-weight: normal;
  }
  a:link {
      color: #464646;
      text-decoration: none;
  }
  a:visited {
      color: #464646;
      text-decoration: none;
  }
  a:hover {
      color: #4c4f8b;
     
  }
  a:active {
      color: #464646;
      text-decoration: none;
  }
  .clear {
      clear: both;
  }
  /*****第二部分结束*******************************/
  
  /**************************************************
  第三部分：各个页面元素的样式。你可以根据需要随意的更改，并不会牵扯到其他
  的皮肤模板。这个部分是最能展现你想象力的部分。其中头部和侧边栏部分是此皮
  肤公共的部分。而每个页面特有的部分会有相应的注释和说明。
  **************************************************/
  /*****home和头部开始*************************/
  #home {
      margin: 0 auto;
      width:95%;
      min-width: 930px;
      position:relative;
  
  }
  #header {
      background: url('/skins/summerGarden/images/header.jpg') no-repeat  right top;
      height:146px;
      padding-top:30px;
  }
  #blogTitle {
      height: 80px;
      clear: both;
      color:#4c4f8b;
  }
  
  #blogTitle a:link,#blogTitle a:visited,#blogTitle a:active{
      color:#4c4f8b;
  }
  #blogTitle a:hover{
      color:#ff6600;
         
  }
  
  
  #blogTitle h1 {
      font-size: 200%;
      font-weight: bold;
      line-height: 1.5em;
      margin-left: 1em;
      margin-top: 10px;
      width: 50%;
      float: left;
  }
  #blogTitle h2 {
      margin-left: 4em;
      line-height: 1.5em;
      width: 50%;
      float: left;
  }
  #lnkBlogLogo{
      display:none;
  }
  #blogLogo {
      float: right;
  }
  #navigator {
      clear: both;
  }
  
  
  /*********导航Menu********/
  #navList 
  {
      float:left;
      font:normal 12px 'Trebuchet MS','Arial';
      margin:0;
      padding:5px;
      background-image:url('http://www.cnblogs.com/images/cnblogs_com/whs475/141851/t_back.gif');
      background-repeat:repeat-x;
  }
  
  #navList ul
  {
      float:left;
      line-height:32px;
      list-style:none;
      margin:0;
  }
  
  
  #navList li
  {
      display:inline;
      padding:0;
      margin:10px;
      width:70px;
      height:25px;
  }
  
  
  #navList li a
  {
     
      color:#FFFFFF;
      float:left;
      padding:0 3px 0 3px;
      text-decoration:none;
      font-size:14px;
      padding:0px 10px;
  }
  
  #navList li a:hover
  {
      background:url('http://www.cnblogs.com/images/cnblogs_com/whs475/141851/t_right.png') repeat-x;
      color:#00DFFF;
      font-weight:bold;
  }
  #navList li a  img {
  border:none;
  margin:8px 4px 0 0;
  }
  
  .aHeaderXML img{
      display:none;
  }
  
  /*随笔- 1  文章- 0  评论- 0*/
  .blogStats {
      float: left;
      color: #444;
      margin-top: 8px 2px auto 10px;
      text-align: right;
  }
  /****导航Menu结束******/
  
  
  
  
  /*****主页文章列表开始***/
  #main{
      width: 99%;
      min-width: 950px;
      text-align: left;
  }
  #mainContent .forFlow{
      float: none;
      width: 750px;
  }
  
  #mainContent {
      min-height: 200px;
      padding: 0px 0px 10px 0;
      -o-text-overflow: ellipsis;
      overflow: hidden;
      float: right;
      width: 750px;
  }
  .day {
      min-height: 10px;
      _height: 10px;
      margin-bottom: 20px;
      padding-bottom: 15px;
  }
  .day:hover {
      min-height: 10px;
      _height: 10px;
      margin-bottom: 20px;
      padding-bottom: 15px;
  }
  .dayTitle {
      width: 100%;
      color: #6466b3;
      text-align:right;
      line-height: 1.5em;
      font-size:12px;
      margin-top: 3px;
      margin-bottom: 10px;
      clear:both;
  }
  .postTitle {
      text-align:center;
      margin: 0;
      padding: 0 0 10px 0;
      background: url("http://www.cnblogs.com/images/cnblogs_com/whs475/141851/r_lefth3.gif") repeat-x left bottom;
      font-weight: bold;
      font-size:16px;
      text-transform: lowercase;
      letter-spacing: -1px;
  }
  
  .postTitle a:link, .postTitle a:visited, .postTitle a:active {
      color: #6466b3;
  }
  .postTitle a:hover {
      color: #ff6600;
     
  }
  .postCon {
      margin: 10px 0 20px 0;
      padding: 0 0 10px 0;
      background: url("http://www.cnblogs.com/images/cnblogs_com/whs475/141851/r_lefth3.gif") repeat-x left bottom;
      text-transform: lowercase;
      letter-spacing: -1px;
  }
  .postCon:hover {
  background-color:#eee;
  font-size:14px;
  }
  .postDesc {
      float: right;
      width: 100%;
      clear:both;
      text-align: right;
      padding-right: 5px;
      color: #666;
      margin-top: 5px;
  }
  .postDesc a:link, .postDesc a:visited, .postDesc a:active {
      color: #666;
  }
  .postDesc a:hover {
      color: #F60;
      text-decoration: none;
  }
  .postSeparator {
      clear: both;
      height: 5px;
      width: 100%;
      clear:both;
      float: right;
      margin: 0 auto 15px auto;
  }
  /*****主页文章列表*********/
  
  
  
  /*****侧边栏开始********/
  #sideBar {
      width: 180px;
      min-height: 200px;
      padding: 20px 0 0px 5px;
      float: left;
      -o-text-overflow: ellipsis;
      overflow: hidden;
      color:#88866F;
  }
  
  .newsItem .catListTitle {
      display: none;
  }
  .newsItem {
      padding: 15px 0 5px 0px;
      margin-bottom: 8px;
  }
  
  /**日历控件样式开始**/
  #calendar
  {
      width: 180px;
  }
  #calendar .Cal {
      width: 100%;
      line-height: 1.5em;
  }
  .Cal
  {
      /**日历容器table**/
      border: none;
      color: #666;
  }
  #calendar table a:link, #calendar table a:visited, #calendar table a:active {
      font-weight: bold;
  }
  #calendar table a:hover {
      color: #6466b3;
      text-decoration: none;
      background-color: #ccddee;
  }
  .CalTodayDay{/**今天日期样式**/
      color:#6466b3;
      border: dotted 1px #6466b3;
  }
  
  #calendar .CalNextPrev a:link,#calendar  .CalNextPrev a:visited, #calendar .CalNextPrev a:active {/**上个月、下个月箭头样式**/
      font-weight: bold;
  }
  
  .CalDayHeader{
      border-bottom:1px solid #ccc;   
  }
  .CalTitle
  {
      /**日历年月头部样式**/
      width:100%;
      color:#333;
      border-bottom:1px solid #666;   
  }
  /**日历控件样式结束**/
  #leftcontentcontainer
  {
      /*border-right:solid 1px White;*/
  }
  /*.catListInteraction*background:url('http://www.cnblogs.com/images/cnblogs_com/whs475/141851/t_menubg.jpg') repeat-x;*/
  #leftcontentcontainer div,#leftcontentcontainer div.mySearch div
  {
      width:180px;
      background: #faf7ef url("http://www.cnblogs.com/images/cnblogs_com/whs475/141851/r_box.png")  no-repeat bottom left;
      padding:0px;
      margin:5px 0px;
      padding-bottom:10px;
  }   
  #leftcontentcontainer div.mySearch
  {
          background-image:none;
          padding:0;
          margin:0;
  }
  
  
  #leftcontentcontainer div h3.catListTitle,#leftcontentcontainer div.mySearch div h3.catListTitle
  {
   height: 19px; background: #fff url("http://www.cnblogs.com/images/cnblogs_com/whs475/141851/r_boxtop.png") no-repeat; color: #000;
   font-size:16px;
   font-weight:bold;
  }
  
  #leftcontentcontainer div ul
  {
      text-align:center;
      margin: 10px;
  }
  
  #leftcontentcontainer div ul li
  {
      line-height: 26px;
      background: url("http://www.cnblogs.com/images/cnblogs_com/whs475/141851/t_li-line.gif") no-repeat bottom left;
      list-style: none
  }
  #leftcontentcontainer div ul li:hover
  {
      line-height: 26px;
      background-color:#E4F7FA;
      list-style: none
  }
  #leftcontentcontainer div ul li a
  {
  padding-left: 15px;
    text-decoration: none;
    background: url("http://www.cnblogs.com/images/cnblogs_com/whs475/141851/r_h3-bg.gif") no-repeat left;
      color:Black;
  }
  /*.catListInteraction*/
  #leftcontentcontainer div ul li a:hover
  {
      text-align:center;
      text-decoration:none;
      color:#333;
  }
  
  #leftcontentcontainer input
  {
  max-width:80%;
  margin:auto 10%;
  }
  .catListTitle {
      font-weight: bold;
      line-height: 1.5em;
      font-size: 110%;
      margin-top: 15px;
      text-align: center;
      color:#6466b3;
  }
  .catListComment {
      line-height: 1.5em;
  }
  .divRecentComment {
      text-indent: 1em;
  }
  #sideBarMain ul {
      line-height: 1.5em;
  }
  /*****侧边栏结束******/
  
  
  /****查看文章页面开****/
  #topics {
      width: 100%;
      min-height: 200px;
      padding: 0px 0px 10px 0;
      float: left;
      -o-text-overflow: ellipsis;
      overflow: hidden;
  }
  #topics .postTitle {
      font-size: 130%;
      font-weight: bold;
      float: left;
      line-height: 1.5em;
      width: 100%;
      padding-left: 5px;
      margin-bottom:15px;
  }
  .postBody {
      padding: 5px 2px 5px 5px;
      line-height: 1.5em;
      color: #000;
      border-bottom: 1px solid black;
  }
  #EntryTag {
  
  }
  #EntryTag a {
      margin-left: 5px;
  }
  #EntryTag a:link, #EntryTag a:visited, #EntryTag a:active {
      color: #4c4f8b;
  }
  #EntryTag a:hover {
      color: #6466b3;
     
  }
  #topics .postDesc {
      float: right;
      width: 100%;
      text-align: right;
      padding-right: 5px;
      color: #666;
      margin-top: 5px;
  }
  .feedback_area_title {
      font-weight: bold;
      margin-top: 20px;
      border-bottom: 1px solid #333;
      margin-bottom: 10px;
      padding-left: 8px;
  }
  .louzhu {
  background:transparent url('/skins/summerGarden/images/icoLouZhu.gif') no-repeat scroll right top;
  padding-right:16px;
  }
  .feedbackListSubtitle {
      color: #666;
  }
  .feedbackListSubtitle a:link, .feedbackListSubtitle a:visited, .feedbackListSubtitle a:active {
      color: #666;
      font-weight: normal;
  }
  .feedbackListSubtitle a:hover {
      color: #f60;
      text-decoration: none;
  }
  .feedbackManage {
      width: 200px;
      text-align: right;
      float: right;
  }
  .feedbackCon {
      border-bottom: 1px solid #ccc;
      background: url('/skins/summerGarden/images/comment.gif') no-repeat 5px 0px;
      padding: 15px 18px 10px 40px;
      min-height: 35px;
      _height: 35px;
      margin-bottom: 1em;
      line-height: 1.5em;
      width:95%;
  }
  #divRefreshComments {
      text-align: right;
      margin-bottom: 10px;
  }
  .commenttb {
      width: 320px;
  }
  .feedbackListSubtitle b{
      font-weight:normal;
  }
  /****查看文章页面开始*****/
  
  /****列表页面开始*****/
  .entrylistTitle,.PostListTitle,.thumbTitle{/**几个分类列表的标题样式**/
      font-size: 110%;
      font-weight: bold;
      border-bottom: 1px solid #6466b3;
      text-align: right;
      padding-bottom: 3px;
      padding-right: 10px;
      color:#6466b3;
  }
  
  .entrylistDescription {
      color: #666;
      text-align: right;
      padding-top: 5px;
      padding-bottom: 5px;
      padding-right: 10px;
      margin-bottom: 10px;
  }
  .entrylistItem {
      min-height: 20px;
      _height: 20px;
      margin-bottom: 30px;
      padding-bottom: 5px;
      width: 100%;
  }
  .entrylistPosttitle {
      font-size: 110%;
      font-weight: bold;
      border-bottom: 1px dotted #6466b3;
      line-height: 1.5em;
      width: 100%;
      padding-left: 5px;
  
  }
  .entrylistPosttitle a:link,.entrylistPosttitle a:visited,.entrylistPosttitle a:active{
          color:#6466b3;
  }
  .entrylistPosttitle a:hover {
      color:#4c4f8b;
         
  }
  .entrylistPostSummary {
      margin-top: 5px;
      padding-left: 5px;
      margin-bottom: 5px;
  }
  .entrylistItemPostDesc {
      text-align: right;
      color: #666;
  }
  .entrylistItemPostDesc a:link, .entrylistItemPostDesc a:visited, .entrylistItemPostDesc a:active {
      color: #666;
  }
  .entrylistItemPostDesc a:hover {
      color: #f60;
         
  }
  .entrylist .postSeparator {
      clear: both;
      width: 100%;
      font-size: 0;
      line-height: 0;
      margin: 0;
      padding: 0;
      height: 0;
      border: none;
  }
  
  .pager {
      text-align: right;
      margin-right: 10px;
  }
  .PostList {
      border-bottom: 1px dotted #6466b3;
      clear: both;
      min-height: 1.5em;
      _height: 1.5em;
      padding-top: 10px;
      padding-left: 5px;
      padding-right: 5px;
      margin-bottom: 5px;
  }
  .postTitl2 {
      float: left;
  }
  .postDesc2 {
      color: #666;
      float: right;
  }
  .postText2 {
      clear: both;
      color: #666;
  }
  .pfl_feedback_area_title {
      text-align: right;
      line-height: 1.5em;
      font-weight: bold;
      border-bottom: 1px solid #666;
      margin-bottom: 10px;
  }
  .pfl_feedbackItem {
      border-bottom: 1px solid black;
      margin-bottom: 20px;
  }
  .pfl_feedbacksubtitle {
      width: 100%;
      border-bottom: 1px dotted #666;
      height: 1.5em;
  }
  .pfl_feedbackname {
      float: left;
  }
  .pfl_feedbackManage {
      float: right;
  }
  .pfl_feedbackCon {
      color: black;
      padding-top: 5px;
      padding-bottom: 5px;
  }
  .pfl_feedbackAnswer {
      color: #F40;
      text-indent: 2em;
  }
  .tdSentMessage {
      text-align: right;
  }
  .errorMessage {
      width: 300px;
      float: left;
  }
  .mySearch #q {
      height: 1.4em;
      width: 175px;
  }
  /****列表页面结*****/
  
  
  /****相册页面开*****/
  .divPhoto {
      border: 1px solid #6466b3;
      padding: 2px;
      margin-right: 10px;
  }
  
  .thumbDescription {
      color: #666;
      text-align: right;
      padding-top: 5px;
      padding-bottom: 5px;
      padding-right: 10px;
      margin-bottom: 10px;
  }
  /****相册页面开*****/
  
  
  /*****留言页面开始******/
  #footer {
      text-align: center;
      height: 41px;
      margin-top: 10px;
      background:url('/skins/summerGarden/images/footer.jpg') no-repeat 220px 0;
      padding-top:40px;
  }
  /*留言查看页面的个人信息*/
  .personInfo {
      margin-bottom: 20px;
  }
  /*留言分页区域*/
  .pages {
      text-align: right;
  }
  /*****留言页面结束*******/
  
  /**************************************************
  第四部分：文章内容常用标签格式。这个部分是设置作者写作内容的部分。例如：
  如果作者的文章用有p标签，则可通过这个对这些文章中的p标签进行设置。前面
  的“.postBody”明确的指出了这里样式的作用范围。仅仅适用于文章主体部分。
  建议这个不要设置过于详细的细节。因为，一些样式，一篇文章比较适合的话，
  并不能保证所有的文章都适合。
  **************************************************/
  /*文章内部常用标签格式*/
  .postBody {
      line-height: 1.5em;
      color:#393939;
      font-size:14px;
  }
  .postBody p,.postCon  p{
      margin: 0 auto 1em auto;
  }
  
  .postBody h2{
      font-size: 150%;
      margin: 15px auto 2px auto;
      font-weight:bold;
  }
  .postBody h3 {
      font-size: 120%;
      margin: 15px auto 2px auto;
      font-weight:bold;
  }
  .postBody h4{
      font-size:110%;
      margin:15px auto 2px auto;
      font-weight:bold;
      color:#333;
  }
  
  .postBody h5{
      font-size:100%;
      margin:15px auto 2px auto;
      font-weight:bold;
      color:#333;
  }
  
  .postBody a:link,.postBody a:visited,.postBody a:active{
      color:#6466b3;   
      text-decoration:underline;
  }
  .postBody a:hover{
      color:#4c4f8b;
  }
  .postCon a:link,.postCon a:visited,.postCon a:active{
      text-decoration:underline;
  }
  .postCon a:hover{
      color:#4c4f8b;
  }
  
  .postBody ul,.postCon ul{
      margin-left:2em;   
  }
  
  .postBody li,.postCon li{
      list-style-type:disc;
      margin-bottom:1em;
  }
  
  .postBody blockquote{
      background:url('/skins/summerGarden/images/comment.gif')) no-repeat 25px 0px;
      padding:10px 60px 5px 60px;
      min-height:35px;
      _height:35px;
      line-height:1.6em;
      color:#333;
  }
  
  /****表单元素******/
  input,
  textarea,
  select {
      background: #ccddee;
      border: 1px solid #FFFFFF;
      font: bold 13px Arial, Helvetica, sans-serif;
      color: #0F5B96;
  }
  
  input:focus,
  input:hover,
  textarea:focus,
  textarea:hover,
  select:focus,
  select:hover {
    color: #000;
    background: #E4F7FA;
    border: 1px solid #00DFFF;
  }
  /********Form Elements end********/