* { 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