Line 74: | Line 74: | ||
font-family: "JosefinSans"; /*字体*/ | font-family: "JosefinSans"; /*字体*/ | ||
− | font-size: | + | font-size: 120%; /*字体大小*/ |
font-weight: 700; | font-weight: 700; | ||
Revision as of 10:05, 19 October 2021
html, body{
background-color: rgb(217,216,211); height: 100%; width: 99%;
} .header{
width:100%;
}
- navbar, .navbar{ /*整个navbar的共用样式*/
width: 100%; text-align: center;
margin-top: -20px; margin-left: -25px;
position: relative; z-index: 114514; /*当navbar处于元素流中时:/*position:relative; top:auto z-index:3;*/
}
- navbar.stick{ /*用于js*/
margin-top: 14px; top:0; position:fixed;
}
- top {/*用于滚动栏位置不变*/
_position: absolute; _bottom: auto; _top: expression(eval(document.documentElement.scrollTop));
}
.navbar ul { /*整一个navbar一级背景的样式*/
/*width: 232%;*/ width:85.7%; display:inline-table; list-style: none;
padding:15px 24px 15px; /*导航栏上部的大小*/ background-color:#f2f2f2; /*导航栏的背景颜色*/ color:#000;/*导航栏的字体颜色*/ margin-left: 0px;
padding-left:15%; /*整个导航栏朝左边的距离*/ /*box-shadow:1px 1px 3px rgb(255, 255, 255); 阴影,暂时不需要*/
} .navbar ul::after { /*忘了写来干什么的了 暂且忽略*/
content:""; clear:both;
}
.navbar ul li {/*一级导航栏上每一个按钮*/
position: relative; /*这行无论如何都不要动*/
float: left; /*决定导航栏到左边还是到右边 需要更改html*/
margin-right: 30px; -webkit-transition-property: background-color; -webkit-transition-duration: 0.3s; -webkit-transition-timing-function: ease; border-radius:8px; /*border-top-left-radius:0px;/*按钮左上角圆角*/
} .navbar ul li:hover {/*一级导航栏上每一个按钮*/
background-color: rgb(64,106,120);
} .navbar ul li a { /*一级导航栏文字*/
display:block; text-align: center; list-style: none; text-decoration:none; /*font-variant:small-caps;*/ font-weight: 700; font-family: "JosefinSans"; /*字体*/ font-size: 120%; /*字体大小*/ font-weight: 700;
color: black;/*#999faa;*//*字体颜色*/ transition: color 0.5s;/*基于颜色的过渡*/ font-weight: 700; padding: 7px 24px; /*文字与按钮的间距*/
} .navbar ul li:hover a{
color: white;
} .navbar ul li a:hover {
list-style: none; color:white;/*颜色,暂且不变*/ transition:all 0.2s;
} .navbar ul li ul { /*二级导航栏的整体与背景*/
position: absolute; display: block; overflow: hidden; /*基本代码 请不要动*/
margin-top: 0px; /*二级导航栏整体与一级导航栏的间距*/ padding: 0px 10px 0px 10px;/*按钮与左右边的间距 将这行代码的第1或第3个值改了的话后果自负*/ width: 200px; /*基于透明度的过渡*/ max-height: 0px; /*基于高度的过渡*/ opacity:0%; /*transition: all 0.2s ease-out;*/ box-shadow: none; /*拒绝继承值*/ /*border-radius:15px; 二级导航栏整体圆角*/ border-radius: 8px; background-color:#ffffff; z-index:114515;
} .navbar ul li ul:hover{ /*{悬浮在按钮上的样式
background-color:rgb(250, 233, 229); /*鼠标悬浮时按钮的颜色:白色*/ /*box-shadow:5px 0px 0px 0px rgb(241, 157, 138); 阴影颜色与位置:深红色,右边*/ border-radius: 8px; /*按钮圆角,为保证过渡效果而加的*/ /*transition:all 0.2s; 0.2秒的过渡*/
} .navbar ul li:hover ul{
display: block; /*opacity: 100%;*/ /*基于透明度的过渡*/ max-height: 500px; /*基于高度的过渡*/ opacity: 1; transition: opacity 0.1s linear; padding: 0px 0px 0px 0px;/*拒绝继承值*/ box-shadow: 0px 2px 10px 1px rgba(0,0,0,0.3); /*box-shadow:5px 0px 0px 0px rgb(241, 157, 138);阴影颜色与位置:深红色,右边*/
} .navbar ul li ul li{
border-radius:0px;
}
.navbar ul li ul li a {
/*text-align:center;*/ text-align:left; padding: 0px;/*拒绝继承值*/ padding-left:20px; box-shadow: none;/*拒绝继承值*/ width: 260px; color: #999faa !important; /*字体颜色*/ line-height: 36px;/*调整文字到按钮居中的位置 这行代码改掉后果自负*/
} .navbar ul li ul li:hover a{
color:white !important; /*颜色过渡*/
}
- tlogo, .tlogo{
margin-top: 17px; margin-left: 20px;/*8px*/ z-index: 514 !important; left: 0; position: absolute;
}
- tlogo.stick, .tlogo.stick{
margin-top:30px; top:0; margin-left: 10px; z-index: 115 !important; left: 0; position:fixed;
}
- plogo, .plogo{
margin-top: 17px; margin-left: 20px;/*8px*/ z-index: 514 !important; left: 0; position: absolute;
}
- plogo.stick, .plogo.stick{
margin-top:10px; top:0; margin-left: 40px; z-index: 115 !important; left: 0; position:fixed;
}
.topbar{
margin-top:40.5px; margin-left: -25px; margin-bottom: -18px; height: 8px; width: 102.15%; background-color:#d3e3f0; position:relative; z-index:3; /* top:0;*/
}