此处对nginx-blog的style.css进行注释
由于一时没找到合适的c++渲染html的模板，写nginx-blog的
时候直接就把html的相关标签全写死到程序中了，剩下的就
是style.css是独立的，当时为了确定style.css，也是折腾
了好久，干脆就写好注释，方便自己了。
下面就是style.css的注释，在nginx-blog的源代码文件夹里
也是注释了的。
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;
}