HTML 및 CSS(그림 및 텍스트)의 텍스트에 취소선을 추가하는 세 가지 방법-HTML 튜토리얼-php.cn

HTML 및 CSS(그림 및 텍스트)의 텍스트에 취소선을 추가하는 세 가지 방법

yulia

풀어 주다： 2018-10-25 15:01:41

원래의

19739명이 탐색했습니다.

매년 열리는 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:

HTML 및 CSS(그림 및 텍스트)의 텍스트에 취소선을 추가하는 세 가지 방법

방법 2: 태그를 삭제하려면 HTML에서

설명 예: HTML에서 태그를 직접 사용하여 텍스트에 취소선을 추가합니다.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <s>这个商品原价999</s> 现价499 </body> </html>
로그인 후 복사
효과는 그림과 같습니다.
방법 3: HTML 태그에서 ~~를 사용하여 삭제~~
예제 설명: 태그는 텍스트에 취소선을 추가할 수 있어 사용이 간편합니다. 코드는 다음과 같습니다:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> 电视机原价<del>¥4000</del> 电视剧现价¥2999 </body> </html>
로그인 후 복사
효과는 그림과 같습니다:

요약: 텍스트에 취소선을 추가하는 방법에는 태그, HTML의 ~~CSS의 텍스트 장식: 라인 스루 스타일. 어떤 방법을 선택할지는 개인의 습관과 업무 요구에 따라 직접 사용하는 것이 더 편리합니다.~~
【관련 추천 튜토리얼】
1.
HTML 튜토리얼2.
CSS3 튜토리얼3.
위 내용은 HTML 및 CSS(그림 및 텍스트)의 텍스트에 취소선을 추가하는 세 가지 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!