/*常用元素*/
|
body {
|
background: url(../static/background.jpg) no-repeat fixed 50% 50%;
|
/*background: url(background.jpg) fixed 50% 50%;*/
|
/*background-color: #dddddd;*/
|
background-size: cover;
|
width: 100%;
|
height: 100%;
|
}
|
|
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
|
font-weight: 400;
|
}
|
|
p {
|
font-size: 12px;
|
letter-spacing: 0.8px;
|
line-height: 20px;
|
}
|
|
/*---------
|
| 头部 |
|
----------*/
|
.blog-head {
|
position: fixed;
|
top: 0px;
|
z-index: 999;
|
}
|
|
/*---------
|
| 主体 |
|
----------*/
|
.blog-main {
|
padding-top: 80px;
|
padding-left: 6%;
|
padding-right: 7%;
|
padding-bottom: 2%;
|
}
|
|
/*---------
|
| 脚部 |
|
----------*/
|
.blog-footer {
|
background-color: #141414;
|
color: #757575;
|
text-align: center;
|
/*position: fixed;*/
|
bottom: 0px;
|
z-index: 200;
|
width: 100%;
|
}
|
|
/*左右两边的盒子容器*/
|
.blog-cell-main-container {
|
opacity: 0.8;
|
padding: 0px 25px 10px;
|
}
|
|
/*左边部分*/
|
.blog-left-side-portion {
|
position: sticky;
|
top: 80px;
|
padding-left: 2%;
|
/*padding-right: 2%;*/
|
z-index: 100;
|
}
|
|
/*中间部分*/
|
.blog-body {
|
padding-top: 10px;
|
/*padding-left: 3%;*/
|
/*padding-right: 3%;*/
|
}
|
|
/*右边部分*/
|
.blog-right-side-portion {
|
position: sticky;
|
top: -19%;
|
padding-top: 10px;
|
/*padding-left: 2%;*/
|
/*padding-right: 2%;*/
|
z-index: 100;
|
}
|
|
div .blog-right-side-meta div {
|
padding-left: 6%;
|
padding-right: 6%;
|
margin-bottom: 3%;
|
}
|
|
/*---------------------
|
| 核心盒子构成start |
|
------- ---------------*/
|
.blog-left-side-scroll-portion, .blog-right-side-container {
|
border-radius: 15px;
|
background-color: white;
|
|
line-height: 1.4;
|
white-space: nowrap; /*规定段落中的文本不进行换行：*/
|
text-align: center;
|
padding-top: 20px;
|
padding-bottom: 20px;
|
max-height: 200px;
|
/*margin-top: 10px;*/
|
/*min-height: 200px;*/
|
|
overflow-x: hidden;
|
overflow-y: auto;
|
display: block;
|
}
|
|
.blog-right-side-container {
|
padding-top: 10px;
|
padding-bottom: 20px;
|
overflow: hidden;
|
}
|
|
.blog-right-side-scroll-portion {
|
padding-top: 10px;
|
max-height: 150px;
|
|
overflow-x: hidden;
|
overflow-y: auto;
|
border-top: 1px solid #999;
|
}
|
|
/*预留滚动条的宽度*/
|
.blog-left-side-scroll-portion, .blog-right-side-scroll-portion {
|
padding-right: 5px;
|
}
|
|
/*预留滚动条的宽度*/
|
.blog-left-side-scroll-portion:hover, .blog-right-side-scroll-portion:hover {
|
padding-right: 0px;
|
}
|
|
.blog-left-side-scroll-portion:hover::-webkit-scrollbar {
|
display: block;
|
}
|
|
.blog-right-side-scroll-portion:hover::-webkit-scrollbar {
|
display: block;
|
}
|
|
.blog-left-side-scroll-portion::-webkit-scrollbar, .blog-right-side-scroll-portion::-webkit-scrollbar {
|
width: 5px;
|
display: none;
|
}
|
|
.blog-left-side-scroll-portion::-webkit-scrollbar-thumb, .blog-right-side-scroll-portion::-webkit-scrollbar-thumb {
|
background-color: rgba(153, 154, 170, 0.3);
|
border-radius: 2px;
|
}
|
|
/*margin滚动条上偏移*/
|
.blog-left-side-scroll-portion::-webkit-scrollbar-track,.layui-layer-content::-webkit-scrollbar-track{
|
margin-top: 20px;
|
margin-bottom: 20px;
|
}
|
|
/*layui弹出层不要滚动条*/
|
.layui-layer-content::-webkit-scrollbar {
|
width: 7px;
|
height: 20%;
|
display: none;
|
}
|
|
.layui-layer-content::-webkit-scrollbar-thumb {
|
background-color: rgba(76, 77, 79, 0.3);
|
border-radius: 2px;
|
}
|
|
.layui-layer-content:hover::-webkit-scrollbar {
|
display: block;
|
}
|
|
/*---------------------
|
| 核心盒子构成end |
|
------- ---------------*/
|
|
/*遗留无用部分,用来显示过长的部分*/
|
something:hover::after {
|
/*content: attr(data-customer);*/
|
/*content: "kiki超超超超超超超超超超超超长的 陈奕迅 baby song 歌词 ";*/
|
content: "";
|
background: #F2F2F2;
|
/*border: 1px solid #E5E5E5;*/
|
box-shadow: 0 2px 4px 0 rgba(56, 62, 71, 0.10);
|
border-radius: 2px;
|
padding: 2px 6px;
|
font-size: 13px;
|
color: #202332;
|
|
word-break: break-word; /*可以换行 white-space CSS 属性是用来设置如何处理元素中的空白。*/
|
word-wrap: break-word;
|
|
max-width: 90%; /*如果一个单词太长，则截断 CSS 属性 word-break 指定了怎样在单词内断行。 white-space: normal;*/
|
max-height: 10%;
|
|
/*position: relative;*/
|
z-index: 500;
|
top: 13%;
|
left: 15%;
|
}
|
|
/*切出按钮*/
|
.blog-comment-left-guide {
|
position: fixed;
|
top: 45%;
|
left: -12px;
|
padding-left: 15px;
|
padding-top: 15px;
|
|
background-color: white;
|
width: 20px;
|
height: 30px;
|
|
display: block;
|
border-radius: 20%;
|
opacity: 0.3;
|
z-index: 200;
|
}
|
|
.blog-comment-right-guide {
|
position: fixed;
|
top: 45%;
|
right: -12px;
|
padding-left: 2px;
|
|
padding-right: 13px;
|
padding-top: 15px;
|
|
background-color: white;
|
width: 20px;
|
height: 30px;
|
display: block;
|
border-radius: 20%;
|
opacity: 0.3;
|
z-index: 200;
|
}
|
|
/*头像部分*/
|
.blog-avatar {
|
border-radius: 15px;
|
background-color: white;
|
}
|
|
.blog-avatar img {
|
width: 60px;
|
height: auto;
|
border-radius: 50%;
|
display: block;
|
margin: 10px auto 10px;
|
padding-top: 10px;
|
}
|
|
.blog-user-message {
|
text-align: center;
|
font-size: 15px;
|
color: #555;
|
padding-top: 10px;
|
padding-bottom: 10px;
|
}
|
|
.blog-user-message span {
|
display: block;
|
padding-bottom: 5px;
|
}
|
|
/*日志部分*/
|
.blog-log-list {
|
line-height: 1.6;
|
padding-left: 3%;
|
padding-right: 3%;
|
|
flex-wrap: wrap; /*让弹性盒元素在必要的时候拆行：*/
|
display: -webkit-flex;
|
display: flex;
|
-webkit-justify-content: center;
|
justify-content: center;
|
}
|
|
.blog-log-item {
|
border-left: 2px solid rgba(222, 229, 231, .45);
|
width: 23%;
|
margin-bottom: 10px;
|
}
|
|
.blog-log-item:first-child {
|
border-left: none;
|
}
|
|
.blog-log-item a span:first-child {
|
color: #999;
|
}
|
|
.blog-log-item a span:last-child {
|
font-weight: 600;
|
font-size: 15px;
|
}
|
|
.blog-log-item span {
|
display: block;
|
}
|
|
/*归档部分*/
|
|
.blog-pigeonhole {
|
font-size: 15px;
|
}
|
|
.blog-pigeonhole-p {
|
width: 20%;
|
text-align: center;
|
line-height: 20px;
|
border-radius: 6px 6px 6px 6px;
|
/*background-color: #edf0f3;*/
|
margin-left: 3%;
|
margin-bottom: 3%;
|
opacity: 0.7;
|
}
|
|
.blog-pigeonhole-list {
|
line-height: 1.6;
|
padding-left: 3%;
|
padding-right: 3%;
|
/*display: flex; !*弹性盒子*!*/
|
/*justify-content: flex-end; !*在弹性盒对象的 <div> 元素中的各项周围留有空白：*!*/
|
|
display: flex;
|
display: -webkit-flex;
|
-webkit-justify-content: flex-start;
|
justify-content: flex-start;
|
|
flex-wrap: wrap; /*让弹性盒元素在必要的时候拆行：*/
|
align-content: flex-start;
|
-webkit-align-content: flex-start;
|
|
}
|
|
.blog-pigeonhole-item {
|
min-width: 22%;
|
margin-left: 1.5%;
|
margin-right: 1.5%;
|
margin-bottom: 5%;
|
}
|
|
.blog-pigeonhole-item a span:first-child {
|
height: 22px;
|
background-color: #edf0f3;
|
border-radius: 6px 6px 0 0;
|
opacity: .8;
|
color: #999aaa;
|
line-height: 22px;
|
margin-bottom: 1px;
|
text-align: center;
|
}
|
|
.blog-pigeonhole-item a span:last-child {
|
height: 22px;
|
background-color: #f6f8fa;
|
border-radius: 0 0 6px 6px;
|
color: #555666;
|
line-height: 20px;
|
font-weight: 600;
|
text-align: center;
|
}
|
|
.blog-pigeonhole-item span {
|
display: block;
|
}
|
|
/*文章部分*/
|
.blog-article {
|
margin-bottom: 20px;
|
border-radius: 15px;
|
border: none;
|
/*box-shadow: 1px 1px 5px 5px rgba(17, 150, 196, 0.35);*/
|
}
|
|
.article-meta {
|
padding: 30px 30px 10px;
|
background-color: white;
|
border-radius: 15px;
|
}
|
|
.article-title {
|
color: #555;
|
font-size: 25px;
|
padding-bottom: 15px;
|
margin-top: 0 !important;
|
display: block;
|
overflow: hidden;
|
white-space: nowrap;
|
text-overflow: ellipsis;
|
text-align: center;
|
}
|
|
.article-split-line {
|
width: 100%;
|
height: 2px;
|
overflow: hidden;
|
font-size: 0;
|
margin-top: 8px;
|
margin-bottom: 8px;
|
border-color: rgba(237, 241, 242, .6);
|
|
border-bottom: 1px solid rgba(222, 229, 231, .45);
|
display: block
|
}
|
|
.article-message-info {
|
text-align: center;
|
}
|
|
.article-message-info li {
|
display: inline-block;
|
padding-right: 5px;
|
padding-left: 5px;
|
}
|
|
.article-message-info li span {
|
padding-left: 0px;
|
}
|
|
.article-summary {
|
max-height: 200px;
|
overflow: hidden;
|
}
|
|
.article-summary p {
|
text-align: center;
|
}
|
|
.article-read-btn {
|
text-align: center;
|
display: block;
|
}
|
|
.btn {
|
display: inline-block;
|
padding: 0 20px;
|
color: #555;
|
background: #fff;
|
border: 2px solid #555;
|
text-decoration: none;
|
border-radius: 2px;
|
|
line-height: 2;
|
font-size: 14px;
|
overflow-wrap: break-word;
|
word-wrap: break-word;
|
cursor: pointer;
|
|
transition-property: background-color;
|
transition-duration: .2s;
|
transition-timing-function: ease-in-out;
|
transition-delay: 0s;
|
}
|
|
.btn:hover {
|
background: #262a30;
|
color: #fff;
|
}
|
|
/*文章图片部分*/
|
.item-thumb {
|
min-height: 250px;
|
position: relative;
|
display: block;
|
background-position: 50% 50%;
|
background-size: cover;
|
border-radius: 15px;
|
}
|
|
.item-thumb {
|
cursor: pointer;
|
transition: all 0.6s;
|
}
|
|
.item-thumb:hover {
|
transform: scale(1.05);
|
}
|
|
.item-thumb-small {
|
cursor: pointer;
|
transition: all 0.6s;
|
}
|
|
.item-thumb-small:hover {
|
transform: scale(1.05);
|
}
|
|
.blog-right-side-portion-title {
|
display: block;
|
font-size: 15px;
|
padding-bottom: 8px;
|
|
}
|
|
span.title-remark::after {
|
content: "(按字母索引)";
|
color: #999;
|
font-size: 10px;
|
}
|
|
.blog-right-side-exchange {
|
padding-top: 5px;
|
}
|
|
/*右边的部分*/
|
.blog-right-side-meta span {
|
/*word-break: keep-all;*/
|
/*word-wrap: break-word;*/
|
color: #999;
|
font-size: 13px;
|
display: block;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
|
white-space: nowrap; /* normal文本换行*/
|
|
word-break: keep-all;
|
transition-property: background-color;
|
transition-duration: .2s;
|
transition-timing-function: ease-in-out;
|
transition-delay: 0s;
|
}
|
|
div .blog-right-side-meta a span:hover {
|
background: #5FB878;
|
color: #fff;
|
white-space: normal;
|
word-break: break-word; /*可以换行 white-space CSS 属性是用来设置如何处理元素中的空白。*/
|
height: 20%;
|
z-index: 600;
|
}
|
