博客园自定义——关于自己博客样式的自定义
2017-02-06 16:37
489 查看
声明
博客样式仅供参考,如需帮助请与我联系。全局样式
首先选用的是博客园自带的皮肤样式 bulesky,选项为
然后将样式自定义 如字体颜色大小,页面定位等等。
如下是页面样式CSS:
#ad_t2,#under_post_news,#under_post_kb,#HistoryToday,#ad_c1,#ad_c2{ display: none; } #header { position: fixed; top: 0; left: 0; right: 0; z-index: 2; } #main { margin-top: 40px; } body { font-size: 15px; font-family:"微软雅黑"; } #cnblogs_post_body h2 { background: none repeat scroll 0% 0% rgb(216, 216, 216); border-radius: 6px 6px 6px 6px; color: rgb(102, 102, 102); font-family:"Comic Sans MS","微软雅黑"; font-size: 17px; margin: 15px 0px !important; padding: 5px 0px 5px 20px; } .post { background-color: #ffffff; } #cnblogs_post_body p>img { -webkit-box-shadow: 0 0 20px 5px #dadada; -moz-box-shadow: 0 0 20px 5px #dadada; box-shadow: 0 0 20px 5px #dadada; margin: 20px; } #tbCommentBody { width: 95%; height: 100px; } h4{ background-color: #f1f1f3; margin: 0 -32px; padding: 0 32px; color: red; } #navigator, #blogTitle, #main, #footer { width: 1200px; } #mainContent { width: 965px; } #cnblogs_post_body img { max-width: 850px; } .forFlow img { max-width: 80%; } .postBody blockquote, .postCon blockquote { border-left-style: inset; border-left-width: 4px; border-left-color: #16a89d; background: #f1f1f3; margin-top: 20px; } #page_begin_html{ position: fixed; z-index: 99999; } .motto{ margin-top: 20px; margin-bottom: 20px; color: #F77908; font-size: 14px; text-align: center; }
侧公告栏
添加了一张图片以及一句座右铭。图片添加方式为 上传一张照片到相册利用其地址进行添加。
<div><img src="http://images.cnblogs.com/cnblogs_com/lixu880/943505/o_icon.png" alt="logo" width="200px" height="200px"><div> <p class="motto">热爱学习,天天向上。</p>
页首
自定义一些导航。<script> //导航 $("#navList").append("<li><a class='menu' href='http://www.cnblogs.com/lixu880/p/6368627.html'>读书</a></li>"); $("#navList").append("<li><a class='menu' href='https://github.com/lixu.html'>Github</a></li>"); $("#navList").append("<li><a class='menu' href='http://www.cnblogs.com/lixu880/p/6368789.html'>关于我</a></li>"); </script>
页尾
添加一个返回顶部的超链接。<a href="###" id="returnTop" style="bottom: 10px;position: fixed;right: 10px;font-size: 16px;">returnTop</a> <script> $(function(){ $('#returnTop').click(function () { $('html,body').animate({ scrollTop: '0px' }, 800); returnfalse; }); }); </script>
最后
希望大家打造出一个自己喜欢的具有个性的博客相关文章推荐
- 自定义自己的博客园博客首页
- 一步步开发自己的博客 .NET版 剧终篇(6、响应式布局 和 自定义样式)
- 终于找到了自己喜欢的博客样式
- 刚在博客园申请到自己的博客
- 关于自定义CEdit控件的样式
- 自己动手美化博客园个人博客
- 【翻译加转载】自己开发Blog博客程序:关于MetaWeblogAPI 的实现
- 关于建立自己的网上留言板(也就是所谓的博客)
- 折腾自己的博客样式,自适应两列布局
- 关于自己博客数量的检查及对博客的一点见解
- 看了水兄的关于字符串处理的2005方法,很好,就是没看懂,最后把相关知识帖了,放进我的博客里,供自己和大家学习。
- 测试CSDN博客是否支持自定义文本样式
- 博客园首页的博客列表 与 自己首页的排名为什么不一致?
- 谁来代替博客园 -- 怎样提高自己博客的访问量
- 关于自己博客文章的说明
- 自定义CSDN博客CSS样式
- 自己开发Blog博客程序:关于MetaWeblogAPI 的实现
- 关于博客页面样式的一点想法
- 终于在博客园里申请了自己的博客
- 本博客自定义样式表单大揭秘