分享一波博客园装饰代码，留作纪念

北陌宝宝

于 2024-12-04 10:56:49 发布

阅读量273

点赞数 3

分类专栏： # 经验技术专栏各类技巧专栏文章标签： javascript css 开发语言

本文链接：https://blog.youkuaiyun.com/DNFBM/article/details/144232921

版权

经验技术专栏同时被 2 个专栏收录

8 篇文章

订阅专栏

各类技巧专栏

6 篇文章

订阅专栏

当时初次接触代码没多久，用了一周的时间搞出来的，虽然现在已经很久不用博客园了

皮肤选择

页面定制 CSS 代码

#header{display:none;}
<!--去广告-->
#ad_t2,#cnblogs_c1,#under_post_news,#cnblogs_c2,#under_post_kb {display:none;!important}
/*导航栏黑底*/
#test33 ul {
margin: 0;
padding: 0;
list-style-type: none; /*去除li前的标注*/
color:red;
overflow: hidden; /*隐藏溢出的部分，保持一行*/
}
 
#test33 li {
float: left; /*左浮动*/
 
}
 
/*导航栏扩大*/
#test33 li a, .dropbtn {
display: inline-block; /*设置成块*/
color: RGB(220, 220, 220);
background-color:AliceBlue;
text-align: center;
text-decoration: none;
padding: 14px 16px;
}
 
 
 
#test33 li a:hover, .dropdown:hover .dropbtn { /*鼠标移上去，改变背景颜色*/
background-color:#f9f9f9;
 
}
 
 /*菜单栏变成一排*/
#test33 .dropdown {
/*display:inline-block将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。*/
display: inline-block;
color:red;
}
 
 
#test33 .dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
 
 
 
#test33 .dropdown-content a {
display: block;
color: black;
padding: 8px 10px;
text-decoration:none;
}

博客侧边栏公告（支持HTML代码）（支持 JS 代码）

<!-- 公告栏显示-->
<br>
<img src="https://www.cnblogs.com/images/cnblogs_com/beile/1480861/o_paopao.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/beile/1480861/o_qun.gif" style="width:100%"/>
<br />
 
<br />
<br />
<div align="center">
<font size="2" color="DarkGray" face="verdana">
<b>目标 - 加群探讨学习：675678830<br /></b>
<br />
<img src="https://www.cnblogs.com/images/cnblogs_com/beile/1480861/o_mei.gif" style="width:100%"/>
<br />
<b>   自动化 性能 功能 测试 开发   <br /></b>
<b>GO-----------------------------GO<br /></b>
</font>
<br />
</div>
<img src="https://www.cnblogs.com/images/cnblogs_com/beile/1480861/o_diao.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://www.cnblogs.com/images/cnblogs_com/beile/1480861/o_zfb.png"},
            weixin:{qrimg: "https://www.cnblogs.com/images/cnblogs_com/beile/1480861/o_QQ%e6%88%aa%e5%9b%be20190806184826.png"},
        }
};
</script>
<script src="https://files.cnblogs.com/files/mmzs/tctip.js"></script>

页首 HTML 代码

<b>
  <font size="15" color="OrangeRed" background-color="red" face="verdana" margin-top="100px">
    <center>
      <p style="font-size:35px;margin-bottom:19px;margin-top:20px;opacity: 1">☯☯☯☯☯☯没有期望 何来失望 做一只快乐的咸鱼 - 北乐☯☯☯☯☯☯</p>
    </center>
  </font>
</b>
 
 
<div id="test33">
  <ul style="margin-left:50px;margin-right:50px;color:Black;" class="test11">
    <div align="center">
     
     
      <div class="dropdown">
        <a href="https://www.cnblogs.com/beile/" class="dropbtn">
          <span style="opacity: 0.2;color:Black;font-size: 17px">▁▁▁▁▂▂▂▂▃▃▃▅▅▅▅▆▆▆▆▇▇▇</span>
        </a>
        <div class="dropdown-content">
        </div>
      </div>
       
       
      <div class="dropdown">
        <b>
          <font size="4" color="red" face="verdana">
            <a href="https://www.cnblogs.com/beile/" class="dropbtn">博客首页</a>
          </font>
        </b>
        <div class="dropdown-content">
        </div>
      </div>
       
       
      <div class="dropdown">
        <b>
          <font size="4" color="red" face="verdana">
            <a href="https://www.cnblogs.com/beile/category/1763163.html" class="dropbtn">Python</a>
          </font>
        </b>
        <div class="dropdown-content">
        </div>
      </div>
       
       
      <div class="dropdown">
        <b>
          <font size="4" color="red" face="verdana">
            <a href="https://www.cnblogs.com/beile/category/1763164.html" class="dropbtn">Linux</a>
          </font>
        </b>
        <div class="dropdown-content">
        </div>
      </div>
 
 
      <div class="dropdown">
           
        <b>
          <font size="4" color="red" face="verdana">
            <a href="https://www.cnblogs.com/beile/category/1763165.html" class="dropbtn">Windows</a>
          </font>
        </b>
        <div class="dropdown-content">
        </div>
      </div>
 
 
      <div class="dropdown">
        <b>
          <font size="4" color="red" face="verdana">
            <a href="https://www.cnblogs.com/beile/category/1763167.html" class="dropbtn">JMeter</a>
          </font>
        </b>
        <div class="dropdown-content">
        </div>
      </div>
       
       
      <div class="dropdown">
        <b>
          <font size="4" color="red" face="verdana">
            <a href="https://www.cnblogs.com/beile/category/1763170.html" class="dropbtn">下载/安装</a>
          </font>
        </b>
        <div class="dropdown-content">
        </div>
      </div>
       
       
      <div class="dropdown">
        <b>
          <font size="4" color="red" face="verdana">
            <a href="https://www.cnblogs.com/beile/category/1763168.html" class="dropbtn">北乐杂志</a>
          </font>
        </b>
        <div class="dropdown-content">
        </div>
      </div>
       
       
      <div class="dropdown">
        <b>
          <font size="4" color="red" face="verdana">
            <a href="https://i.cnblogs.com/EditPosts.aspx?opt=1" class="dropbtn">新随笔</a>
          </font>
        </b>
        <div class="dropdown-content">
        </div>
      </div>
       
       
      <div class="dropdown">
        <b>
          <font size="4" color="red" face="verdana">
            <a href="https://msg.cnblogs.com/send/Mr%E3%80%81%E5%8C%97%E4%B9%90" class="dropbtn">联系北乐</a>
          </font>
        </b>
        <div class="dropdown-content">
        </div>
      </div>
       
       
      <div class="dropdown">
        <b>
          <font size="4" color="red" face="verdana">
            <a href="https://www.cnblogs.com/beile/category/1979340.html" class="dropbtn">博客园</a>
          </font>
        </b>
        <div class="dropdown-content">
        </div>
      </div>
       
       
      <div class="dropdown">
        <a href="https://i.cnblogs.com/" class="dropbtn">
          <span style="opacity: 0.2;font-size: 17px">▇▇▇▆▆▅▅▅▅▃▃▃▂▂▂▁▁▁▁</span>
        </a>
        <div class="dropdown-content">
        </div>
      </div>
       
       
      <div style="margin:0px auto;">
      </div>
    </div>
  </ul>
</div>
 
 
<!--github地址-->
<a href="https://www.cnblogs.com/beile/" title="我的github地址还没有" target="_Blank" class="github-corner" aria-label="View source on Github">
  <svg width="80" height="80" viewbox="0 0 250 250" style="fill:#FD6C6C; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true">
    <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z">
    </path>
    <path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm">
    </path>
    <path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body">
    </path>
  </svg>
</a>

页脚 HTML 代码

<!-- 鼠标点击特效 -->
<script type="text/javascript" src="https://blog-static.cnblogs.com/files/yadongliang/mouse.js"></script>