首页只用html制作奥运五环

只用html制作奥运五环

时间: 2024-10-23 22:21:08 浏览: 25

要在HTML中仅使用纯标记来创建奥运五环，你可以利用CSS的颜色和布局来实现。这里是一个简单的例子： ```html <!DOCTYPE html> <html lang="zh"> <head> <style> .ring { width: 150px; height: 150px; position: absolute; } .ring-1 { background-color: #006400; /* 绿色 */ top: 50px; left: 50px; } .ring-2 { background-color: #ffbf00; /* 黄色 */ top: 75px; left: 75px; transform: rotate(45deg); } .ring-3 { background-color: #ffff00; /* 黄色 */ top: 100px; left: 100px; transform: rotate(90deg); } .ring-4 { background-color: #f08000; /* 橙色 */ top: 125px; left: 125px; transform: rotate(135deg); } .ring-5 { background-color: #ff0000; /* 红色 */ top: 150px; left: 150px; transform: rotate(180deg); } </style> </head> <body> <div class="ring ring-1"></div> <div class="ring ring-2"></div> <div class="ring ring-3"></div> <div class="ring ring-4"></div> <div class="ring ring-5"></div> </body> </html> ``` 这个示例中，我们创建了五个圆形 `.ring`，每个圆代表一个奥林匹克环，通过设置背景颜色和旋转角度来模拟五环的效果。

阅读全文