AList样式与主题优化记录
功能优化:
添加一个导航栏:头部放下面这段代码
<style>
.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)
}
暂无标签