最后放个大招,我的 个人博客地址,是不是还可以啊!
贴上我的自定义样式代码如下:
// Custom styles.
//顶部条
.headband {
height: 0;
}
//背景图
body {
background-image: url(http://plbhkv0pr.bkt.clouddn.com/background.jpg);
background-attachment: fixed; // 不随屏幕滚动而滚动fixed,scroll,inherit
background-repeat: no-repeat; // 如果背景图不够屏幕大小则重复铺,改为no-repeat则表示不重复铺
background-size: cover; // contain等比例铺满屏幕 //cover拉伸铺满
background-position: bottom;//x,y轴调整
+mobile(){
//background-position: 0% -20%;
background-image: linear-gradient(90deg, #F79533 0%, #F37055 15%, #EF4E7B 30%, #A166AB 44%, #5073B8 58%, #1098AD 72%, #07B39B 86%, #6DBA82 100%);
}
}
//首部背景url(http://plbhkv0pr.bkt.clouddn.com/header.jpg)
//彩色linear-gradient(90deg, #F79533 0%, #F37055 15%, #EF4E7B 30%, #A166AB 44%, #5073B8 58%, #1098AD 72%, #07B39B 86%, #6DBA82 100%)
.site-meta {
height: 100px;
background-image: url(http://plbhkv0pr.bkt.clouddn.com/header.jpg);
background-size: cover;
}
//侧边栏信息样式修改
/*.links-of-blogroll-item {
padding: 0 8px;
background-color: #50842e;
border-radius: 4px;
}
.links-of-blogroll-item a {
color: #fff;
border-bottom: none;
display: inline;
}*/
//
.header-inner {
background: rgba(255,255,255,0.7)
border-radius: 10px;
}
//侧栏
.sidebar{
background: none;
border-radius: 10px;
}
.sidebar-inner {
padding: 10px 10px 10px;
background: rgba(255,255,255,0.7)
border-radius: 10px;
}
code {
color: #ff7600;
background: #fbf7f8;
margin: 2px;
}
// 大代码块的自定义样式
.highlight, pre {
margin: 5px 0;
padding: 5px;
border-radius: 3px;
}
.highlight, code, pre {
border: 1px solid #d6d6d6;
}
//夜间模式
.cover{
position:fixed;
top: 0px;
left: 0px;
outline:5000px solid rgba(0, 0, 0, 0);
z-index: 99999;
}
//沐目体
@font-face {
font-family: MMT;
src: url("/media/MMT_579767_SOAJ0_0.ttf");
}
@font-face {
font-family: STLiti;
src: url("/media/STLITI.TTF");
}
@font-face {
font-family: STXK;
src: url("/media/STXINGKA.TTF");
}
//输入框美化
input {
border: 1px solid #ccc;
padding: 5px 0px;
border-radius: 3px;
padding-left: 5px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow
ease-in-out .15s;
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out
.15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s
}
input:focus {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px
rgba(102, 175, 233, .6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px
rgba(102, 175, 233, .6)
}
//文章页内标签样式
.posts-expand .post-tags {
margin: 40px 10px 0 10px;
text-align: right;
}
.posts-expand .post-tags a {
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
font-family: 'Comic Sans MS', sans-serif;
transition: 0.2s ease-out;
padding: 3px 5px;
margin: 5px;
background: #eee;
border-bottom: none;
border-radius: 15px;
&:hover {
background: rgba(100,154,182,0.902);
color: #fff;
-webkit-box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
-moz-box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
}
.tag-cloud a {
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
transition: 0.2s ease-out;
padding: 2px 10px;
margin: 8px;
background: #eee;
border-bottom: none;
border-radius: 12px;
&:hover {
text-decoration: none;
background: rgba(100,154,182,0.902);
color: #fff !important;
-webkit-box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
-moz-box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
}
//文章标题
.posts-expand .post-title {
font-size: 21px
border-left: #649ab6 2px solid;
font-weight: bold;
padding-left: 10px;
}
.posts-expand .post-title, .posts-expand .post-meta {
text-align: left;
}
.page-post-detail .post-title, .page-post-detail .post-meta {
text-align: center;
border-left: none;
padding-left: 0;
}
.posts-expand .post-title-link{
line-height: 1.5;
}
//修改默认按钮样式#bdc3c7
.post-button {
text-align: right;
}
.btn {
padding: 3px 15px
color: #000 !important;
background-color: #fff;
border: 0px;
border-radius: 15px;
&:hover {
color: #fff !important;
background: #34495e;
text-decoration: none !important;
}
}
//页码栏
.pagination, .pagination .prev, .pagination .next, .pagination .page-number {
border:none;
}
.pagination .page-number.current {
border-radius: 14px;
background: #34495e;
}
.pagination {
margin: 60px 0 20px;
}
//去掉图片边框
.posts-expand .post-body img {
border: 0px;
}
//文章样式修改
.content-wrap {
border-radius: 10px;
+mobile(){
border-radius: 0px;
}
}
// 文章内链接文本样式
.post-body p a{
color: #7B68EE;
border-bottom: none;
border-bottom: 1px solid #0593d3;
&:hover {
color: #fc6423;
border-bottom: none;
border-bottom: 1px solid #fc6423;
}
}
//文章阴影
.post, .page, .post-block {
margin-bottom: 40px;
padding: 20px 20px 20px;
-webkit-box-shadow: 0 0 14px #cacbcb;
-moz-box-shadow: 0 0 14px #cacbcb;
box-shadow: 0 0 14px #cacbcb;
background: rgba(255,255,255,0.6)
border-radius: 10px;
+mobile(){
margin-bottom: 0px;
padding: 0px 0px 0px;
-webkit-box-shadow: 0 0 0px rgba(255,255,255,0);
-moz-box-shadow: 0 0 0px rgba(255,255,255,0);
box-shadow: 0 0 0px rgba(255,255,255,0);
background: rgba(255,255,255,0)
border-radius: 0px;
}
}
.posts-expand .post-eof {
display: block;
margin: 0px auto 30px;
width: 0;
}
//评论区
.comments{
padding: 20px 20px 20px;
-webkit-box-shadow: 0 0 14px #cacbcb;
-moz-box-shadow: 0 0 14px #cacbcb;
box-shadow: 0 0 14px #cacbcb;
background: rgba(255,255,255,0.7);
margin: 0;
border-radius: 10px;
+mobile(){
margin-bottom: 0px;
padding: 0px 0px 0px;
-webkit-box-shadow: 0 0 0px rgba(255,255,255,0);
-moz-box-shadow: 0 0 0px rgba(255,255,255,0);
box-shadow: 0 0 0px rgba(255,255,255,0);
background: rgba(255,255,255,0)
border-radius: 0px;
}
}