#introdution{ position: absolute; top: 5%; left: 50%; transform: translate(-50%,0%); width: 80%; height: auto; /*background: rgba(241,243,244,0.2);*/ text-align: center; overflow-wrap: break-word; border-radius: 5% 5%; font-family: 新宋体; } .personnel2{ display: none; } .personnel3{ display: none; } #table1{ width: 91%; float: right; line-height: 25px; } .introdution,.speaker,.main2 { display: flex; } #theme { position: relative; margin-top: 10%; display: table-cell; vertical-align: middle; margin: auto; padding-top: 10%; width: 80%; font-size: 15px; color:black; /* 从麦色改为黑色 */ text-align: left; line-height: 20px; } #speaker { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; margin: auto; margin-top: 10%; width: 80%; left: 8%; font-family: Microsoft Yahei; line-height: 50px; text-align: center; } .table { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; margin: auto; text-align: left; width: 80%; margin-bottom: 10%; } #speaker p { position: relative; width: 90%; } #speaker .speaker { position: relative; left: -15%; } #speaker+p { margin-bottom: 10%; } #main2 { display: table-cell; vertical-align: middle; margin: auto; } #contents { /*margin-left: 5%;*/ position: relative; margin-bottom: 20%; } #contents .organization { font-size: 15px; } #buttons { position: absolute; display: flex; width: 300px; height: 45px; margin: 50px; top: 100%; left: 50%; transform: translate(-50%,0); } #up1 { position: relative; border: 2px solid rgb(54, 119, 231); width: 43px; height: 43px; border-radius: 50% 50%; text-align: center; } #down2 { position: relative; left: 100px; width: 43px; height: 43px; border: 2px solid rgb(54, 119, 231); border-radius: 50% 50%; text-align: center; } a:hover { color: black; /* 从麦色改为黑色 */ } @media screen and (max-width: 1200px) and (min-width: 1000px) { #introdution #theme{ font-size: 15px; } table { width: 100%; } } @media screen and (max-width: 1000px) and (min-width: 768px) { #introdution #theme{ font-size: 15px; } #contents { text-align: unset; padding-right: 10%; margin-left: 0; width: 80%; } .personnel1{ display: none; } .personnel2{ display: block; } table { width: 98%; } } @media screen and (max-width: 768px) { #introdution { width: 100%; } #introdution #theme{ left: 0; width: 100%; padding:2% ; font-size: 15px; } .introdution,.speaker,.main2{ display: unset; } table { width: 98%; } #contents { font-size: 15px; } .personnel1{ display: none; } .personnel3{ display: block; } #contents .organization { font-size: 15px; } } @media screen and (max-width: 375px) { #introdution { width: 100%; } #introdution #theme{ left: 0; width: 100%; padding:2% ; font-size: 15px; } #contents { font-size: 15px; } #contents .organization { font-size: 15px; } .introdution,.speaker,.main2{ display: unset; } table { width: 98%; padding: 0; font-size: 15px; } #last-tr { vertical-align: -webkit-baseline-middle } }