HTML 实现：中间正方形被四个长方形环绕的大正方形背景图代码揭秘

以下是一个使用 HTML 和 CSS 实现中间是正方形，外面是四个长方形包着的大正方形图的示例代码： ```html <!DOCTYPE html> <html> <head> <style> .container { width: 500px; height: 500px; background-color: lightgray; position: relative; } .square { width: 200px; height: 200px; background-color: red; position: absolute; top: 150px; left: 150px; } .top-rect { width: 500px; height: 100px; background-color: blue; position: absolute; top: 0; left: 0; } .bottom-rect { width: 500px; height: 100px; background-color: green; position: absolute; bottom: 0; left: 0; } .left-rect { width: 100px; height: 500px; background-color: yellow; position: absolute; top: 0; left: 0; } .right-rect { width: 100px; height: 500px; background-color: purple; position: absolute; right: 0; top: 0; } </style> </head> <body> <div class="container"> <div class="square"></div> <div class="top-rect"></div> <div class="bottom-rect"></div> <div class="left-rect"></div> <div class="right-rect"></div> </div> </body> </html> ``` 在上述代码中，我们首先创建了一个包含容器 `.container`，然后在容器内部通过绝对定位创建了中间的正方形 `.square` 和四个长方形（`.top-rect`、`.bottom-rect`、`.left-rect`、`.right-rect`），并为它们设置了不同的颜色。您可以根据需要修改颜色、尺寸和位置等样式来满足您的具体需求。 ######[AI写代码神器 | 561点数解答 | 2024-11-04 23:30:19]

服务商

更多选项

快捷项

自定义