酷代码 AI
菜单
服务商

用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`),并为它们设置了不同的颜色。您可以根据需要修改颜色、尺寸和位置等样式来满足您的具体需求。 [2024-11-04 23:30:19 | AI写代码神器 | 561点数解答]

相关提问
实用工具查看更多
今日油价 [生活类]
图片互转base64 [开发类]
时间转换器 [开发类]
数独游戏 [娱乐类]
经典推箱子 [娱乐类]
AI摸鱼五子棋 [娱乐类]