首页编写相应的 “实验4.html”和CSS外部样式表文件“实验4.css”设计要求:(1)页面分为上、中、下3个区域,其中中间区域分为左、右两个区域。在上面区域中分别插入图像(image-10-1-lo

编写相应的 “实验4.html”和CSS外部样式表文件“实验4.css”设计要求:(1)页面分为上、中、下3个区域,其中中间区域分为左、右两个区域。在上面区域中分别插入图像(image-10-1-lo

时间: 2024-12-06 22:21:20 浏览: 2

在编写HTML文件"实验4.html"和CSS外部样式表文件"实验4.css"时，你可以按照以下设计要求来完成： **实验4.html:** ```html <!DOCTYPE html> <html lang="zh"> <head> <link rel="stylesheet" type="text/css" href="实验4.css"> <title>实验4 - 上中下布局</title> </head> <body>  <header> <img src="image-10-1-left.jpg" class="upper-image left-side">  <img src="image-10-1-right.jpg" class="upper-image right-side">  </header>  <div class="middle-section"> <div class="left-column">  </div> <div class="right-column">  </div> </div>  <footer>  </footer> </body> </html> ``` **实验4.css:** ```css * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: Arial, sans-serif; } header { display: flex; justify-content: space-between; /* 分隔左右两侧 */ align-items: center; height: 200px; } .upper-image { width: 50%; height: auto; } .left-side { background-color: lightblue; } .right-side { background-color: lightgreen; } .middle-section { display: flex; flex-direction: row; min-height: 600px; } .left-column, .right-column { flex: 1; padding: 20px; } footer { background-color: #f0f0f0; text-align: center; padding: 20px; margin-top: 50px; } ```

阅读全文