昨天我将博客装修了一下,这个博客原先一直使用的是Scott Emmons写的主题,虽然有点不太喜欢,但是一直没有改动,除了没有舍得抽出时间,还有我审美太差怕越改越坏的缘故。不过昨天看到Mercury Reader
插件渲染的内容,感觉很不错,突然兴起了装修一下博客的想法。
底部固定
常见的方法是将footer部分设置为绝对位置,然后将bottom属性设置为0。这个博客原先采用的就是这种方式。然而这种方式由于底部固定不动,会导致视野变窄,尤其是在屏幕小的手机上,效果不好。以前知道另外一种footer高度固定,但是margin负值的方式,不过这种方式设置稍显复杂,不容易记住。检索了一遍,在依义不依语的博客发现了,代码如下:
<html>
<head>
<style type="text/css">
html,body{height:100%;margin:0;padding:0;}
.container{min-height:100%;}
.header{background-color: #ffe4c4;}
/* main的padding-bottom值要等于或大于footer的height值 */
.main{padding-bottom:100px;background-color: #bdb76b;}
/* margin-top(负值的)高度等于footer的height值 */
.footer{height:100px;margin-top:-100px;background-color: #ffc0cb;}
</style>
</head>
<body>
<div class="container">
<div class="header">header</div>
<div class="main">main content</div>
</div>
<div class="footer">footer</div>
</html>
注明:这里的所有的css定位代码都是要注意必不可少的。
移除sidebar部分
因为这个博客主要就是自己看看,感觉sidebar似乎也没有什么用,因此在default layout的基础上,将sidebar的代码删除,然后将container里边的栅格设置为12,但是感觉这样container在屏幕较大的电脑上显示太宽了,因此加了一个最大宽度限制。
.container{
max-width: 840px;
}
设置body背景和日志背景
原先的主题是背景为白色,内容为淡灰色,现在参考Mercury Reader
插件,颜色的设置正好相反了。
body{
background-color: #e9e9e9 !important;
}
article{
background-color: #f8f8f8 !important;
border: 1px solid #dbdbdb !important;
}
日志内边缘宽度
同时,将日志的内边缘宽度设置更大,但是由于手机的宽度本身很少,太大的margin会导致文本宽度太小,也不太好,因此设置了media查询属性。
<!-- 手机 -->
@media screen and (max-width: 750px) {
}
<!-- 电脑 -->
@media screen and (min-width: 750px) {
}
日志的字体
首先是将各级标题字体大小限制取消,然后将正文字体的大小设置为16px,并将正文的字体设置如下
body{
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Helvetica,sans-serif;
}
其他的一些杂项就是设置图片的margin,设置段落的margin等等,让整体的内容显得更加舒适一些。