首页css蓝色背景圆圈白色数字

css蓝色背景圆圈白色数字

时间: 2024-12-05 20:13:48 浏览: 14

要实现一个蓝色背景的圆圈并在其中显示白色数字，可以使用HTML和CSS来完成。以下是一个简单的示例代码： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>蓝色背景圆圈白色数字</title> <style> .circle { width: 100px; height: 100px; background-color: blue; border-radius: 50%; display: flex; justify-content: center; align-items: center; color: white; font-size: 24px; font-weight: bold; } </style> </head> <body> <div class="circle">1</div> </body> </html> ``` 在这个示例中： 1. `.circle` 类定义了圆圈的基本样式： - `width` 和 `height` 设置圆圈的宽度和高度。 - `background-color` 设置背景颜色为蓝色。 - `border-radius: 50%` 使元素变为圆形。 - `display: flex` 以及 `justify-content` 和 `align-items` 使数字在圆圈中居中显示。 - `color` 设置数字颜色为白色。 - `font-size` 和 `font-weight` 设置数字的字体大小和粗细。将这段代码保存为一个HTML文件并在浏览器中打开，你将看到一个蓝色背景的圆圈，其中包含一个居中的白色数字“1”。

阅读全文