查看“模板:顶部导航栏样式”的源代码

{{#switch:{{{1|}}}
|#default={{#css:
#headBox,#contentSub, #contentSub2{display:none;}
.top-navbar {
    position:relative;
    background-color: rgba(255, 255, 255, 0.25);
    padding: 8px;
    color: #5e5d6b;
    font-family: SourceHanSansCN-Medium, sans-serif;
    border-radius: 3px;
    margin: 0 0 20px 0;
}
.top-navbar:after {
    content: "";
    border: 1px solid #ffffffbf;
    width: 100%;
    height: 100%;
    position: absolute;
    top: -4;
    left: -4;
    border-radius: 3px;
    pointer-events:none;
}
.lysk-nav-category1{
    display: flex;
}
.lysk-nav-category2 .tab{
    display: flex;
    flex-wrap: wrap;
    padding: 5px 5px 0 5px;
    gap: 10px;
}
.lysk-nav-item {
    font-size: 16px;
    min-width: 3em;
    text-align: center;
    padding:0 .5em;
    white-space: nowrap;
}
.lysk-nav-item.active {
    border-bottom: 2px solid white;
    margin: 0 0 -1px 0;
    font-weight: bold;
    color: #464654;
}
.lysk-nav-button {
    min-width: 3em;
}
@media screen and (max-width: 767px) {
    .top-navbar{padding: 5px 5px 10px 5px;}
    .lysk-nav-category2 .tab{gap:5px 7px; padding:0 0;}
    .lysk-nav-item {font-size: 14px;min-width: unset;}
    .lysk-nav-category1 {
        overflow-x: auto;
        overflow-y: hidden;
        padding: 0 0 5px 0;
        justify-content:center;
    }
    .lysk-nav-button {
        font-size: 12px;
    }
}
}}
|混沌深网={{#tag:bstyle|
.lysk-nav-item.active{ background-image: url({{filepath:顶部导航_选中_深网.png}}); 
background-repeat: no-repeat; background-position: 50% 50%;}
.button-text { background-image:url({{filepath:二级导航_未选中_深网.png}}); background-size:100% 100%; } 
.lysk-nav-button.active .button-text { background:url({{filepath:二级导航_选中_深网.png}}); background-size:100% 100%;} 
}}
{{#CSS:
.shenwang-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: -1;
}
.top-navbar{
  width: 100%;
  margin-bottom: 10px;
}
.top-navbar>.lysk-nav-category1{
  display: flex;
  justify-content: center;
}
.lysk-nav-item {
    height: 50px;
    width: 196px;
    text-align: center;
    line-height: 50px;
    font-size: 20px;
    color: #fff;
    cursor: pointer;
}
.lysk-nav-item.active{ color: #ccecf7; }
.lysk-nav-item:not(.active):hover {
    text-shadow: 2px 2px 2px #b5e5fd;
}
.top-navbar>.lysk-nav-category2{
  padding: 5px 30px 20px 30px;
}
.lysk-nav-button{ display: inline-block; margin: 10px 0 0 10px; position: relative;}
span.button-text {
    display: inline-block;
    font-size: 18px;
    color: #fff;
}
.lysk-nav-button.active span.button-text{ color: #d4ebf4; font-weight: normal;}
.lysk-nav-button:not(.active) .button-text:hover {
    text-shadow: 2px 2px 2px #00BCD4;
}
span.button-bg {
    padding: 2px 20px 5px 20px;
    display: block;
}
span.button-text:hover{ box-shadow: 0 2px 4px #00000029; }
.top-navbar>.divider-line{
  height: 1px;
  width: 100%;
  background: radial-gradient(circle, #6187c2 75%, transparent);
}

@media screen and (max-width: 474px){
.lysk-nav-category2 {
    padding: 0px !important;
}
.lysk-nav-item {
    height: 30px;
    width: 120px;
    line-height: 30px;
}
.lysk-nav-item.active {
    background-size: 100% 100%;
}
.lysk-nav-item,span.button-text{
    font-size:16px;
}

.lysk-nav-item,span.button-text{
    font-size:14px;
}
.lysk-nav-button{
    margin: 8px 3px 0px 3px;
}
span.button-bg{
    padding: 2px 10px 3px 10px;
}
}
}}

|初版={{#tag:bstyle|.lysk-nav-item.active{ background:url({{filepath:顶部导航_选中.png}}); }
.button-text { border-image-source:url({{filepath:顶部导航栏_按钮.png}}) !important;} 
.button-bg { background:url({{filepath:顶部导航栏按钮 高亮.png}}); } 
}}{{#CSS:
.top-navbar{
  width: 100%;
}
.top-navbar>.lysk-nav-category1{
  display: flex;
  justify-content: center;
}
.lysk-nav-item{
  height: 73px; 
  width: 156px;
  text-align: center; 
  line-height: 73px; 
  font-size: 20px;
  color: #796d83;
}
.lysk-nav-item:hover{ cursor: pointer; }
.top-navbar>.lysk-nav-category2{
  background: radial-gradient(ellipse 50% 30px at center top, #3e375b38, transparent);
  padding: 5px 30px;
}
.lysk-nav-button{ display: inline-block; margin: 10px 0 0 10px; position: relative;}
.lysk-nav-button.active:before {
    content: "";
    height: 100%;
    width: 100%;
    position: absolute;
    border: 2px solid #ce7165;
    border-radius: 15px;
}
span.button-text {
    border-radius: 20px;
    display: inline-block;
    font-size: 18px;
    color: #fff;
    border: 1px solid transparent;
    border-image-slice: 52% 49% 52% 49%;
    border-image-width: 37px 44px 37px 44px;
    border-image-repeat: stretch;
    border-image-outset: 0 2px 3px 2px;
}
span.button-bg {
    padding: 2px 20px 5px 20px;
    display: block;
    background-repeat: no-repeat;
    background-size: 70% 50%;
}
span.button-text:hover{ box-shadow: 0 2px 4px #00000029; }
.top-navbar>.divider-line{
  height: 2px;
  width: 100%;
  background: radial-gradient(circle, #ecf7ff 75%, transparent);
}
@media screen and (max-width: 474px){
.lysk-nav-category2 {
    padding: 0px !important;
}
.lysk-nav-item {
    height: 40px;
    width: 80px;
    line-height:50px;
}
.lysk-nav-item.active {
    background-size: 100% 100% !important;
}
.lysk-nav-item,span.button-text{
font-size:16px;
}

.lysk-nav-item,span.button-text{
font-size:14px;
}
.lysk-nav-button{
margin: 8px 3px 0px 3px;
}
span.button-bg{
padding: 2px 10px 3px 10px;
}
}
}}
}}<noinclude>
{{顶部导航栏
|分类1=图鉴|分类2=测试|分类3=阅读
|子页1@服饰施工中={{#var:男主}}/服饰
|子页1@娃娃施工中={{#var:男主}}/娃娃
|子页1@喵喵施工中={{#var:男主}}/喵喵徽章
|子页1@道具施工中={{#var:男主}}/道具
|子页1@拍照施工中={{#var:男主}}/拍照
|子页1@家具施工中={{#var:男主}}/家具
|子页2@模板=顶部导航栏
|子页2@思念={{#var:男主}}/思念
|子页2@搭档={{#var:男主}}/搭档
|子页2@主页施工中={{#var:男主}}/主页
|子页2@彩蛋施工中={{#var:男主}}/彩蛋
|子页3@短信={{#var:男主}}/短信
|子页3@朋友圈={{#var:男主}}/朋友圈
|子页3@视频语音施工中={{#var:男主}}/视频语音
|子页3@主线分线未开启={{#var:男主}}/主线分线
|子页3@活动剧情施工中={{#var:男主}}/活动剧情
|子页3@逸闻={{#var:男主}}/逸闻
|子页3@倾心之约={{#var:男主}}/倾心之约
|子页3@秘密时光={{#var:男主}}/秘密时光
|子页3@点滴日常={{#var:男主}}/点滴日常
}}</noinclude>