在CSS+DIV中如何做到将价格划掉的效果

html-css0143

在CSS+DIV中如何做到将价格划掉的效果,第1张

1 用到的知识点是html中 tex-decoration 属性；text-decoration的属性包括 ： {text-decoration:overline}

{text-decoration:line-through}

{text-decoration:underline}

{text-decoration:blink}

将价格划掉的效果  用到的是line-through值。

2 下面是tex-decoration  的使用案例，代码可以直接复制到浏览器上面进行运行。

<html>

<head>

<style type="text/css">

h2 {text-decoration: line-through}

</style>

</head>

<body>

<h2>20元</h1>

</body>

</html>

3 下面是案例在浏览器上运行的效果图  ：

css只能通过背景图形式来给文档添加图片

background-image: url(图片地址)

background: url(图片地址) 0 0 no-repeat

.img1{

background-image: url(1.jpg)

background-size: 200px

}

<div class="img1"></div>

css插入图片方法如下：

操作设备：戴尔笔记本电脑

操作系统：win10

操作程序：html编辑器v8.21

1、打开html编辑器并创建一个新的html文件。

2、新建完一个新的html文件后，在index.html的<style>标签中，输入如下所示的CSS代码。

3、输入完CSS代码之后，接下来运行index.html页面，可以发现，本地图片通过背景图片衜中的本地路径成功调用为了背景图片，图片就成功加入了。