10-6文字排版--删除线 · 初识HTML+CSS

如果想在网页上设置删除线怎么办，这个样式在电商网站上常会见到： ![](http://img.mukewang.com/53a0149700010f4802370316.jpg) 上图中的原价上的删除线使用下面代码就可以实现： ~~~ .oldPrice{text-decoration:line-through;} ~~~ ### 任务 **我也来试试，为原价设置删除线** 1.在右边编辑器的第7行，输入下面代码： ~~~ .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> ```