北乐博客装饰分享CSS+HTML+js

博客布局更改，各种百度，自己修改，搞成现在这样，有兴趣的朋友可以复制我下面的把自己博客覆盖了，然后在进行更改

不懂可加群问我：675678830

如果想开通打赏，用到js，需要在 下列中 博客侧边栏公告  处开通下

博客园首页-管理-设置--

 

页面制定CSS代码：

#navList {
min-height: 35px;
float: left;
}
#navList li {
float: left;
margin: 0 4px 0 0;
}

#site_nav_under {
display: none;
}
.c_ad_block, .ad_text_commentbox {
display: none;
margin: 0;
padding: 0;
}
#ad_under_google {
height: 0;
overflow: hidden;
}
#ad_under_google a {
display: none;
}
#ad_t2{
display: none;
margin: 0;
padding: 0;
}
#navList a{
color:#eee;
font-size: 15px;
font-weight: bolder;
}
#div_digg { position: fixed;bottom: 20px;
right: 10px;font-size: 0;z-index: 100;width:50px }
.buryit{display:none}

#green_channel { position: fixed;bottom: 30px;right: 100px;z-index: 100 }
#header{
height:60px;
line-height:60px;
font-size:18px;
opacity:0.5;
}
#main{
margin-top:30px;
}
#blogTitle h1,#blogTitle h2{
line-height:50px;
}
#blogTitle h1 a {
font-size:40px;
}
#blogTitle h2 {
color:#EEE9E9;
font-size:25px;
}
.menu{margin-top:15px;}
#blog_stats{
line-height:50px;
color:#ffffff;
font-size:14px;
}
html,body{
font-family: 'Microsoft JhengHei', Microsoft YaHei , sans-serif;
}
.post {
padding-bottom: 30px;
}
ul li {
list-style: none;
line-height:25px;
}
.commentbox_main{
margin-right:20px;
}
#tbCommentBody{
width:100%;
height:120px;
}
.commentbox_title_left{
display:none;
}
.commentbox_title
{
width:100%
}
.commentbox_title_right{
float:right;
}
#sideBar{
border-radius:1px;
border:0px;
background:#FAFCFD;
}
#topics, .post{
border-radius:1px;
border:0px;
background:#FAFCFD;
}
.dayTitle{
border-bottom-width: 0px;
}
.dayTitle a
{
display:none;
}
.day{
border:1px solid #f1f1f1;
border-radius:3px;
padding:5px;
margin-bottom:6px;
background:#FFFFFF;
}
.day:hover{
box-shadow: 4px 0px 6px #38AFF3;
}
.entrylistItem{
border:1px solid #f1f1f1;
border-radius:3px;
padding:5px;
margin-bottom:6px;
background:#FFFFFF;
}
.entrylistItem:hover {
box-shadow: 2px 0px 6px #000;
}
body { background-color: #efefef; background-image: url(https://www.cnblogs.com/images/cnblogs_com/cainiaoxiansheng/1308455/o_beijing.jpg);
background-repeat: no-repeat; background-attachment: fixed; background-position: center 0; background-size: cover; }
#sideBarMain
{
padding:3px;
}
.feedbackItem,.commentform {
background:#ffffff;
padding:5px 10px;;
}
#footer{
margin: 30px 20px;
font-size: 12px;
text-align: center;
color: #999;
border-color:#f1f1f1;
padding-top:25px;
}
.input_my_zzk{
border-radius:3px;
border: 1px solid #000000;
width:120px;
height:26px;
}
input.btn_my_zzk {
height: 30px;
padding:5px 10px;
vertical-align: none;
border-radius:3px;
border:1px solid;
}
.comment_btn{
height: 38px;

border-radius:3px;
border:1px solid;
}

博客侧边栏公告：

<br>
<img src="https://www.cnblogs.com/images/cnblogs_com/cainiaoxiansheng/1308455/o_meinv.jpg" style="width:100%"/>
<br>

<div align="center">
<b><font size="4" face="verdana">菜鸟博客 、 学无止境</font></b>
</div>
<br />
<div align="center">
<b><font size="2" face="verdana">九零后的小伙子<br /></font></b>
<b><font size="2" face="verdana">软件测试从业者<br /></font></b>
<b><font size="2" face="verdana">喜欢喝茶但不会品茶<br /></font></b>
<b><font size="2" face="verdana">软件测试同行可点击加群<br /></font></b>
</div>
<br />
<h3 style="text-align:center"><a target="_blank" href="//shang.qq.com/wpa/qunwpa?idkey=c3f85af3f19cb8566325ada20290c22a1773885624a0c06cec0fd098f3bb85db"><img border="0" src="//pub.idqqimg.com/wpa/images/group.png" alt="初级软件测试交流群" title="初级软件测试交流群"></a></h3>
<img src="https://www.cnblogs.com/images/cnblogs_com/cainiaoxiansheng/1308455/o_dt.jpg" style="width:100%"/>
<br />
<br />
<font size="2" color="RoyalBlue" face="verdana">
<b>软件测试交流群：675678830<br /></b>
<b>汇集各路大神，一起学习与探讨<br /></b>
<b>测试经验、自动化、安全、性能<br /></b>
<b>欢迎全国各地软件测试同行加群！！<br /></b>
</font>
<img src="https://www.cnblogs.com/images/cnblogs_com/cainiaoxiansheng/1308455/o_hengxian.jpg" style="width:100%"/>
<br />
<br />
<br />
<div align="center">
<font size="2" color="DarkGray" face="verdana">
<b>我们的目标 ： 学习 学习 学习<br /></b>
<b>加油 ！！！ 加油！！！<br /></b>
<b>摇摆-----------------------------摇摆<br /></b>
</font>
</div>
<img src="https://www.cnblogs.com/images/cnblogs_com/cainiaoxiansheng/1308455/o_shandian.gif" style="width:100%"/>

<!-- 打赏插件 -->
<script>
window.tctipConfig = {
imagePrefix: "http://files.cnblogs.com/files/kdy11/",
cssPrefix: "http://files.cnblogs.com/files/kdy11",
buttonImageId: 1,
buttonTip: "dashang",
list:{
alipay: {qrimg: "https://files-cdn.cnblogs.com/files/cainiaoxiansheng/zfb2.bmp"},
weixin:{qrimg: "https://files-cdn.cnblogs.com/files/cainiaoxiansheng/wx1.bmp"},
}
};
</script>
<script src="https://files.cnblogs.com/files/mmzs/tctip.js"></script>

页脚Html代码：

<script>
addNag("博客首页","https://www.cnblogs.com/cainiaoxiansheng/",1);
addNag("python","https://www.cnblogs.com/cainiaoxiansheng/category/1334937.html",2);
addNag("Robotframework","https://www.cnblogs.com/cainiaoxiansheng/category/1450185.html",2);
addNag("JMeter","https://www.cnblogs.com/cainiaoxiansheng/category/1334940.html",2);
addNag("Fiddler","https://www.cnblogs.com/cainiaoxiansheng/category/1450186.html",3);
addNag("工具汇总","https://www.cnblogs.com/cainiaoxiansheng/category/1450187.html",6);
addNag("问题解决","https://www.cnblogs.com/cainiaoxiansheng/category/1450188.html",6);
addNag("偶尔杂志","https://www.cnblogs.com/cainiaoxiansheng/category/1450189.html",6);
function addNag(linkName,linkHref,linkLocation){
//获得导航DOM对象
var _navigator = document.getElementsByTagName("ul")[0];
//创建导航无序列表中的li
var _link = document.createElement("li");
var _a = document.createElement("a");
_a.class="menu";
_a.href= linkHref;
var _text = document.createTextNode(linkName);
_a.appendChild(_text);
_link.appendChild(_a);
//添加至指定的位置
var _lis = _navigator.getElementsByTagName("li");
if(linkLocation > _lis.length && linkLocation > 0){
_navigator.appendChild(_link);
}else{
_navigator.insertBefore(_link,_lis[linkLocation-1]);
}
}
</script>

 

设置完后，回到自己博客主页，看下页面显示 ，根据自己需要，去更改上列代码

转载于:https://www.cnblogs.com/beile/p/9714748.html