ホームページ > 記事 > ウェブフロントエンド > htmlで点線枠を設定する方法を詳しく紹介します。
htmlで点線枠を設定する方法を詳しく紹介します。
- 高洛峰オリジナル
- 2017-03-03 16:34:566393ブラウズ
CSS スタイルと HTML タグ要素の使用 さまざまな HTML タグに点線の境界線を追加するには、いくつかの共通のタグを選択して、点線の境界線の効果を調整して設定します。
1. 一般的な HTML タグ pタグ スパン ウリ table tr td
2. この例では CSS 属性語を使用しています。 国境 幅 高さ
3. 点線を実現するための重要な CSS の紹介 border は border 属性です。これを実装する場合は、CSS スタイルと HTML タグ要素を使用する必要があります。点線の境界線をさまざまな HTML タグに追加するには、いくつかの共通のタグを選択して点線の境界線効果を設定します。
1. 一般的なHTMLタグpタグspan
ul li
table tr td
2. CSS属性ワードを使用した例borderwidth
height
3 、破線を実現するための CSS に注目してくださいborder は、オブジェクトの境界線効果を実現したい場合、境界線の幅、境界線の色、境界線のスタイル (実線または点線) を設定する必要がありますborder: 1px 破線 #F00 境界線を設定します。スタイルの幅は 1px、破線で、破線は赤です。
4. 説明例上記のラベルに同じ幅、同じ高さ、枠線効果を設定します。
5. 完全な HTML コード:<!DOCTYPE html> <html>
<head> <meta charset="utf-8" />
<title>html边框虚线演示 www.pcss5.com</title> <style>
.bor{border:1px dashed #F00;width:300px;height:60px;margin-top:10px} span{display:block}/*css注释说明：让span形成块*/
</style> </head>
<body> <p class="bor">p盒子</p>
<span class="bor">span盒子</span> <ul class="bor">
<li>ul li列表</li> <li>ul li列表</li>
</ul> <table class="bor">
<tr> <td>表格</td>
<td>表格2</td> </tr>
<tr> <td>数据</td>
<td>数据2</td> </tr>
</table> </body>
</html>上の例では、同じ境界線の点線を含め、HTML 内の異なるタグに同じスタイルを設定します。
6. ブラウザ効果のスクリーンショットさまざまなタグのHTML設定の点線効果のスクリーンショット
HTMLで点線の境界線を設定する方法の詳細と関連記事については、PHPを参照してください。中国語のサイトです！
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。