博客装饰代码分享,另求大神解决菜单栏下拉二级菜单问题
#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>