阅读量:0
1.第一層和第二層之間的間隙：以為導航欄超過高度朝下擠下來了
2.第2層兩個div中的空隙
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> @font-face { font-family: 'iconfont'; src: url('./font/iconfont.ttf?t=1722477916565') format('truetype'); } .iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body{ padding: 0; margin: 0; background-color: #F5F5F5; font-size: 16px; font-family: Arial, Helvetica, sans-serif; } .clear::after{ content: ""; display: block; clear: both; } .clear::before{ content: ""; display: block; clear: both; } .fl{ float: left; } .fr{ float: right; } .ml7{ margin-left: 7px; } .mr7{ margin-right: 7px; } .mtb7{ margin: 7px 0px; } ul li{ list-style: none; } .layer{ margin: 0 auto; } .c5{ color: #f50; } a{ text-decoration: none; } #header1{ background-color: #F5F5F5; height: 36px; width: 1280px; } #header1 .selectcorp{ width: 500px; font-size: 16px; background-color: white; } #header1 .corpinfo{ height: 30px; line-height: 30px; } #header1 .userinfo{ margin-right: 30px; height: 30px; line-height: 30px; } #header1 .userinfo .ritem{ margin: 0 15px; } #header1 .userinfo .ritem img{ width: 18px; height: 18px; } /* 第2塊 logo部分 */ #header2{ background-color: #e1e9ff; height: 120px; } #header2 .content1{ background-color: #e1e9ff; height: 180px; width: 1280px; background-color: greenyellow; /* overflow: hidden; */ } #header2 .content1 .logo{ width: 600px; height: 180px; line-height: 180px; background-color: #f50; } #header2 .content1 .logo span{ display: inline-block; height: 180px; line-height: 180px; font-size: 50px; font-weight: bold; background-color: #f50; } </style> </head> <body> <!-- 第一行登錄信息 --> <div id="header1" class="layer clear"> <div class="corpinfo mtb7 fl"> <span>公司代碼:</span> <select class="selectcorp"> <option>000XXX--XXXXXXXXX股份有限公司</option> </select> </div> <ul class="userinfo mtb7 fr"> <li class="ritem fr"> <span class="iconfont"></span> <span>安全退出</span> </li> <li class="ritem fr"> <span class="iconfont"></span> <span>修改密碼</span></li> <li class="ritem fr"> <span class="iconfont"></span> <span>權限變更</span></li> <li class="ritem fr"> <span class="iconfont"></span> <span>用戶名</span> </li> </ul> </div> <!-- 第2行系統logo --> <div id="header2"> <div class="content1 layer clear"> <div class="logo fl"> <img src=""><span>|XXX系統</span> </div> <div class="logo fr"> <span style="color: #3378cf;">XXX化 XXX化 XXX化</span> </div> </div> </div> <div class="lastone"> </div> </body> </html>