body {
    /*上下左右都有20px的内边空白*/
    padding: 20px;
    /*上下没有外边空白，左右自动，一般就是居中*/
    margin: 0 auto;
    /*设置通篇的背景色为灰色*/
    background-color: #E2E2E2;
    /*设置显示器最大时候的宽度为1024px*/
    max-width: 1280px;
    /*设置内容的颜色，如字体颜色为深色?但基本没用上？*/
    height: 100%;
    color: #595B66;
    /*明确字体*/
	font-family: 'Microsoft Yahei', sans-serif;
}
h1,h2,h3,h4 {
    /*一到四级标题的字体颜色均为深灰色*/
    color: #797979;
    /*一到四级标题上下有5px的内边空白
    左右没有*/
    padding: 5px 0;
}
h1, h2 {
    /*一和二级标题下都有一根2px的颜色为深灰色的线*/
    border-bottom: solid 2px #797979;
}

/*设置图像的显示方式*/
img {
    max-width: 100%;
    height: auto;
}

/*设置整个博客的名称格式
用法就是<h1 class="main-header"><h1>*/
h1.main-header{
    /*内外边距均设置为0*/
    padding:0;
    margin: 0;
    /*设置博客名称下方的下划线为0px，意思就是不显示
    这样就把前面h1,h2设置下划线的设置给冲掉了*/
    border-bottom-width:0; 
}
/*设置整个博客副名称的格式
用法就是<h1 class="main-header"></h1>*/
h3.main-header{
    /*内边距为0*/
    padding:0;
    /*外边距为5px*/
   margin: 5px;
}

h4.pagination{
    text-align: center;
}

span.pagination{
    padding: 10px;
}

span.active{
    background-color: #4CAF50;
}

a.active {
    color: white;
}
p {
    /*段落字体大小为15px*/
    font-size: 15px;
    /*段落背景为深灰色,就是和标题文字的颜色相同*/
    background: #797979;
    /*段落前后左右都留10px的内边空白*/
    padding: 10px;
    /*段落的转角为圆角，5px*/
    border-radius: 5px;
    /*文字颜色为白色*/
    color: white;
    /*文字行间距为2px?*/
    line-height: 2;
}
pre {
   /*段落背景为深灰色,就是和标题文字的颜色相同*/
    background: #797979;
    /*段落前后左右都留10px的内边空白*/
    padding: 10px;
    /*段落的转角为圆角，5px*/
    border-radius: 5px;
    /*文字颜色为白色*/
    color: white;
    /*文字行间距为2px?*/
    line-height: 2;
}
a {
    /*超级链接的颜色用紫色？*/
    color:#001f3f;
    /*把超级链接的下划线取消了*/
    text-decoration: none;
}

/*设置博客名称的box
采用flex布局方式*/
.main-header-box{
    display: flex;
    /*box容器里的元素按从上到下
    排列的方式进行布局*/
    flex-direction: column;
    /*容器里的元素内容居中*/
    justify-content: center;
    /*容器里元素在交叉轴，此时为
    横轴上也居中*/
    align-items: center;
}
/*在博客副名称的下面增加一条下划线*/
.main-header-line {
    /*线的下方外边距为10px*/
    margin-bottom:10px;
    border-bottom: solid 2px #797979;
}
/*设置页面的标题栏*/
.main-nav-box {
    /*采用flex布局*/
    display:flex;
    /*标题栏的背景颜色用天蓝色*/
    background-color:#9AC9EE;
    /*标题栏容器的元素采用居中布置方式*/
    justify-content: center;
}
/*设置标题栏容器内元素*/
.main-nav{
    /*元素高度为40px*/
    height: 40px;
    /*行间距为40px,主要作用似乎是拿来
    让元素内的文字居中？*/
    line-height: 40px;
    /*每个元素的宽度为60px*/
    width:60px;
    /*每个元素内文字的对齐方式也为居中*/
    text-align: center;
}

/*设置主页面为flex容器
默认为从左到右排列方式*/
.main-page-box{
    display: flex;
    /*容器为两端对齐*/
    justify-content: space-between;
    /*设置内容为顶端对齐*/
    align-items: flex-start;
    background-color: white;
    padding-bottom: 30px;
}

/*设置主页面左侧的sidebar元素*/
.left-sidebar{
    max-width:300px;
    max-height:500px; 
    text-align: left;
    padding-right: 30px;
    padding-left: 30px;
    overflow: auto;
    order:1;
}
/*设置主页面右侧的sidebar元素*/
.right-sidebar{
    max-width:300px;
    max-height:500px; 
    text-align: left;
    padding-left: 30px;
    padding-right: 30px;
    overflow: auto;
    order: 3;
}

/*设置内容部分的flex容器及项目,本身是主页面容器的元素
这个容器的元素为纵轴排列*/
.contents{
    display: flex;
    flex-direction: column;
    order: 2;
}
/*内容的宽度，主要的内容元素有标题、时间作者+标签、摘要、“阅读原文”*/
.contents-item{
    width:680px;
}
/*摘要的设置,上外边框为5，下外边框也为5*/
.summary{
    margin: 0;
    margin-top:5px;
    margin-bottom: 5px;
}
/*时间作者+标签放到一个容器里，容器里的元素按space-around排列*/
.time-tags-box{
    margin: 0;
    margin-top: -20px;
    display: flex;
    justify-content: space-around;   
}
/*时间作者的宽度为300px，在左侧*/
.time{
    width: 300px;
    text-align: left;
}
/*标签的宽度为380px，在右侧*/
.tags{
    width:380px;
    text-align: right;
}


/*设置footer*/
.footer{
    margin: 0;
    margin-bottom: 0;
    text-align: center;
}
/* 设置滚动条的样式 */
::-webkit-scrollbar {
	width: 1px;
}

/* 滚动槽 */
::-webkit-scrollbar-track {
	box-shadow: inset 0 0 1px rgba(0,0,0,0.3); 
	border-radius: 10px;
}
 
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
	border-radius: 10px;
	background: rgba(0,0,0,0.1); 
	-webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0.5); 
}
::-webkit-scrollbar-thumb:window-inactive {
	background: rgba(255,0,0,0.4); 
}
::-webkit-scrollbar-thumb:hover{
	background-color:rgba(255,0,0,0.4);
	-webkit-border-radius:1px;
}