# CNBLOG 个性化笔记（3）——侧边栏和主内容结构

昨天给老家的电脑装了一个话说的750ti，显示丝滑了不少，把博客建设工作鸽了，嘿嘿嘿^^今天的预备工作是把侧边栏弄好，有时间再做一下下内容区的排版~

初始效果

之前做好的侧边栏初始效果如下：



由此看出存在字体的大小问题，还有排版需要留白。

侧边栏结构

侧边栏的内容如下：

|--#sideBar                           ----侧边栏容器
   |--#sideBarMain                     ----侧边栏主体容器
     |--#sidebar_news                  ----侧边信息
       |--.catListTitle                ----公告标题
       |--#blog-news                   ----信息容器
         |--#profile_block             ----个人信息
     |--#blog-calendar                 ----日历容器
       |--#blogCalendar                ----日历本体表格
     |--#leftcontentcontainer          ----其他内容容器
       |--#blog-sidecolumn             ----内容列表容器
         |--#sidebar_search            ----搜索栏容器（有两个同名的嵌套）
           |--#sidebar_search_box      ----搜索盒
             |--#widget_my_zzk         ----站内搜索
             |--#widget_my_google      ----谷歌搜索
         |--#sidebar_shortcut          ----常用链接外容器
           |--.catListLine             ----常用链接内容器
             |--.catListLine>ul        ----常用链接列表
               |--.catListLine>ul>li   ----单个常用连接
         |--#sidebar_toptags           ----我的标签（暂未显示）
         |--#sidebar_categories        ----随笔档案
         |--#sidebar_recentcomments    ----最近评论（暂未显示）
         |--#sidebar_topviewedposts    ----阅读排行（暂未显示）
         |--#sidebar_topcommentedposts ----评论排行
         |--#sidebar_topdiggedposts    ----推荐排行（暂未显示）

侧边栏总容器嵌套了一个主题容器，主题容器里从上到下排列着侧边信息、日历和其他内容容器。

排版布局

1. 首先是要让侧边栏容器内左右上下都留一定的空白。
   
   侧边栏的主体容器#sideBarMain设置左右的margin为40px,再设上下的padding为20px。同时设定box-sizing:border-box让计算容器长宽时把内边距也算进去。
   
2. 然后给日历和其他信息容器加入一个20px的margin-top。

搜索框调整

1. 搜索框存在框内字体显示不全的问题。搜索盒容器为#sidebar_search_box，整体宽度为218px，高度为21px。
   
   宽度是不能改的了，可以设置一下高度为35px。
2. 站内搜索和站外搜索的按键大小不一致。其中较大的站外搜索宽度为86px，应该让上下两个等宽；每行两个input之间有一个3.5px大小的空格。所以理想的输入框宽度为218-86-4=128px再小一点的127px。

其他

侧边栏其他部分其实也没有什么修改的必要了，给其他内容的每个部分加一个margin-top:10px;就差不多了。
得到的效果如下：

额外工作：博客详细界面结构

今天的主要工作有点简单，那就再加一点工作量好了：给主内容区做一个初步的布局设计。主内容区有两个状态，一个是博客主界面，博客列表里多个博客概览的；另一个是博客的详细界面。后者比较简单，就先认识下这个详细界面吧。

内容结构

|-- .forFlow      ----内容主容器
  |-- #post_detail  ----详细内容外容器
    |--#topics      ----详细内容中容器
      |--.post      ----详细内容内容器
        |--.postTitle   ----标题
        |--.clear       ----隔层
        |--.postBody    ----内容主体
          |--#cnblogs_post_body     ----纯内容
          |--#MySignature           ----签名(未显示)
          |--.clear                 ----隔层
          |--#blog_post_info_block  ----张贴信息
            |--#blog_post_info      ----张贴信息
              |--.green_channel     ----绿色通道
              |--.author_profile    ----作者信息
              |--.div_digg          ----点踩区
          |--#post_next_prev        ----上一篇/下一篇
        |--.postDesc    ----博文描述

今天就先做到这里吧。毕设第一轮查重没过有点不开心，这几天都会比较忙了……

# CNBLOG 个性化笔记（3）——侧边栏和主内容结构

原文：https://www.cnblogs.com/joufulmika/p/12650518.html