HTML 및 CSS(그림 및 텍스트)의 텍스트에 취소선을 추가하는 세 가지 방법
- yulia원래의
- 2018-10-25 15:01:4119658검색
매년 열리는 Double Eleven 쇼핑 페스티벌이 곧 다가옵니다. Taobao를 탐색할 때 제품 가격에 확실히 주목하게 될 것입니다. 프런트엔드 개발자로서 제품의 원래 가격에 취소선이 추가된 것을 보셨나요? CSS 취소선 텍스트를 사용하는 방법을 알고 있나요? 이 문서에는 HTML의 취소선 태그와 CSS의 취소선 스타일을 포함하여 취소선을 추가하는 세 가지 방법이 요약되어 있으며 관심 있는 친구들이 살펴볼 수 있습니다.
텍스트에 취소선을 추가하는 방법에는 세 가지가 있습니다. 하나는 CSS의 텍스트 장식 스타일이고, 다른 하나는 태그이며 마지막은 입니다. 델>
방법 1: CSS에서 텍스트 장식을 사용하여 취소선 스타일 설정
예제 설명: 태그에 삭제할 제품의 가격을 설정하고, 태그에 클래스 이름을 지정합니다. p를 추가하고 CSS 스타일 텍스트 장식: 특정 코드는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.p{text-decoration: line-through;}
</style>
</head>
<body>
<p>深层补水面膜30片原价¥<span class="p">399</span></p>
<p>双十一面膜30片¥299</p>
</body>
</html>Rendering:
방법 2: 태그를 삭제하려면 HTML에서
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <s>这个商品原价999</s> <p>现价499</p> </body> </html>효과는 그림과 같습니다.
방법 3: HTML 태그에서 를 사용하여 삭제
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p>电视机原价<del>¥4000</del></p> <p>电视剧现价¥2999</p> </body> </html>효과는 그림과 같습니다:
위 내용은 HTML 및 CSS(그림 및 텍스트)의 텍스트에 취소선을 추가하는 세 가지 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.