* {
margin:0;
padding:0;
}
header {
width:100%;
height:96px;
border:2px solid;
text-align:center;
}
header h1 {
margin-top:29px;
font-weight:400;
}
nav {
width:100%;
height:498px;
border:1px solid;
margin-top:5px;
}
nav > ul {
list-style-type:none;
background-color:#cfcfcf;
height:50px;
overflow:hidden;
}
nav > ul > li {
background-color:#1e90ff;
border:2px solid #0b5eb1;
box-shadow:0 3px #999;
color:#fff;
font-family:"Courier New",Courier,monospace;
font-weight:800;
font-size:20px;
float:left;
width:8em;
padding:6px;
margin-top:5px;
text-align:center;
cursor:pointer;
user-select:none;
}
nav > ul > li:first-child {
margin-left:10px;
border-bottom-left-radius:25px;
}
nav > ul > li:last-child {
border-top-right-radius:25px;
}
nav > ul > li.active {
border:2px solid#0b5eb1;
color:#1e90ff;
background-color:#fff;
box-shadow:0 2px #666;
transform:translateY(3px);
-webkit-transform:translateY(3px);
-moz-transform:translateY(3px);
-ms-transform:translateY(3px);
-o-transform:translateY(3px);
}
nav > ul > li.btn1:hover {
border:2px solid#0453a1;
color:#f8f8f8;
font-weight:bolder;
background-color:rgb(9,134,218);
}
nav > ul > li.btn2:hover {
border:2px solid#880467;
color:#42da7c;
font-weight:bolder;
background-color:rgb(255,0,212);
}
nav > ul > li.btn3:hover {
border:2px solid#037428;
color:#db611b;
font-weight:bolder;
background-color:rgb(9,175,36);
}
nav > ul > li.btn4:hover {
border:2px solid#921606;
color:#eaff2f;
font-weight:bolder;
background-color:rgb(255,17,0);
}
nav > ul > li.btn5:hover {
border:2px solid#7a5b04;
color:#0575a1;
font-weight:bolder;
background-color:rgb(255,145,0);
}
nav > div {
position:absolute;
border:1px solid black;
width:0px;
height:0px;
transition:width 1s,height 1s;
text-align:center;
/* opacity:0;
*/
}
nav > div.show {
width:100%;
height:448px;
/* opacity:1;
*/
}
div h1 {
font-size:38px;
margin-top:180px;
font-weight:600;
color:#fff;
opacity:0;
}
div h1.showh1 {
font-size:38px;
margin-top:180px;
font-weight:600;
color:#fff;
opacity:1;
}
更新时间:2021-04-24 23:54:24