html:(34):下划线和删除线

文字排版--下划线

有些情况下想为文字设置为下划线样式，这样可以在视觉上强调文字，可以使用下面代码来实现：

p a{text-decoration:underline;}<p>三年级时，我还是一个<a>胆小如鼠</a>的小女孩。</p>

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>下划线样式</title>
<style type="text/css">
a {text-decoration:underline;    
}
span{text-decoration:underline;}
</style>
</head><body><span>三年级</span>
<p>三年级时，我还是一个<a>胆小如鼠</a>的小女孩。</p> 
</body>
</html>

运行结果

文字排版--删除线

如果想在网页上设置删除线怎么办，这个样式在电商网站上常会见到：

上图中的原价上的删除线使用下面代码就可以实现：

 .oldPrice{text-decoration:line-through;}

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>删除样式</title>
<style type="text/css">
.oldPrice{text-decoration:line-through;}
</style>
</head>
<body>
<p>原价：<span class="oldPrice">300</span>元 现价：230 元</p> 
</body>
</html>

运行结果