博客园主题美化：目录、音乐播放、回到顶部小火箭

博客园主题美化

添加目录参考：为博客园添加目录的方法总结 - 妙音天女 - 博客园
音乐播放参考：博客园简约主题simple-color - YJLAugus - 博客园

设置博客网页图标

音乐播放

放在页脚

放在页首

回到顶部小火箭

放在页首

基本底子

---

下面是实现效果的填空代码

博客侧边栏公告（支持HTML代码） （支持 JS 代码）：放社交图标、头像和音乐播放

我的个人博客站：lingr7.coding.me



 


     
 
  
 
     
 
     
 
      
 
     

页面定制css代码

/*生成博客目录的CSS*/
#uprightsideBar{
    font-size:12px;
    font-family:Arial, Helvetica, sans-serif;
    text-align:left;
    position:fixed;/*将div的位置固定到距离top:50px，right:0px的位置，这样div就会处在最右边的位置，距离顶部50px*/
    top:50px;
    right:0px;
    width: auto;
    height: auto; 
}
#sideBarTab{
    float:left;
    width:30px; 
    border:1px solid #e5e5e5;
    border-right:none;
    text-align:center;
    background:#ffffff;
}

#sideBarContents{
    float:left;
    overflow:auto; 
    overflow-x:hidden;!important;
    width:200px;
    min-height:108px;
    max-height:460px;
    border:1px solid #e5e5e5;
    border-right:none; 
    background:#ffffff;
}
#sideBarContents dl{
    margin:0;
    padding:0;
}

#sideBarContents dt{
    margin-top:5px;
    margin-left:5px;
}

#sideBarContents dd, dt {
    cursor: pointer;
}

#sideBarContents dd:hover, dt:hover {
    color:#A7995A;
}
#sideBarContents dd{
    margin-left:20px;
}

页首

 





​
​
  
 
 

页脚