太纯净了,得加下拉菜单

太纯净了,得加下拉菜单

问题:

  纯净过头,找原来的一些链接不方便了。

解决:

第一步:

  点击我的博客之中的“管理”,或者点击这里:

  管理

再点“设置”,博客侧边栏公告(支持HTML代码) 申请JS权限下面,有个:页首 HTML 代码

这个地方加代码,在网页加载的时候,会加到代码头部去。

相当于代码“注入”头部。

第二步:

  复制进以下代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 6px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: rgb(206, 239, 169);
    min-width: 1600px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: rgb(0, 150, 136);
    padding: 8px 8px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: rgb(239, 208, 164)}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}

</style>
</head>
<body>

<div class="dropdown">
  <button class="dropbtn">下拉菜单</button>
  <div class="dropdown-content">
    <a href="https://www.cnblogs.com/">进入博客园首页</a>
    <a href="https://i-beta.cnblogs.com/settings">进入管理</a>
    <a href="https://www.cnblogs.com/xin04/">进入我的博客首页</a>
  </div> <!-- xin04这个地方,更换成。。  -->
</div>
<hr>
</body>
</html>

  注意代码倒数第五行的注释。你如果自己尝试,得改一个地方。否则就转到我的博客里来了——你得改成你的博客的网址。

  点保存,完成!

说明:

  下拉菜单是这个地方抄来的,略作修改:

CSS 下拉菜单

  这样做,并没有做到“松耦合”。这个问题比较大,因为紧耦合意味着以后改进麻烦比较多。不过先这样了,以后再改进,把Html、Css、Js尽量分开。

  以后可以考虑把各个分类,加到菜单中去。一个博客,总有几个分类的。看,下拉菜单拉下来,可以有很多空间,利用起来是个好主意。

  只要在我的博客里面转,这个下拉菜单始终在的。无论何时,想返回博客主页,还是想进管理,就都非常方便了,很不错的感觉。

20.02.28

posted @ 2020-02-28 23:19  xin04  阅读(145)  评论(0编辑  收藏  举报