body { font-family: Arial, sans-serif; margin: 0; padding: 0; height: 100px; float: left;/*float(浮动):用于元素水平方向的布局*/ } header { background-color: aqua; border: 1px solid black; padding:10px; margin-bottom: 10px; border-radius: 20px; } headerx { background-color: aqua; border: 1px solid black; padding:10px; margin-bottom: 10px; border-radius: 20px; } h1 { margin: 0; } nav ul { list-style-type: none; margin: 5px; padding: 5px; width: 100%; justify-content:center; display: inline-flex; } nav li { margin-right: auto; margin-left: auto; color: black; } nav asd{ text-align:left; color: black; float: left; } nav a { color: #fff; text-decoration: none; } nav form { display: flex; float: right; margin-left: 30px; width: 200px; height: 30px; } nav input[type="text"] { padding: 5px; border-radius: 5px; border: none; margin-right: 10px; } nav button[type="submit"] { background-color: #fff; color: #333; border: none; padding: 5px 10px; border-radius: 5px; cursor: pointer; } main { padding: 20px; } section { margin-bottom: 40px; } h2 { margin-top: 0; } ul { list-style-type: none; margin: 0; padding: 0; } footer { height: auto; width: auto; background-color: aqua; color:black; padding: 10px; text-align: center; } box{ float: left; display: inline-block; padding: 10px; border: 1px solid blue; width: 700px; height: 450px; margin-right: 5px; margin-left: 20px; margin-bottom: 20px; border-radius: 30px; } box2{ float: right; display: inline-block; width: 200px; height: 150px; background-image: url("pic/IMG_20230322_121249.jpg"); background-size: 100%; border: 1px solid blue; margin-right: 5px; padding: 1px; } box21 { float: right; display: inline-block; width: 255px; height: 150px; background-image: url("pic/1679411563600.png"); background-size: 100%; border: 1px solid blue; margin-right: 5px; padding: 1px; } box22{ float: right; display: inline-block; width: 200px; height: 250px; background-image: url("pic/1679411782998.jpg"); background-size: 100%; border: 1px solid blue; margin-right: 5px; padding: 1px; } box23{ float: right; display: inline-block; width: 330px; height: 250px; background-image: url("pic/1679412944166.jpg"); background-size: 100%; border: 1px solid blue; margin-right: 5px; padding: 1px; } box24{ float: right; display: inline-block; width: 430px; height: 250px; background-image: url("pic/1679413146605.png"); background-size: 100%; border: 1px solid blue; margin-right: 5px; padding: 1px; } box25{ float: right; display: inline-block; width: 400px; height: 300px; background-image: url("pic/微信图片_20230331213901.jpg"); background-size: 100%; border: 1px solid blue; margin-right: 5px; padding: 1px; } box26{ float:left; display: inline-block; width: 400px; height: 300px; background-image: url("pic/屏幕截图(4508).png"); background-size: 100%; border: 1px solid blue; margin-right: 5px; padding: 1px; } box27{ float: left; display: inline-block; width: 400px; height: 300px; background-image: url("pic/微信图片_20230331223009.jpg"); background-size: 100%; border: 1px solid blue; margin-right: 5px; padding: 1px; } box28{ float: left; display: inline-block; width: 400px; height: 300px; background-image: url("pic/IMG_20230321_225135.jpg"); background-size: 100%; border: 1px solid blue; margin-right: 5px; padding: 1px; } box29{ float: left; display: inline-block; width: 400px; height: 280px; background-image: url("pic/b9e72aafe7704a62af821a5a4b8fb5a3.png"); background-size: 100%; border: 1px solid blue; margin-right: 5px; padding: 1px; } box4{ float: left; display: inline-block; padding: 10px; border-bottom:1px solid blue ; border-left:1px solid blue ; width: 745px; height: 350px; margin-bottom: 20px; } box5{ float: left; display: inline-block; padding: 10px; border-bottom:1px solid blue ; width: 745px; height: 400px; margin-bottom: 20px; } box3{ float: left; display: inline-block; padding: 10px; border-top: 1px solid blue; border-bottom:1px solid blue ; border-left:1px solid blue ; width: 490px; height: 300px; } box10{ float: left; display: inline-block; padding: 5px; border: 1px solid blue; width: 100%; height: 200px; border-radius: 30px; } text{ text-align: center; } text2{ text-align: left; } clear{ clear: both; display: block; } p1{ font-size: 17px; margin:10px; clear: both; display: block; }