hexo自定义css样式 |
您所在的位置：网站首页 › 苹果手机主题自定义在哪里 › hexo自定义css样式 |
|
文章目录
自定义CSS部分
彩色标签
心形转动分类
底栏修改
配置文件解释
站点配置文件
主题配置文件
个人博客
https://www.renke666.top
尽管在配置文件中做了修改美化了博客，但原有样式还是比较简陋，修改的话就需要自定义CSS样式。这也算是美化博客的一大步进展吧，踩了很多坑。 这篇算是博客的美化部分暂时完结之作，花了很多的精力去美化，整体从十二月初断断续续的忙，寒假初期忙了会也算是忙了有两个月吧。果然写博客不是关键，捣鼓才是关键，中间还是学到挺多也挺值得的。然而慢慢捣鼓发现还有很多很多新鲜神奇的东西，目前也没有太多时间，暂且放一边。以后就专心写点东西放上来了，在电脑上写有时东西一多一乱就不好找，这下也算有个地方可以聚合一下。 首先需要HTML+CSS+JS基础，在修改样式时参考了很多博客好的样式，也学到了很多，中间踩了很多坑，基础很关键。回顾前面的美化过程其实走了很多弯路，最好是在有基础的情况下，然后把配置文件详细搞清楚，再大概了解\themes\next\layout部分的.swig文件的具体格式和用法就能完成的很快，且可以较轻松的自定义各布局。 新版本的hexo自定义CSS需要在\themes\next\source\css\main.styl中// Custom Layer之后也就是最后增加自己自定义的CSS 写HTML和CSS用IntelliJ IDEA很好，还可以写java，学生免费。 swig介绍 https://www.jianshu.com/p/c5d333e6353c 自定义CSS部分参考https://www.cnblogs.com/LyShark/p/11834144.html，感谢这篇使我入门 /* *** 全局部分美化 ** */ body { // background:url(https://source.unsplash.com/random/1600x900); // background:url(/images/background4.jpg); // background:url(https://blog.maplesugar.space/uploads/body-bg-3.jpg); background-repeat: no-repeat; background-attachment:fixed; background-position:50% 50%; background-color: white; //background:#FFFFFF; // 添加背景颜色 } // 菜单栏 .header-inner { // box-shadow: 1px 1px 8px 2px rgba(179,22,132,0.15); // border: solid #a166ab 2px;// 菜单栏 border-radius: 15px; // 圆角边框 box-shadow: 0 1px 2px 0px rgba(0,0,0,0.1), 0 2px 4px 0px rgba(0,0,0,0.1); margin-top: 10px; // 露出全部 width: 270px !important; // 自定义头像栏的宽度 background: rgba(255,255,255,0.9); // 增加透明度 // 增加透明度 } .header-inner:hover{ // box-shadow:1px 1px 8px 4px rgba(185,43,232,0.4); transition-property: all; transition-duration: 0.3s; transition-timing-function: ease; transition-delay: 0s; box-shadow:0 2px 4px 0px rgba(0,0,0,0.1), 0 4px 8px 0px rgba(0,0,0,0.1), 0 8px 16px 0px rgba(0,0,0,0.1), 0 16px 32px 0px rgba(0,0,0,0.1) !important; } // 头像栏 .sidebar-inner { // border: solid wheat 2px // box-shadow: 0 0 20px antiquewhite; border-radius: 15px; position: absolute; overflow: hidden; width: 270px; // 自定义侧边栏的宽度 box-shadow: 0 1px 2px 0px rgba(0,0,0,0.1), 0 2px 4px 0px rgba(0,0,0,0.1); background: rgba(255,255,255,0.9); // 增加透明度 } .sidebar-inner:hover{ // box-shadow: 1px 1px 8px 5px rgba(232,167,78,0.5); color: antiquewhite transition-property: all; transition-duration: 0.3s; transition-timing-function: ease; transition-delay: 0s; box-shadow:0 2px 4px 0px rgba(0,0,0,0.1), 0 4px 8px 0px rgba(0,0,0,0.1), 0 8px 16px 0px rgba(0,0,0,0.1), 0 16px 32px 0px rgba(0,0,0,0.1) !important; } // 主文章页面 .post-block { // 主文章页面 border-radius: 15px !important; box-shadow: 0 1px 2px 0px rgba(0,0,0,0.1), 0 2px 4px 0px rgba(0,0,0,0.1) // 覆盖 margin-top: 10px; // 露出全部 margin-bottom: 20px; // border: solid rgba(180,255,0,0.6) 2px; padding: 30px 20px 20px 30px; // 上右下左 background: rgba(255,255,255,0.9); // 增加透明度 } .post-block:hover{ transition-property: all; transition-duration: 0.3s; transition-timing-function: ease; transition-delay: 0s; box-shadow:0 2px 4px 0px rgba(0,0,0,0.1), 0 4px 8px 0px rgba(0,0,0,0.1), 0 8px 16px 0px rgba(0,0,0,0.1), 0 16px 32px 0px rgba(0,0,0,0.1) !important; } .post-block.home:hover{ transform: scale(1.02); } // 后面的文章 #posts > article + article .post-block { // 后面的文章 border-radius: 15px; box-shadow: 1px 2px 8px 4px rgba(0,0,0,0.15); background: rgba(255,255,255,0.9); // 增加透明度 } // 页面分页 .pagination { // 页面分页 border-radius: 15px; // 扁平化,两边非对称 box-shadow: 1px 2px 8px 4px rgba(0,0,0,0.15); background: rgba(255,255,255,0.9); // 增加透明度 } .pagination:hover{ transition-property: all; transition-duration: 0.3s; transition-timing-function: ease; transition-delay: 0s; box-shadow:0 2px 4px 0px rgba(0,0,0,0.1), 0 4px 8px 0px rgba(0,0,0,0.1), 0 8px 16px 0px rgba(0,0,0,0.1), 0 16px 32px 0px rgba(0,0,0,0.1) !important; } // valine评论页 .comments{ border-radius: 15px; box-shadow: 0 1px 2px 0px rgba(0,0,0,0.1), 0 2px 4px 0px rgba(0,0,0,0.1); background: rgba(255,255,255,0.9); } .comments:hover { transition-property: all; transition-duration: 0.3s; transition-timing-function: ease; transition-delay: 0s; box-shadow:0 2px 4px 0px rgba(0,0,0,0.1), 0 4px 8px 0px rgba(0,0,0,0.1), 0 8px 16px 0px rgba(0,0,0,0.1), 0 16px 32px 0px rgba(0,0,0,0.1) !important; } // 悬浮在头部菜单栏时显示白色 .menu-item-active a, .menu .menu-item a:hover, .menu .menu-item span.exturl:hover { background: #f9f9f99e; // 首页菜单选中后,变成淡白色. } // 设置内容区的宽度 .content-wrap { width: calc(100% - 300px); } @media (max-width: 767px) { .content-wrap { padding: $content-mobile-padding; width: 100%; } } // 返回顶部标志设为圆形 .back-to-top.back-to-top-on { bottom: 30px; border-radius: 10px; } // 侧边栏个人信息 .site-author-image{ max-width: 150px; width: 135px; } // 侧边栏图标间距 .links-of-author-item a, .links-of-author-item span.exturl{ padding: 0 10px; } /* ** 文章内容美化 *** */ // 文章字体设为高级的灰色 .post-body { color: #333; } // Code部分美化 code { padding: 2px 4px; word-wrap: break-word; color: #ff7600; background: #fbf7f8; border-radius: 3px; font-size: 15px; font-weight: 500; } // 下划线美化 hr { background-color: #86dca3; } // 去掉图片的边框,显得更加自然 .posts-expand .post-body img { border: 1px #6f42c1; } // 鼠标选择的段落变成黄色 ::selection { background-color: #59ff83; color: #555; } // 对页面文章的美化 .posts-expand .home .post-title { font-size: 1.2em; text-align: left; border-left: #7fb8ee 8px solid; padding-left: 12px; } .post-title { font-weight: 900!important; } .posts-expand .home .post-meta{ text-align: left; margin: 8px 0 15px!important; } .post-button{ text-align: right; margin-top: 0; } // 文章底部标签样式 .posts-expand .post-tags a { -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24); -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24); box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24); font-family: 'Comic Sans MS', sans-serif; transition: .2s ease-out; padding: 3px 10px; margin: 5px; background: #f5f5f5; border-bottom: none; border-radius: 15px; +mobile() { padding: 1px 3px; font-size: 8px; } &:hover { background: #34495e; 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); } } // 阅读全文按钮美化 .btn { padding: 3px 15px; color: #34495e!important; box-shadow: 0 0 0 1px #34495e; border: 1px; border-radius: 15px; position: relative!important; text-decoration: none!important; transition: color .3s ease-in-out; display: inline-block; line-height: 2; } .btn:hover{ color: #fff!important border-color: #222; background: #34495e; } // 修改代码块mac-panel上方颜色 .highlight-container{ background: #7fb8ee } // 光标放到文章列表上面的时候,会变成彩色 .posts-expand .post-title-link::before { background-image: linear-gradient(90deg,#a166ab 0,#ef4e7b 25%,#f37055 50%,#ef4e7b 75%,#a166ab 100%); } // 文章分类页面中,标签的颜色属性. .category-list a{ color:#6f42c1; } // 调整段落间距 p { margin: 0 0 10px 0; } // 顶部进度条隐藏 .headband { height: 0px; background: #fc6423; } /* *** 滚动条美化 ** */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-button { width: 0; height: 0; } ::-webkit-scrollbar-button:start:increment,::-webkit-scrollbar-button:end:decrement { display: none; } ::-webkit-scrollbar-corner { display: block; } ::-webkit-scrollbar-thumb { // border-radius: 8px; background-color: rgba(0,0,0,.2); } ::-webkit-scrollbar-thumb:hover { // border-radius: 8px; background-color: rgba(127,184,238,.5); } ::-webkit-scrollbar-track,::-webkit-scrollbar-thumb { border-right: 1px solid transparent; border-left: 1px solid transparent; } //::-webkit-scrollbar-track:hover { // 按住滚动条时悬浮的样式 // background-color: rgba(0,0,0,.15); //} ::-webkit-scrollbar-button:start { width: 10px; height: 10px; /*background: url(../images/scrollbar_arrow.png) no-repeat 0 0;*/ /*可以添加滚动条样式*/ } /* *** 归档部分美化 ** */ // 改变归档竖线彩带效果 .posts-collapse::before { background: linear-gradient(180deg,#f79533 0,#f37055 15%,#ef4e7b 30%,#a166ab 44%,#5073b8 58%,#1098ad 72%,#07b39b 86%,#6dba82 100%); opacity: 0.3 } .page-archive .posts-collapse .archive-move-on{ background-color: #fc6423; } // 改变归档彩球颜色 .posts-collapse .collection-title::before{ background-color: #fc6423; } .posts-collapse .collection-year::before{ background-color: blueviolet } .posts-collapse .post-header::before { background-color: gray; opacity: 0; } // 改变归档日期颜色以及发布内容部分 .posts-collapse .post-meta { color: #5073b8; font-weight: 900; } .posts-collapse .post-title { margin-left: 5px; } // 设置归档方框美化 .posts-collapse .post-header { position: relative; box-shadow: 0 1px 3px #6f42c100, 0 0px 6px #6f42c1; padding: 2px 10px; margin: 8px; border-bottom: none; border-radius: 10px; width: 85%; } .posts-collapse .post-header:hover{ transition-duration: 0.2s; transition-timing-function: ease-in-out; transition-delay: 0s; transition-property: inherit; box-shadow: 0 1px 3px #6f42c100, 0 0px 17px 2px #6f42c1; trans |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |