首页web创建3个span元素样式要求: 分别设置宽高200px,和不同的背景色, 10px的外边距, 10像素的内间距, 和边框设置为 5像素宽度, 实线, 红色要求: 将3个span元素改为块级元素, 并横向排列

web创建3个span元素样式要求: 分别设置宽高200px,和不同的背景色, 10px的外边距, 10像素的内间距, 和边框设置为 5像素宽度, 实线, 红色要求: 将3个span元素改为块级元素, 并横向排列

时间: 2024-11-27 15:16:43 浏览: 28

在HTML中创建三个`<span>`元素并满足您给出的样式要求，可以这样做： ```html <!DOCTYPE html> <html lang="zh"> <head> <style> .block-span { display: inline-block; /* 将span变为块级元素 */ width: 200px; height: 200px; margin: 10px; /* 设置10px外边距 */ padding: 10px; /* 设置10px内间距 */ border: 5px solid red; /* 边框5px宽，实线，红色 */ } .color1 { background-color: #FF0000; } /* 背景颜色1，这里是红色示例 */ .color2 { background-color: #00FF00; } /* 背景颜色2，这里是绿色示例 */ .color3 { background-color: #0000FF; } /* 背景颜色3，这里是蓝色示例 */ </style> </head> <body> <div> <span class="block-span color1"></span> <span class="block-span color2"></span> <span class="block-span color3"></span> </div> </body> </html> ``` 在这个例子中，我们创建了三个`.block-span`类的`<span>`元素，并分别赋予它们不同的背景颜色。每个`.block-span`都具备所需的样式属性。

阅读全文