html {
scroll-behavior: smooth; // 实现锚点平滑滚动
}
body {
background: #eee;
padding-top: 20px;
}
// 锚点
a[name="top"] {
position: absolute;
top: -20px;
}
// a标签颜色过渡
a {
transition: color 0.3s;
-moz-transition: color 0.3s;
-webkit-transition: color 0.3s;
-o-transition: color 0.3s;
}
// 变量声明
:root {
--hover-color:#ff410f;
}
a:link {
color: #969696;
text-decoration: none;
}
a:visited {
color: #969696;
text-decoration: none;
}
a:hover {
color: #ff410f;
color:var(--hover-color);
text-decoration: none;
}
// 首页随笔标题
.postTitle {
border-bottom: 0px solid #969696;
border-left: 0px solid #969696;
color: #969696;
display: inherit;
font-size: 18px;
font-weight: 700;
line-height: 1.5;
padding: 0;
}
.postTitle a:link,
.postTitle a:visited,
.postTitle a:active {
color: #4a4a4a;
font-family: -apple-system, SF UI Display, Arial, PingFang SC, Hiragino Sans GB, Microsoft YaHei, WenQuanYi Micro Hei, sans-serif;
}
.postTitle a:hover {
color: #ff410f;
color:var(--hover-color);
}
// 首页随笔摘要
.c_b_p_desc {
margin: 0 0 8px;
font-size: 13px;
line-height: 24px;
color: #999;
}
// 首页随笔页脚
.postDesc {
text-align: left;
}
// 日期发布模块
.dayTitle {
display: none;
}
.day {
padding: 15px 2px 20px 0px;
border-bottom: 1px solid #f0f0f0;
}
// 隐藏阅读全文
.c_b_p_desc_readmore {
display: none;
}
#p_b_follow a {
color: #ff410f;
color:var(--hover-color);
}
// 博客导航栏
#navigator {
background-color: #fff;
margin-top: 0px;
border-bottom: 1px solid #f0f0f0;
}
#navList {
margin-left:0;
}
#navList a:link,
#navList a:visited,
#navList a:active {
padding: 18px 20px;
font-size: 15px;
font-weight: 700;
color: #4a4a4a;
line-height: 25px;
}
#navList a:hover {
color: #ff410f;
color:var(--hover-color);
text-decoration: none;
}
#navList a {
margin: 0;
}
// 导航栏随笔信息
.blogStats {
float: right;
color: #999;
font-size: 13px;
padding-right: 20px;
line-height: 60px;
margin: 0;
visibility: visible;
text-align: center;
}
// 侧边栏
#sideBar {
background: #ffffff;
margin-left:800px;
}
#sideBarMain ul {
overflow: hidden;
}
#sideBarMain ul li {
float: left;
width: 40%;
}
#sideBarMain ul li a:hover {
color: #ff410f!important;
}
#sideBarMain ul li a {
font-size: 13px;
color: #999;
}
#sidebar_recentposts ul li,
#TopViewPostsBlock ul li,
#TopFeedbackPostsBlock {
width: 100%;
float: none;
}
// 侧边栏功能块
.sidebar-block {
border-bottom: 1px solid #f0f0f0;
}
// 侧边栏标题
.catListEssay h3,
.catListLink h3,
.catListNoteBook h3,
.catListTag h3,
.catListPostCategory h3,
.catListPostArchive h3,
.catListArticleArchive h3,
.catListImageCategory h3,
.mySearch h3,
.catListComment h3,
.catListView h3,
.catListFeedback h3,
#blog-sidecolumn .catListTitle,
.newsItem h3 {
background: #fff!important;
margin-bottom: 10px;
font-size: 14px;
color: #4a4a4a;
}
// 侧边栏公告
#blog-news p {
color: #ff410f;
color:var(--hover-color);
}
#profile_block {
color: #969696;
}
// 页脚信息
#footer {
color: #a3a3a3;
}
// 博客头部信息
.main-top {
margin: 0 auto;
width: 1100px;
box-sizing: border-box;
padding-left: 20px;
padding: 40px;
background: #FFF;
}
.main-top .avatar {
width: 80px;
height: 80px;
margin-left: -2px;
display: block;
margin: 0 auto;
}
.avatar img {
width: 100%;
height: 100%;
border: 1px solid #ddd;
border-radius: 50%;
}
.main-top .title .name {
display: inline;
font-size: 21px;
font-weight: 700;
vertical-align: middle;
color: #4a4a4a;
}
.main-top .title {
padding: 5px 0 0 0px;
text-align: center;
}
.info {
color: #999;
font-size: 13px;
font-weight: 700;
vertical-align: middle;
padding: 20px 0 0 0px;
text-align: center;
}
.fa {
padding: 0 2px 0 2px;
}
#topics .postTitle {
border-bottom: 0px;
}
#ad_t2,
#cnblogs_c1,
#under_post_news,
#cnblogs_c2,
#under_post_kb,
#blogTitle,
#sidebar_recentcomments {
display: none;
}
.pager {
color: #969696;
}
.pager a {
border: 0px solid #9aafe5;
}
div.commentform textarea {
padding: 0px;
width: 100%;
height: 80px;
font-size: 13px;
border: 1px solid #dcdcdc;
border-radius: 4px;
background-color: hsla(0, 0%, 71%, .1);
resize: none;
display: inline-block;
vertical-align: top;
outline-style: none;
}
#btn_comment_submit {
padding: .2em;
margin-top: .5em;
float: right;
width: 100px;
margin: 10px 0;
padding: 8px 18px;
font-size: 16px;
border: none;
border-radius: 20px;
color: #fff!important;
background-color: #3db922;
cursor: pointer;
outline: none;
display: block;
height: auto;
}
// 博客整体页面
#home {
width: 1100px;
}
// 随笔列表
#mainContent {
width: 800px;
}
#homepage_top_pager {
display: none;
}
#BlogPostCategory,
#BlogPostCategory>a {
color: #c8c8c8;
font-size: 12px;
}
#comment_nav {
display: none;
}
#commentbox_opt>a {
display: none;
}
#comment_form_container>div:first-child {
display: none;
}
.commentbox_title {
width: 100%;
}
#div_digg {
display: none;
}
#author_profile {
width: 100%;
background-color: hsla(0, 0%, 71%, .1);
border: 1px solid #e1e1e1;
border-radius: 4px;
font-size: 12px;
}
.author_avatar {
vertical-align: top;
float: left;
margin-right: 5px;
padding-top: 0px;
padding-left: 0px;
border: 0;
border: 1px solid #ddd;
border-radius: 50%;
}
#author_profile_info {
padding: 20px;
}
#author_profile_detail {
padding-left: 20px;
}
#author_profile_detail a {
color: #969696;
text-decoration: none;
}
#author_profile_detail a:first-child {
color: #333;
margin-right: 3px;
line-height: 1.8;
vertical-align: middle;
}
#commentform_title {
display: none;
}
#green_channel {
border: 0px;
}
#green_channel #green_channel_digg {
display: none;
}
#green_channel #green_channel_follow {
display: none;
}
#green_channel #green_channel_favorite {
display: none;
}
#green_channel {
width: 100%;
text-align: right;
}
#post_next_prev {
margin-bottom: 20px;
margin-top: 20px;
}
.postBody {
border-bottom: 1px solid #f0f0f0;
}
#topics .postDesc {
margin-top: 20px;
}
.commentbox_title_left {
display: none;
}
#tip_comment+p {
display: none;
}
#tip_comment2+p {
display: none;
}
.feedback_area_title {
color: #969696;
border-bottom: 1px solid #ccc;
}
.feedbackCon {
border-bottom: 1px solid #f0f0f0;
}
#cnblogs_post_body p {
font-size: 16px;
}
#cnblogs_post_body ul li {
font-size: 15px;
}
#author_profile_follow {
float: right;
padding-right: 30px;
padding-bottom: 10px;
}
#author_profile_follow a {
color: #969696;
text-decoration: none;
}
#widget_my_zzk .input_my_zzk {
border: 1px solid #999;
border-radius: 6px;
height: 1.7rem;
text-indent: 5px;
outline: none;
}
#btnZzk {
height: 30px;
background: #969696;
outline: none;
border: none;
border-radius: 6px;
font-size: 12px;
padding: 0 10px;
font-family: '微软雅黑';
cursor: pointer;
color: #FFF;
}
#btnZzk:hover {
background: #ff410f;
color:var(--hover-color);
}
// 回到顶部
#back-to-top {
bottom: 60px;
position: fixed;
right: 60px;
cursor: pointer;
}
#back-to-top a {
background: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1552995096957&di=a2c587673204f1689e65862bad685c25&imgtype=0&src=http%3A%2F%2Fku.90sjimg.com%2Felement_origin_min_pic%2F01%2F48%2F04%2F255744106a221a2.jpg) no-repeat left center;
display: block;
width: 50px;
height: 50px;
background-size: cover
}
// 随笔详情标题
#cnblogs_post_body h1,
#cnblogs_post_body h2,
#cnblogs_post_body h3,
#cnblogs_post_body h4,
#cnblogs_post_body h5,
#cnblogs_post_body h6 {
color: #ff410f;
color:var(--hover-color);
}
// 常用链接列表标题
#myposts .myposts_title,
#taglist_title {
font-size: 21px;
color: #4a4a4a;
}
// 常用链接列表
#myposts .PostList {
font-size: 14px;
margin: 0;
padding-top: 10px;
padding-bottom: 5px;
}
#myposts .postTitl2 {
width:100%;
}
// 随笔分类
.entrylistTitle,
.PostListTitle,
.thumbTitle {
color: #ff410f;
color:var(--hover-color);
text-align: center;
border-bottom: 0;
}
.entrylistPosttitle {
border-left: 5px solid #ff410f;
padding-bottom: 0;
line-height: 2em;
}
.entrylistPosttitle a {
color: #4a4a4a;
font-weight: 700;
font-size: 16px;
}
.entrylistItemPostDesc,
.entrylistItemPostDesc a:link,
.entrylistItemPostDesc a:visited,
.entrylistItemPostDesc a:active {
color:#a3a3a3;
}
.entrylistPosttitle a:hover,
.entrylistItemPostDesc a:hover {
color: #ff410f;
color:var(--hover-color);
}
// 改变滚动条
::-webkit-scrollbar {
width: 10px;
height: 4px;
background-color: #C0C0C0;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: #C0C0C0;
}
::-webkit-scrollbar-track {
background: #EEE;
}
::-webkit-scrollbar-track:hover {
background-color:#E0E0E0;
}
// 增加媒体查询
@media only screen and (max-width: 767px) {
body {
padding-top:0;
}
.main-top {
width:100%;
}
#home,
#mainContent {
width:auto;
}
#sideBar {
margin-left:0;
}
#back-to-top {
display:none;
}
}
