[4]Hexo静态博客背景及界面显示优化配置
示例预览:我的主页
前提预设:
【3】hexo+github搭建个人博客的主题配置
【2】hexo+github搭建个人博客的简单使用
【1】hexo+github搭建个人博客的过程记录
背景图片添加
自动切换背景
静态本地背景
首先将已选定的背景图片放到博客根目录下的\source\images下
示例:
D:\Blog\source\images\background.jpg
其次,打开配置文件:
D:\Blog\themes\next\source\css\_custom\custom.styl
// Custom styles.
body {
background-image: url(/images/background.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
}
界面显示优化
在上面打开的配置文件body{}中继续添加以下配置;(D:\Blog\themes\next\source\css\_custom\custom.styl
)
```stylus
// Custom styles.
body {
background-image: url(/images/background.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
//改变背景色和透明度等
.main-inner {
background: #fff;
padding: 25px;
opacity: 0.75;
border-radius: 10px;
}
//修改头部导航栏显示宽度,透明度,位置等
#header {
padding: 5px 25px;
margin: 0 auto;
margin-top:15px;
width: 700px;
opacity: 0.8;
border-radius: 10px;
}
//修改底部展示信息显示宽度,透明度,位置等
#footer {
padding: 5px 25px;
position: relative;
margin: 0 auto;
margin-bottom: 5px;
width: 700px;
opacity: 0.8;
border-radius: 10px;
}
}
```
此时,修改完上面的配置可能会发现首页博客主体部分的下方与底部展示信息的间隙过大,我们加入以下配置进行调整,需要注意的是,此时添加的配置与上方添加位置不同,需要在body{}下方添加;
body .main {
margin-bottom: 45px;
}
完整配置如下:
// Custom styles.
body {
background-image: url(/images/background.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
//改变背景色和透明度
.main-inner {
background: #fff;
padding: 25px;
opacity: 0.75;
border-radius: 10px;
}
#header {
padding: 5px 25px;
margin: 0 auto;
margin-top:15px;
width: 700px;
opacity: 0.8;
border-radius: 10px;
}
#footer {
padding: 5px 25px;
position: relative;
margin: 0 auto;
margin-bottom: 5px;
width: 700px;
opacity: 0.8;
border-radius: 10px;
}
}
body .main {
margin-bottom: 45px;
}
[4]Hexo静态博客背景及界面显示优化配置的更多相关文章
- 五、Hexo静态博客背景及界面显示优化配置
示例预览:我的主页 背景图片添加 自动切换背景 静态本地背景 首先将已选定的背景图片放到博客根目录下的\source\images下 示例:D:\Blog\source\images\backgr ...
- [5]Hexo静态博客绑定域名及域名解析
示例: http://zsy.xyz/ 前提预设:[4]Hexo静态博客背景及界面显示优化配置 [3]hexo+github搭建个人博客的主题配置 [2]hexo+github搭建个人博客的简单使用 ...
- 开发小白也毫无压力的hexo静态博客建站全攻略 - 躺坑后亲诉心路历程
目录 基本原理 方法1 - 本机Windows下建站 (力荐) 下载安装node.js 用管理员权限打开命令行,安装hexo-cli和hexo 下载安装git 初始化hexo 使用hexo gener ...
- 在hexo静态博客中利用d3-cloud来展现标签云
效果: http://lucyhao.com/tags/ hexo自带的tag cloud的标签展现不太美观,想能够展现出“云”效果的标签.在网上找到了d3-cloud这个项目,github地址:ht ...
- 在windows下创建基于github的hexo静态博客
最近边上的人都突然买起了域名搭起了个人网站,渣渣的我介于期末没事干也跟风搭了个静态博客.虽说博客基本不更新T T,嘛嘛回归正题. 首先准备工作: 1)安装nodejs 2)安装msysgit(虽然现在 ...
- 搭建hexo静态博客
使用hexo搭建博客,并将博客部署到github 需要的工具 Node.js Git 一个Github账号 正式开始 在任意目录下新建一个文件夹,如blog,在该文件夹下右键打开git bash he ...
- Hexo静态博客搭建教程
Hexo是一个快速.简洁且高效的博客框架.Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页.生成静态网页可以托管在github.下面简单介绍一下he ...
- Hexo 静态博客指南:建站教程(上)
本文最初发布于我的个人博客Bambrow's Blog,采用 BY-NC-SA 许可协议,转载请注明出处.若有后续更新,将更新于原博客.欢迎去我的博客阅读更多文章! 本文详细记录一下站点建立过程,以便 ...
- 复活hexo静态博客的方法
我的个人博客http://webhmy.com/是通过hexo搭建的,它支持图片显示,支持md,无需主机空间,可以满足我的大部分需求.但是在2年的使用的过程中遇到一些问题,这里记录下来.便于下次快速复 ...
随机推荐
- python基础编程——类和实例
在了解类和实例之前,需要先了解什么是面向对象,什么又是面向过程.面向过程是以过程为中心实现一步步操作(相互调用,类似流水线思想):面向对象是以事物为中心,某个事物可以拥有自己的多个行为,而另一个事物也 ...
- Android源码分析(六)-----蓝牙Bluetooth源码目录分析
一 :Bluetooth 的设置应用 packages\apps\Settings\src\com\android\settings\bluetooth* 蓝牙设置应用及设置参数,蓝牙状态,蓝牙设备等 ...
- 如何使用 Set 来提高JS代码的性能
摘要: 高效使用Set! 作者:前端小智 原文:如何使用 Set 来提高代码的性能 Fundebug经授权转载,版权归原作者所有. 为了保证的可读性,本文采用意译而非直译. 我确信有很多开发人员坚持使 ...
- 【Git版本控制】Idea中设置Git忽略对某些文件的版本追踪
在Idea中有些本地文件无需与远程库同步,仅是本地使用.此时就需要将这些文件加入到Git的版本忽略中来. 设置步骤 1.搜索插件 .ignore,并安装 2.增加.gitignore文件 3.配置相应 ...
- JVM 对象查询语言(OQL)[转载]
最近生产环境出现一个很奇怪的问题,测试环境无法重现,本地直连生产无法重现.于是用上 jmap + Java VisualVM 的 OQL (Object Query Language) 分析问题. 关 ...
- 快速、优雅的前端IDE之H-builder-X
为什么介绍的是HBuidler-X而不是Hbuilder HX是全新的一个软件,它抛弃了eclipse架构,使用C++为基础架构.HX目前还不能完全替代HBuilder.但在markdown记事的 ...
- UGUI 逻辑以及实用性辅助功能
UGUI 有它的实用性, 可是也存在理解上的困难, 因为它在面板上的显示内容根据布局而变动, 如果不深入理解它的设计原理, 估计每次要进行程序上的修改都需要进行一次换算和测试过程. 1. 设置某UI的 ...
- USB摄像头驱动框架分析
usb摄像头驱动程序,里面涉及硬件的操作.比如说,想设置亮度的时候,需要把亮度的参数发给硬件.去得到真正视频数据的时候,需要访问硬件得到数据.usb摄像头驱动程序框架与虚拟摄像头驱动程序的框架是一样的 ...
- HTTP 2.0 之压测工具 Jmeter
年后,德国总部工业平台要做中国本地化,德国的同事过来给我们展示日志的时候,无意间看到了他们应用日志里的 HTTP/2,下意识到,原来他们都已经提供Http 2.0的服务了. 那么问题来了,除了h2lo ...
- 201871010101-陈来弟《面向对象程序设计(JAVA)》 第13周学习总结
201871010101-陈来弟<面向对象程序设计(JAVA)> 第13周学习总结 实验十一 图形界面事件处理技术 实验时间 2019-11-22 第一部分:理论知识 一.事件处理 1.事 ...