博客园样式修改
时间:2019-08-31
本文章向大家介绍博客园样式修改,主要包括博客园样式修改使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
1 在哪里修改?
进入自己的博客园,点击管理,再点击设置。共有
- 页面定制CSS代码
- 博客侧边栏公告(支持HTML代码)
- 页首Html代码
- 页脚Html代码
等几个地方输入自定义代码,可覆盖博客园已有的代码。
2 如何修改_页面定制CSS代码?
- 隐藏不需要的
1) 按f12或者右键审查页面元素,先在页面调试,然后将确定的css代码写入页面定制CSS代码输入框
举例说明:选中需要隐藏的元素,在控制台右侧style输入 display:none; 即可看到效果
2) 最终可以得到如下css样式,将其放入页面定制css代码框中,点击保存
#ad_t2 ,#ad_c1,#HistoryToday,#under_post_news,#ad_c2,#under_post_kb,.postSeparator,.dayTitle{ display:none; }
3 ) 效果如图
- 修改好看的样式
比如看到别人的博客园,有个心仪的样式
将css代码复制放到页面定制CSS代码的输入框保存即可
.comment_btn{ width: 100px; height: 35px; background: none; border: none; background-color: #545454; cursor: pointer; color: white; margin: 20px auto; display: inherit; }
查看结果
- 修改宽度
找到id为home的div,修改它的宽度即可
并且修改id为mainContent的宽度,调整与右侧公告的比例。自己调式达到最佳效果。
#home{ width: 77%; } #mainContent{ width: 900px; }
- 给日历添加背景,即下面的一到日都有个矩形的背景
先在网上自己找这个背景或者自己切成这样。在我们的博客里面保存
查看html元素即可查看图片链接。
.CalDayHeader { background: url(https://img2018.cnblogs.com/blog/1236245/201908/1236245-20190831161742818-689290357.gif) 50% 0 no-repeat; padding-bottom: 5px; }
参考
https://www.cnblogs.com/hongrunhui/p/5910374.html
https://www.cnblogs.com/Renyi-Fan/p/9090084.html#_label0
原文地址:https://www.cnblogs.com/S-Mustard/p/11438992.html
- 2016.06 第一周 群问题分享
- MongoDB - basic
- spring boot启用tomcat ssl
- HTTP status code
- jackson简单使用,对象转json,json转对象,json转list
- 2016.07 第3周 群问题分享
- jackson error 含义log
- java删除文件夹
- JSP自定义tag
- gradle中使用嵌入式(embedded) tomcat, debug 启动
- spring in action 4th --- quick start
- Date, TimeZone, MongoDB, java中date的时区问题
- spring boot 添加拦截器
- spring boot 部署为jar
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 玩树莓派(raspberry pi) 2/3 raspbian的遇到的一些问题
- Dnsmasq加速本地DNS请求
- swoole深入学习 2. tcp Server和tcp Client
- 一切皆Socket
- Go代码重构:23倍的性能爆增
- 分布式系统的一致性协议之 2PC 和 3PC
- Docker快速搭建WordPress博客网站
- Elasticsearch入门,这一篇就够了
- 玩转 lua in Redis
- 用docker快速搭建wordpress博客
- 生产环境优雅的重启基于Nginx、Tornado的Web服务进程
- nginx记录post body/payload数据 日志用打印出结果
- nginx的location、rewrite玩法详解
- Redis Lua脚本调试
- 安装elasticsearch 5.x, 6.x 常见问题(坑)的解决