博客开通(附本博客样式)

博客于今日开通,在这网络资源日益丰富的年代,曾经在这里得到了许多宝贵的资料以及众多经验。想想也该到了分享心得的阶段了,顺便记录下成长的经历,共勉。


以下为2017/06/26更新内容:

我的博客园界面打造流程

  • 选择皮肤CodeingLife
  • 修改样式(后台设置样式代码如下)

页面定制CSS代码

/*****调整原有博客页面元素高度位置等等*****/
#blogTitle {
    height: 0px;
}
#blogTitle h1 {
    font-size: 0px;
}
#blogTitle h2 {
    font-size: 0px;
}
#navigator {
    height: 50px;
        width:100%;/*用于适应各种大小的设备*/
}
#navList {
    min-height: 50px;
        margin: 10px 0 0 20px;
        width:100%;/*用于适应各种大小的设备*/
}
#navList li {
    float: left;
    line-height: 27px;
}
#navList a {
    padding: 0 10px;
        font-size: 23px;
}
body {
background: #D2E8F8
}
/*****导航菜单鼠标悬停透明*****/
#navList a:hover {
    background-color: #00000000;/*背景透明*/
    color: #FF5E52;/*字体颜色*/
}

#mainContent {
    width: 74%;
    margin: 0 0 0 2%;
}

#sideBar {       
    margin: 0 0 0 15px;
        width: 22%;
}

/*****自定义日期栏*****/
#blog-calendar .Cal, #calendar .Cal {
    line-height: 1.5em;
    border-top: 8px solid #f33324;
    background: #fff;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

/*****边侧栏整体宽度*****/
.sidebar-block {
}

/*****自定义公告栏的CSS*****/
#profile_block_my:hover {   
    border: 1px solid #ff5e52;
}
#profile_block_my {   
    background: #fff;   
    padding: 20px;   
    color: #7e8c8d;    
    font-size: 13px;   
    line-height: 1.8;    
    margin-top: 0 !important;    
    border: 1px solid #dedede;
}
#profile_block_my {  
    margin-top: 5px;    
    line-height: 1.5;    
    text-align: left;
}

.sidebar-block h3 {    
    padding: 2px 12px;
}



/*****“找找看”文本键入框宽度*****/
#widget_my_zzk {
    padding: 1px 0 1px 1px;
    border-left: 1px solid #dedede;
    border-right: 1px solid #dedede;
    margin: 0 !important;
}
#sidebar_search_box input[type="text"] {
    width: 61.3%;
}

/*****“蓝色底标签的高度调整*****/
.catListTitle {   
    padding: 1px 20px;
}



/*****“使随笔档案等边框栏目内容更为紧凑*****/
.sidebar-block ul li {
    padding: 0px 12px 0px 12px;
}

/*****广告的背景设置为与底色背景一致*****/
#under_post_news {
    background-color: #D2E8F8;
}
#under_post_kb {
    background-color: #D2E8F8;
}

/*****一键返回顶部*****/
#back-to-top {
    background-color: #FF5E52;
    bottom: 0;
    box-shadow: 0 0 6px #FF5E52;
    color: #fff;
    padding: 10px 7px;
    position: fixed;
    right: 0px;
    cursor: pointer;
}
a:hover {
    color: #fff;
}

侧边栏公告(支持HTML代码)(支持JS代码)

<!-- 删除原有的profile_block -->
<script>
var parent=document.getElementById("blog-news");
var child=document.getElementById("profile_block");
parent.removeChild(child);
</script>

<!-- 添加自己的的profile_block_my -->
<div id="profile_block_my">
昵&nbsp;&nbsp;&nbsp;称 : <a href="http://home.cnblogs.com/u/xiaoxi666/">xiaoxi666</a><a href="javascript:void(0);" &ensp;
onclick="follow('b811d974-8da2-e311-8d02-90b11c0b17d6')"><font  size="2" color="skyblue">+关注</font></a><br>
<!-- 添加自己的GitHub链接 -->
<div >GitHub : <a href="https://github.com/xiaoxi666"><span class="s3">github.com/xiaoxi666</span></a>
<!-- 添加邮箱 -->
<br />E-mail : <a href="mailto:xiaoxi666swap@163.com">xiaoxi666swap@163.com</a>
</div>

</div>

<!-- 删除原有的google搜索 -->
<script>
var parent=document.getElementById("sidebar_search_box");
var child=document.getElementById("widget_my_google");
parent.removeChild(child);
</script>

<!-- 删除“标签” -->
<script>
var parent=document.getElementById("blog-sidecolumn");
var child=document.getElementById("sidebar_toptags");
parent.removeChild(child);
</script>

<!-- 删除"最近评论" -->
<script>
var parent=document.getElementById("blog-sidecolumn");
var child=document.getElementById("sidebar_recentcomments");
parent.removeChild(child);
</script>

页脚Html代码

<span id="back-to-top"><a href="#top"><strong>TOP</strong></a></span>

特此记录。


如果有什么东西挡住了你的去路……绕开它!

Master programmers think of systems as stories to be told rather than programs to be written. ——《clean code》

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏腾讯大讲堂的专栏

iOS 9对前端做了什么?

作者:big(谢刚),腾讯TGideas团队前端工程师,前端虐我千万遍,我待前端如初恋! 随着9月25日iPhone6s的发货,早已预订入手的小伙伴已开始了新一...

28560
来自专栏BestSDK

9种最经典的导航模式,APP开发必备

一、标签式导航 标签式导航又称为tab式导航,现在大多数app采取的主流形式,一般分为底部导航、顶部导航、底部和顶部双tab导航 1、底部标签导航 底部导航一般...

54890
来自专栏前端萌媛的成长之路

CSS常见布局

20920
来自专栏编程微刊

前端css常用的选择小汇

13420
来自专栏斜述视角

0基础学习网页制作-Html

文章来自:4月14日早,在贵州大学北校区10栋715寝室,对物理学院同学培训的内容。

15820
来自专栏前端说吧

CSS-用伪类制作小箭头(轮播图的左右切换btn)

50980
来自专栏Coco的专栏

【前端性能】必须要掌握的原生JS实现JQuery

22130
来自专栏非著名程序员

Android 自定义 view 动画按钮

昨天偶偶然看见UI 给的一个交互的效果,原图如下 ? 就是下面的loginbutton,于是大概模仿了一下, 并没有做这个UI的全部效果,有兴趣的可以完善后面...

25680
来自专栏夏时

纯 CSS 实现漂亮的大标题效果

21320
来自专栏儿童编程

正能量猫,到哪哪亮——Scratch发光猫实验

偶然想起一句话“请保持你心里的光,因为你不知道谁会借此走出黑暗。”心里小感动,决定用Scratch表达一下,于是有了本案例中走哪哪亮的正能量猫。 效果如下:

13020

扫码关注云+社区

领取腾讯云代金券