昨天给老家的电脑装了一个话说的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 ----推荐排行（暂未显示）
侧边栏总容器嵌套了一个主题容器，主题容器里从上到下排列着侧边信息、日历和其他内容容器。
排版布局
- 首先是要让侧边栏容器内左右上下都留一定的空白。
侧边栏的主体容器#sideBarMain设置左右的margin为40px,再设上下的padding为20px。同时设定box-sizing:border-box让计算容器长宽时把内边距也算进去。 - 然后给日历和其他信息容器加入一个20px的margin-top。
搜索框调整
- 搜索框存在框内字体显示不全的问题。搜索盒容器为#sidebar_search_box，整体宽度为218px，高度为21px。
宽度是不能改的了，可以设置一下高度为35px。 - 站内搜索和站外搜索的按键大小不一致。其中较大的站外搜索宽度为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 ----博文描述
今天就先做到这里吧。毕设第一轮查重没过有点不开心，这几天都会比较忙了……