注册博客园账号有一个多月了, 一切都很好, 但就一直觉得自己的博客页面比较老土. 在首页浏览时候发现一位博主的页面挺干净整洁的, 而且他分享了制作的思路, 于是下定决心美化一番. 本文将介绍美化的思路, 并贴上所有代码, 俗话说授之以鱼也要授之以渔.
markdown
的显示了. 第一次接触markdown
是在注册完github创建一个新仓库的时候, 写readme
必须得用markdown
写, 当时就觉得怎么有这么好看的排版.markdown
写博客, 点完发布回头一看...???...markdown
的变种, 也能凑合着用就没管了.markdown
其实是使文字通过某种css
样式美化后显示出来而已, 既然这样, 我们可以自己修改markdown
的显示样式.css
样式进行修改. (博主是后端方向, 也没记得几个css样式, 基本都是边查边改哈)css
样式后, 把他复制到页面定制css代码
栏中, 可以通过我的博客->管理->设置
找到该栏.本博客制作这种特效目前有三种思路:
div
容器的宽高发生改变css
代码如下:#header #navigator ul li { float: left; width: 13%; /*div原来的宽度为13%*/ text-align: center; margin-right: 0px; background: #9e9e9e14; transition: width 0.5s; /*css3中引入的过渡功能, 意思是width属性将会发生变化, 变化时间为0.5秒*/ -moz-transition: width 0.5s; /*后面几个意思一样, 多写几个为了兼容不同的浏览器*/ -webkit-transition: width 0.5s; -o-transition: width 0.5s; } #header #navigator ul li:hover { /*hover即为鼠标停留时的样式*/ width: 20%; /*宽度变为20%*/ }
font-size
发生变化
.posttitle, .entrylistposttitle { font-family: "lato", helvetica neue, helvetica, arial, sans-serif; font-size: 1.8em; padding: 20px 20px 15px 0px; background: #fff; border-radius: 10px 10px 0px 0px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: font-size 0.5s; /*这里改变的是字体的大小*/ -moz-transition: font-size 0.5s; -webkit-transition: font-size 0.5s; -o-transition: font-size 0.5s; } .posttitle:hover { font-size: 2em; }
.search, .newsitem, .catlistpostcategory, .catlistpostarchive, .catlisttag, .catlistview, .catlistblogrank { background: #fff; margin-bottom: 30px; word-wrap: break-word; border-radius: 10px; margin-top: 10px; border: 2px solid #9e9e9e; transition: box-shadow 0.5s; -moz-transition: box-shadow 0.5s; -webkit-transition: box-shadow 0.5s; -o-transition: box-shadow 0.5s; } /*添加阴影*/ .newsitem:hover, .catlistpostcategory:hover, .catlistpostarchive:hover, .catlisttag:hover, .catlistview:hover, .catlistblogrank:hover { /* border: 5px solid; */ box-shadow: 10px 10px 10px #9e9e9e; }
github
标签. (如果你打算使用这套模板, 别忘了在页首的html代码中把github
地址修改为自己的github
)
个人博客页面->管理->设置
中禁用模板默认css, 然后把各部分代码复制到相应的地方即可.js
代码生效你需要申请代码权限.
如对本文有疑问, 点击进行留言回复!!
网友评论