ホームページ > 記事 > ウェブフロントエンド > html_HTML/Xhtml_Web ページ制作で点線枠を設定する方法
html_HTML/Xhtml_Web ページ制作で点線枠を設定する方法
- WBOYオリジナル
- 2016-05-16 16:38:023066ブラウズ
CSS スタイルと HTML タグ要素の使用
さまざまな HTML タグに点線の境界線を追加するには、いくつかの共通のタグを選択して、点線の境界線効果を配置および設定します。
1. 一般的な HTML タグ
pタグ
スパン
ウルリ
テーブル tr td
2. この例では CSS 属性の単語を使用します
ボーダー
幅
身長
3. 点線を実現するための CSS の概要
border は境界線の属性です。オブジェクトの境界線効果を実現したい場合は、境界線の幅、境界線の色、境界線のスタイル (実線または点線) を設定する必要があります。
border:1px 破線 #F00 これはボーダースタイルの幅を1pxの点線に設定するもので、点線は赤です。
4. 説明例
上記のラベルには、同じ幅、同じ高さ、境界線の効果を設定します。
5. 完全な HTML コード:
<ol class="dp-xml">
<li class="alt"><!DOCTYPE html> <html> </li>
<li class="alt"><head> <meta charset="utf-8" /> </li>
<li class="alt"><title>html边框虚线演示 www.pcss5.com</title> <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"></style> </head> </li>
<li class="alt"><body> <p class="bor">p盒子</p> </li>
<li class="alt"><span class="bor">span盒子</span> <ul class="bor"> </li>
<li class="alt"><li>ul li列表</li> <li>ul li列表</li> </li>
<li class="alt"></ul> <table class="bor"> </li>
<li class="alt"><tr> <td>表格</td> </li>
<li class="alt"><td>表格2</td> </tr> </li>
<li class="alt"><tr> <td>数据</td> </li>
<li class="alt"><td>数据2</td> </tr> </li>
<li class="alt"></table> </body> </li>
<li class="alt"></html> </li>
</ol>
上記の例では、同じ境界線の点線を含め、HTML の異なるタグに同じスタイルを設定します。
6. ブラウザのスクリーンショット
さまざまなタグの HTML 点線境界線効果のスクリーンショット
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。