*{ margin:0; padding:0; } .navbox{ width: 100%; height: 36px; background: #f5f5f5; display: flex; justify-content:space-between } .navbox .left{ margin-left: 30px; } .navbox .right{ margin-right: 40px; } .navbox .left, .right{ /* width: 343px; */ height: 100%; display: flex; /* float: left; */ } .navbox .right{ /* width: 647px; */ height: 100%; /* background: blue; */ /* float: right; */ } .navbox .left .navitem, .right .navitem{ font-size: 12px; line-height: 36px; padding:0 10px; cursor: pointer; /* cursor: default; */ } .navbox .left .navitem:hover, .right .navitem:hover{ color: #F60; background: white; } .nav2{ width: 890px; /* height: 242px; */ border: 1px solid #ddd; border-top: none; margin-left: 30px; overflow: auto; padding:20px 0; display: none; position: absolute; z-index: 10000000000; background: white; } .title{ color:#333; font-size: 14px; padding-left: 18px; } .navlist{ float: left; padding-right: 40px; border-right:1px solid #ddd; } .nav2 .navlist:last-child{ border-right: none; } .nav2 ul li{ font-size: 12px; color: #333; list-style: none; } .nav2 ul{ float: left; margin-left: 20px; } .top{ margin-left: 30px; display: flex; align-items: center; position: relative; box-sizing: border-box; /* 定义交叉轴对齐方式 */ /* border: 1px solid red; */ } .searchbox{ width: 540px; height: 40px; border: 2px solid #ff8000; display: flex; border-radius: 20px; /* position: absolute; top:20px */ /* float: left; */ /* 第一个是左上 第二个是右上 第三个是右下 第四个是左下 */ } .logo{ width:190px; height: 90px; margin-right:30px; float: left; position: absolute; top: 20px; } .searchright{ margin-left: 300px; position: relative; top: 30px; box-sizing: border-box; } .searchicon{ width: 15px; height: 36px; background: #ddd; margin-left: 20px; } .shuru{ width: 390px; height: 36px; border: none; outline: none; padding-left: 10px; } .btn{ width: 120px; height:40px; background: #ff8000; color:white; text-align: center; line-height: 40px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; } .searchcontent{ width: 540px; border: 1px solid red; box-sizing: border-box; } .searchcontent .left{ width: 251px; height: 269px; border:1px solid gray; box-sizing: border-box; } .left .title{ width:100%; height: 30px; background: #ddd; line-height: 30px; color: #999; box-sizing: border-box; } .sun{ width:80px; height:80px; margin-left: 30%; margin-top:10%; margin-bottom: 20px; } .tishi{ color: #ddd; text-align:center; }