body { font-family: Arial, sans-serif; clear:both; margin: 0; } nav{ display: block; width: 100%; height: 65px; border-bottom: 1px solid orange; background-color: #fbfbfbb0; position:fixed; top: 0px; margin: 0; padding: 0; z-index: 100; overflow: visible; font-size: 18px; } nav ul { list-style-type: none; margin: 0; padding: 0; z-index: 100 !important; } nav li { float: left; } nav li a { /* display: block; text-align: center; */ font-weight: bold; /*加粗*/ color: black; padding: 20px 16px; display: inline-block; text-decoration: none; font-size: 18px; } nav .menu_2 li>a:hover { background-color:rgba(135, 207, 235, 0.473); } .dropdown-content { display: none; position: absolute; /* 默认相对于进行绝对定位 */ background-color: #f9f9f9; min-width: 100px; /* text-align: center; */ box-shadow: 0 8px 16px 0 rgba(0, 0, 0, .2); } .dropdown-content a { color: black; display: block; /* 因为标签不是块元素，min-width:100px不会生效 */ } .dropdown-content a:hover { background-color: #f1f1f1; color: deepskyblue; } .dropbtn:hover +.dropdown-content { display: block; } .dropdown-content:hover { display: block; } /*====================*/ nav .menu_1{ display:block; float: left; } nav .menu_2{ display:block; float: right; /* overflow: visible; */ padding-right: 30px; } nav li .logo{ display: block; width: 65px; height: 65px; background: url(https://static.igem.wiki/teams/4795/wiki/logo-129px.ico) no-repeat; background-size: 100%; /* 隐藏文字 */ font-size: 0; margin: 0px 20px; padding: 0 ; /* background-color: rebeccapurple; */ } #btn{ display: none; } @media screen and (max-width: 950px){ nav{ height: auto; display: flex; flex-direction: column; align-items: center; } nav ul { display: none; } nav .menu_1{ display: flex; flex-direction: row; justify-content: center; } nav .menu_2{ display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; } nav li .logo{ display: block; background: url(https://static.igem.wiki/teams/4795/wiki/logo-129px.ico) no-repeat; background-size: 100%; /* 隐藏文字 */ font-size: 0; margin: 0px 20px; padding: 0; } .menu_btn{ min-width: 65px; min-height: 65px; background-color: skyblue; margin: 0 70px; /* text-align: left; */ } #btn{ color: orange; text-align: center; font-weight: bold; margin: 0 20px; /* display: inline-block; */ /* text-decoration: none; */ /* background-color: pink; */ border: none; float: right; position: absolute; right: 0px; height: 65px; min-width: 40.17px; text-align: center; display: flex; align-items: center; } } .kongbai{ width: 100%; height: 65px; /*background-color: pink;*/ } /* footer */ footer{ margin: 0; font-size: 20px; background-color: #eef6ff; width: 100%; } footer .ft1{ width: min(65ch, 100% - 4rem); margin-inline: auto; display: flex; flex-direction: column; align-items: flex-start; flex-wrap: wrap; } footer li{ list-style: none; margin: 0,20px; } footer a{ color: rgb(0, 115, 255); font-weight: 800; text-decoration: none } footer .ft1 a:hover{ background-color: rgba(135, 207, 235, 0.262); border-bottom: 3px solid rgb(0, 115, 255); } footer .ft2{ display: flex; align-items: center; flex-direction: column; flex-wrap: wrap; /* box-sizing: border-box; */ justify-content: center; font-size: 12px; } footer .ft2 p{ margin: 11px auto; } footer img { display: inline-block; width: 22px; }