老家这几天下雨就没停过，今天终于出了一次大太阳，整个人都精神了不少，废话不多说直接开始吧！今天预备弄一下博文区的排版。
照搬第一篇博文记录好的博文区结构如下：
|--#main ----内容
|--#mainContent ----主题内容容器
|--.forFlow ----内容流
|--.day ----一整天的内容容器
|--.dayTitle ----日期
|--.postTitle ----文章标题
|--.postCon ----内容摘要
|--.clear ----博客内隔层
|--.postDesc ----博客描述
|--.postSeparator ----博客间的隔层
|--.topicListFooter ----博客页脚容器
博文区的结构很好诠释了html设计布局的真谛：层层套娃，套就硬套，只要我嵌套的容器足够多我就能做出千变万化的样式。单是外层容器就有三个，然后按天划分博客区域，之后才是一个博文简介应该有的各部分。外层的样式做点padding隔开自己的边框就足够，主要是给标题做一点好看的样式。
标题样式中的几项参数参考了这位前辈的。这位前辈还写了个显示LaTex数学公式的js脚本，真的很棒！感谢这位大佬。
设计的样式如下：
.postTitle {
width: 100%;
/*clear的属性是不让这一层出现其他的浮动元素。*/
clear:both;
/*从背景图片里抠出来的颜色，哈哈*/
background: rgb(72,122,163);
/*设置一点点的边角弧度可以凸显阴影*/
border-radius: 3px 3px 3px 3px;
/*盒阴影设置，用了一个正中阴影和斜侧阴影让其有略微的发光和立体效果*/
box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
/*常规字体设置*/
font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
font-size: 23px;
font-weight: bold;
/*高度和行高设为一样可以让你的字垂直居中*/
height: 45px;
line-height: 45px;
/*留一点左右的空隙*/
margin: 10px 0;
/*字体阴影凸显立体感*/
text-shadow: 2px 2px 3px #222222;
}
.postTitle>a{
/*白色字配黑阴影和深背景效果更佳*/
color:white;
margin-left:8px;
}
另外把日期显示float:right;错开到右边，正好填补了一下右边的空缺;文章的摘要部分和标题文字左对齐。
效果如下所示：
都做了快一个星期了，今天突然发现自己看了一遍又一遍的成品界面是缩放过的，我去，为什么之前没有发现……放大回百分之百后真的大了很多，内容区和侧边栏加起来快一个屏幕的大小了。其实这样也不是不行，当下最流行的设计方式就是大区域纯色块拼接，但这不适合我的博客。首先博客需要展示很多文字内容，大区域大号文字会让人看的很累，大区域小号文字会浪费不少空间，访客翻阅起来会很不方便。
重新缩放并观察了一下，我的博客最佳缩放比例是原大小的80%左右。那还好，在所有已经做好的有关大小的属性统统变成原来的80%就好了；当然，边距什么的还是得看情况一点一点调……。
经过大约十分钟的时间重新调好，继续下一步吧~
既然都做了主博文区的标题样式了，那就顺便再做一下旁边侧边栏的样式吧。
侧边栏的标题用的选择器是#sideBar h3，即sideBar的所有子女元素中的h3元素。如果这里照葫芦画瓢也弄个填充背景色标题的话会让整个界面太脏，一种可行的方法是用原来博客主题的样式：标题旁边一个竖线。
#sideBar h3{
border-left:2px solid rgb(93,98,79);
color:rgb(0,70,48);
font-size:1.17em;
line-height:1.17em;
height:1.17em;
padding-left:10px;
}
其中比较要注意的地方是h3的font-size、line-weight要相等才能让文字垂直居中显示，其他都是常规项。
给博文区设了一些零碎的间距，做了标题样式，并把错误的尺寸调回了合适的大小。
原文：https://www.cnblogs.com/joufulmika/p/12656963.html