[Alist V3]-样式代码合集

更新: 2025/5/23 字数: 0 字 时长: 0 分钟

🔈 前言：本合集均为个人编写，无抄袭可能，如有雷同，纯属巧合。代码不定时更新与维护，如失效请留言或到 B 站私信，附上代码编号以及具体失效部分

添加一个导航栏

.container {
  width: auto;
  background-color: rgba(255, 255, 255, 1);
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 2%;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.09);
  border-radius: 0.75rem;
}
.container nav ul li {
  list-style: none;
  display: inline-block;
  padding: 20px 40px;
  color: #777;
  font-size: 18px;
  font-weight: 600;
  position: relative;
  cursor: pointer;
  z-index: 2;
}
.container nav ul li::after {
  content: "";
  border-bottom: 1px solid;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  opacity: 0;
  transition: top 0.5s, opacity 0.5s;
}
.container nav ul li:hover::after {
  top: 50%;
  opacity: 1;
}
a {
  text-decoration: none;
}

<script>
    setTimeout("TopMenu()", 500)
    function TopMenu() {
        var dom = document.getElementsByClassName("hope-c-PJLV-iicyfOA-css")[0]
        var div = document.createElement("div")
        div.className = "container"
        div.innerHTML = "\
        <nav>\
            <ul>\
                <a href='https://www.baidu.com/' target='_blank'>\
                    <li>百度</li>\
                </a>\
                <li>导航</li>\
                <a href='http://127.0.0.1:5244/@manage/' target='_blank'>\
                    <li>管理</li>\
                </a>\
                <li>文档</li>\
                <li>关于</li>\
            </ul>\
        </nav>"
        dom.appendChild(div)
    }
</script>

明亮模式和黑夜模式背景设置

/* 白天模式背景 */
.hope-ui-light {
  background-image: url(https://pan.ylmty.cc/d/local%F0%9F%94%92/img/bg1.jpg) !important;
  background-attachment: fixed;
  background-position: 100%;
  background-size: cover;
}
/* 白天模式主框体毛玻璃 */
.hope-c-PJLV-igScBhH-css {
  background-color: #ffffff72 !important;
  backdrop-filter: blur(8px);
}
/* 白天模式Readme框体毛玻璃 */
.hope-c-PJLV-ikSuVsl-css {
  background-color: #ffffff72 !important;
  backdrop-filter: blur(8px);
}
/* 黑夜模式背景 */
.hope-ui-dark {
  background-image: url(https://pan.ylmty.cc/d/local%F0%9F%94%92/img/bg1.jpg) !important;
  background-attachment: fixed;
  background-position: 100%;
  background-size: cover;
}
/* 黑夜模式主框体毛玻璃 */
.hope-c-PJLV-iigjoxS-css {
  background-color: #00000090 !important;
  backdrop-filter: blur(8px);
}
/* 黑夜模式Readme框体毛玻璃 */
.hope-c-PJLV-iiuDLME-css {
  background-color: #00000090 !important;
  backdrop-filter: blur(8px);
}