HTML+CSS实现：中央正方形被四个长方形环绕的大正方形背景图

要使用HTML和CSS创建一个包含中央正方形和包围它的四个长方形的大正方形图，可以视图如下构建： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>正方形与长方形</title> <style> body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f0f0f0; /* 颜色 */ } .outer-square { position: relative; width: 300px; /* 大正方形的边长 */ height: 300px; /* 大正方形的边长 */ background-color: #d3d3d3; /* 外部长方形的色 */ } .inner-square { position: absolute; left: calc(50% - 50px); /* 中心对齐 */ top: calc(50% - 50px); /* 中心对齐 */ width: 100px; /* 内部正方形的边长 */ height: 100px; /* 内部正方形的边长 */ background-color: #4CAF50; /* 内部正方形的色 */ } .rectangle { position: absolute; background-color: #2196F3; /* 外部长方形的色 */ } .top-rectangle { top: -50px; /* 位置调整 */ left: 0; width: 300px; /* 外部长方形的宽度 */ height: 50px; /* 外部长方形的高度 */ } .bottom-rectangle { bottom: -50px; /* 位置调整 */ left: 0; width: 300px; height: 50px; } .left-rectangle { top: 0; left: -50px; /* 位置调整 */ width: 50px; height: 300px; } .right-rectangle { top: 0; right: -50px; /* 位置调整 */ width: 50px; height: 300px; } </style> </head> <body> <div class="outer-square"> <div class="inner-square"></div> <div class="rectangle top-rectangle"></div> <div class="rectangle bottom-rectangle"></div> <div class="rectangle left-rectangle"></div> <div class="rectangle right-rectangle"></div> </div> </body> </html> ``` 说明 - 创建了一个大正方形 `.outer-square`。 - 在中间放置了一个较小的正方形 `.inner-square`。 - 用四个长方形（上、下、左、右）包围中间的正方形，每个长方形的位置和大小通过CSS进行调整。 - 可以通过修改CSS中的`width`和`height`属性来改变正方形和长方形的大小。 ######[AI写代码神器 | 1653点数解答 | 2024-11-04 23:18:55]

服务商

更多选项

快捷项

自定义