实现价格中间有道横线 且颜色白色
时间: 2024-09-12 12:15:23 浏览: 40
Python 20行简单实现有道在线翻译的详解
在Web开发中,如果你想要在显示价格时中间有一条横线,并且颜色为白色,你可以使用HTML和CSS来实现这个效果。以下是一个简单的实现方法:
1. 使用`<del>`标签来表示删除的文本,这通常会显示一条横线在文字上。
2. 使用CSS来设置`<del>`标签的文本颜色为白色,以及横线的颜色。
示例代码如下:
HTML:
```html
<p>原价:<del style="color:white;">¥999.00</del></p>
<p>折扣价:<span style="color:green;">¥599.00</span></p>
```
在上述代码中,`<del>`标签内的文本会显示一条默认的删除线,而通过内联样式`style="color:white;"`设置了文本颜色为白色。如果你想要调整删除线的颜色,需要使用CSS的`text-decoration-color`属性。
CSS:
```css
del {
text-decoration: line-through; /* 添加删除线 */
text-decoration-color: white; /* 设置删除线颜色为白色 */
}
```
将这段CSS添加到你的样式表中,或者在HTML文件的`<head>`标签内通过`<style>`标签引入,就可以实现价格中间有道白色横线的效果。
阅读全文