一般的な CSS 点線のサンプルチュートリアル

零下一度

リリース： 2017-06-16 13:53:42

オリジナル

2753 人が閲覧しました

DIV CSS 点線チュートリアルには、一般的な DIV 点線のケースをさまざまなスタイルで説明する CSS チュートリアルが含まれています。

このセクションでは、一般的な CSS 点線と DIV チュートリアルを紹介します。 CSS の点線、下線、リスト点線はすべて処理されます。

1.CSSボーダー点線

ここで、点線はborder属性の点線ボーダーで制御されます。以下に設定する CSS の高さ (CSS の高さ) と CSS の幅 (CSS の幅) は、デモを見やすくするために 350 ピクセルです。
1. 四辺の点線
border:1px 破線 #000; 黒い点線の境界線
CSS コード: .divcss5{border:1px 破線 #000; width:350px}
HTML コード: < ;div class="divcss5">私の四辺は黒い点線です

ここで枠線の略称を設定して、divcss5 セレクターの四辺の枠を 1px の黒い点線として定義します

2.左側:
CSS コード: .divcss5-1{border-left:1px 破線 #000; height:50px;width:350px} Html コード:

私の左側は黒い点線の境界線< /div>
これは左側の黒い点線の境界線です

CSS コード: .divcss5-2{border-right:1px 破線 #000; height:50px;width:350px}

Html コード:

右側は黒い点線の境界線です

ここでは右側を黒い点線の境界線に設定します

4. 上端 (上端) は点線です:

CSS コード: .divcss5-3{border-top:1px 破線 #000; height:50px;width:350px}

Html コード:

私の上部は黒い点線の境界線です

ここでは上端(上端)を黒い点線の境界線として設定しています

5.点線:

CSS コード: .divcss5-4{border-bottom:1px 破線 # 000; height:50px;width:350px}

HTML コード:

下端は黒い点線の境界線です

ここで下端(下の境界線)を設定します。黒い点線の境界線

6. いずれかの辺が点線でなく、他の 3 つの辺が点線である場合

右側の境界線を追加します。点線ではありませんがエッジがなく、他の 3 つの側面は黒い点線の境界線です

CSS コード: .divcss5-5{border: 1px 破線 #000;border-right:0; height:50px;width:350px}HTML コード:

右側の境界線には境界線がなく、他の 3 つの辺は黒い点線の境界線です

ここでは、まずオブジェクトの 4 つの辺を黒の 1px に設定します。これは 3 辺の点線属性を設定するのと同じですが、前後の枠線属性の設定に注意してください。
上記の例の完全な DIV+CSS コードは次のとおりです:

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>CSS 虚线 DIVCSS5实例说明<title>www.php.cn</title>
<style>
.divcss5{ border:1px dashed #000; height:50px; width:350px}
.divcss5-1{border-left:1px dashed #000; height:50px;width:350px}
.divcss5-2{border-right:1px dashed #000; height:50px;width:350px}
.divcss5-3{border-top:1px dashed #000; height:50px;width:350px}
.divcss5-4{border-bottom:1px dashed #000; height:50px;width:350px}
.divcss5-5{border:1px dashed #000; border-right:0;height:50px;width:350px}
/* www.divcss5.com实例 */
</style>
</head>
<body>
www.divcss5.com css虚线实例实例<br>
<div class="divcss5">我四边为虚线边框</div><br>
<div class="divcss5-1">我的左边为黑色虚线边框</div><br>
<div class="divcss5-2">我的右边为黑色虚线边框</div><br>
<div class="divcss5-3">我的上边为黑色虚线边框</div><br>
<div class="divcss5-4">我的下边为黑色虚线边框</div><br>
<div class="divcss5-5">我的右边边框无边线而其它三边为黑色虚线边框实例</div>
</body>
</html>

ログイン後にコピー

2. ハイパーリンクの点線の下線

多くの場合、リンクされたテキストコンテンツに点線の下線が含まれるリンクを設定するか、マウスをその上に移動するように設定します。リンクされたテキストに点線の下線が表示されます。これを実現するにはどうすればよいでしょうか。ここでは CSS ハイパーリンクの点線下線について紹介します。 1. リンクされたテキストには点線の下線が付いています

ここでは、CSS border プロパティを使用して、オブジェクトのハイパーリンクの CSS スタイルも制御します。

デモ CSS コード:

a{ border-bottom:1px 破線 #111;}/* ここで、リンクされたテキストの下に表示される点線の下線を設定します*/
a:hover{ border:0;}/* ここで、マウスが通過した後のリンク text*/

Complete DIV CSS コード:

<!DOCTYPE html><html><head><meta charset="gb2312" /><title>CSS 虚线下划线 DIVCSS5实例说明</title><style>a{ border-bottom:1px dashed #111;text-decoration:none;}a:hover{ border:0;}</style></head>
<body>欢迎到<a href="www.php.cn">CSS教程网</a>的www.php.cn- divcss5学习CSS</body></html>

ログイン後にコピー

指示: text-decoration:none; これは CSS 下線 (ハイパーリンクのデフォルトの下線属性) を削除するためのものです

以上が一般的な CSS 点線のサンプルチュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。