htmlで点線枠を設定する方法を詳しく紹介します。-htmlチュートリアル-php.cn

htmlで点線枠を設定する方法を詳しく紹介します。

高洛峰

リリース： 2017-03-03 16:34:56

オリジナル

6421 人が閲覧しました

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で点線枠を設定する方法を詳しく紹介します。 HTMLで点線の境界線を設定する方法の詳細と関連記事については、PHPを参照してください。中国語のサイトです！