html_HTML/Xhtml_웹페이지 제작시 점선 테두리 설정 방법

CSS 스타일 및 HTML 태그 요소 사용

다른 HTML 태그에 점선 테두리를 추가하기 위해 몇 가지 공통 태그를 선택하여 점선 테두리 효과를 정렬하고 설정합니다.

1. 일반적인 HTML 태그

p태그

스팬

울리

테이블 tr td

2. CSS 속성 단어를 사용한 예시

경계

너비

키

3. 점선 구현을 위한 CSS 주요 소개

border는 테두리 속성으로, 개체 테두리 효과를 구현하려면 테두리 너비, 테두리 색상, 테두리 스타일(실선 또는 점선)을 설정해야 합니다.

border:1px dashed #F00 테두리 스타일 너비를 1px로 설정하고 점선으로 표시하며 점선은 빨간색으로 표시됩니다.

4. 예시 설명

위 라벨에 동일한 너비, 동일한 높이, 테두리 효과를 설정했습니다.

5. 완전한 HTML 코드:

<ol class="dp-xml">
<li class="alt">nbsp;html>  </li>
<li class="alt"> <meta> </li>
<li class="alt">
<title>html边框虚线演示 www.pcss5.com</title> <style> </style>
</li>
<li class="alt">.bor{border:1px dashed #F00;width:300px;height:60px;margin-top:10px} span{display:block}/*css注释说明：让span形成块*/ </li>
<li class="alt">  </li>
<li class="alt"> <p>p盒子</p> </li>
<li class="alt">
<span>span盒子</span> <ul> </ul>
</li>
<li class="alt">
<li>ul li列表</li> <li>ul li列表</li> <li class="alt"> <table> <li class="alt">
<tr> <td>表格</td> <li class="alt">
<td>表格2</td> </li>
</tr> </li>
<li class="alt">
<tr> <td>数据</td> <li class="alt">
<td>数据2</td> </li>
</tr> </li>
<li class="alt">
</table>  </li>
<li class="alt"> </li>
</ol>

위의 예는 동일한 테두리 점선을 포함하여 html의 다양한 태그에 대해 동일한 스타일을 설정합니다.

6. 브라우저 스크린샷

다양한 태그에 대한 HTML 점선 테두리 효과 스크린샷