Heim > Artikel > Web-Frontend > Allgemeine Beispiel-Tutorials für CSS mit gepunkteten Linien

Allgemeine Beispiel-Tutorials für CSS mit gepunkteten Linien

零下一度Original: 2017-06-16 13:53:422681Durchsuche

DIV-CSS-Tutorial mit gepunkteten Linien enthält CSS-Tutorials, die DIV-Fälle mit gepunkteten Linien in verschiedenen häufig vorkommenden Stilen erklären.

In diesem Abschnitt werden gängige CSS-Tutorials mit gepunkteten Linien und DIV vorgestellt. Gepunktete CSS-Linien, Unterstreichungen und gepunktete Listenlinien werden alle behandelt.

1. Gepunktete CSS-Randlinie

Hier wird die gepunktete Linie durch den gepunkteten Rand des Border-Attributs gesteuert. Die unten eingestellte CSS-Höhe (CSS-Höhe) und CSS-Breite (CSS-Breite) beträgt 350 Pixel, um die Anzeige der Demonstration zu erleichtern.
1. Gepunktete Ränder auf vier Seiten
border:1px gestrichelt #000; schwarz gepunkteter Rand
Beispiel:
CSS-Code: .divcss5{border:1px gestrichelt #000; height :50px;width:350px}
Html-Code: 0fd95622ee3d539259ddb2dd2ba82a65Meine vier Seiten sind schwarz gepunktete Ränder16b28748ea4df4d9c2150843fecfba68
Die Rahmenabkürzung wird hier eingestellt, um die vier Seiten zu definieren Rand des divcss5-Selektors als 1px schwarzer gepunkteter Rand

2. Gepunktete Linie links:
CSS-Code: .divcss5-1{border-left:1px dashed #000; height:50px;width:350px }
Html-Code: 8dc7f26bbeb0b2d87fad8d7057caf02bMeine linke Seite ist ein schwarzer gepunkteter Rand16b28748ea4df4d9c2150843fecfba68
Hier habe ich einen schwarzen gepunkteten Rand darauf gesetzt linke Seite

3. Gepunktete Linie auf der rechten Seite:
CSS-Code: .divcss5-2{border-right:1px gestrichelt #000; height:50px;width:350px}
Html-Code: e1fb1ce5043ca7d6bb8d997f43d867f3Meine rechte Seite ist ein schwarz gepunkteter Rand16b28748ea4df4d9c2150843fecfba68
Hier habe ich die rechte Seite so eingestellt, dass sie ein schwarz gepunkteter Rand ist

4. Der obere Rand (oberer Rand) ist eine gepunktete Linie:
CSS-Code: .divcss5-3{border-top:1px dashed #000; height:50px;width:350px 🎜>Html-Code: c01375deed980076d35367a1218bebb7i Der obere Rand ist ein schwarzer gepunkteter Rand16b28748ea4df4d9c2150843fecfba68
Hier ist der obere Rand (oberer Rand) auf einen schwarzen gepunkteten Rand eingestellt

5. Der untere Rand (Unterkante) ist eine gepunktete Linie:
CSS-Code: .divcss5-4{border-bottom:1px gestrichelt #000; height:50px;width :350px🎜>Html-Code: 8de9b8c1fb9699c8b3b7c3e5586585c1Mein Boden ist ein schwarzer gepunkteter Rand16b28748ea4df4d9c2150843fecfba68Der untere Rand (untere Linie) ist als schwarzer gepunkteter Rand festgelegt Seite

6. Wenn eine Seite nicht gepunktet ist, sind die anderen drei Seiten gepunktet

Fügen Sie einen rechten Rand hinzu, der nicht gepunktet, aber ohne Kante ist, und die anderen drei Seiten sind schwarz Gepunktete Ränder
CSS-Code: .divcss5-5{border:1px dashed #000;border-right:0; height:50px;width :350px🎜>Html-Code: 729da26f290815aae4d801940e2a6963Mein rechter Rand hat keinen Rand und die anderen drei Seiten sind Beispiele für schwarz gepunktete Ränder16b28748ea4df4d9c2150843fecfba68Hier stelle ich die vier Seiten des Objekts auf schwarze gepunktete Ränder mit 1 Pixel ein, und dann wird eine Seite auf 0 gesetzt Dies entspricht dem Festlegen der gepunkteten Randattribute von drei Seiten. Achten Sie jedoch auf die Reihenfolge, in der die Randattribute festgelegt werden.

Der vollständige DIV+CSS-Code des obigen Beispiels lautet wie folgt:

2. Hyperlink gepunktet und unterstrichen

<!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>

Wir setzen oft Der verlinkte Text wird entweder mit einer gepunkteten Linie mit einem Link unterstrichen, oder es erscheint eine gepunktete Unterstreichung, wenn die Maus über den Text mit dem Link bewegt wird. Hier stelle ich Ihnen die gepunktete Unterstreichung von CSS-Hyperlinks vor .

1. Der Text mit dem Link ist gepunktet unterstrichen

Hier wird der CSS-Stil des Hyperlinks eines Objekts auch über die CSS-Rahmeneigenschaft gesteuert.

Demonstrations-CSS-Code:
a{ border-bottom:1px dashed #111;}/* Hier legen Sie fest, dass die gestrichelte Unterstreichung unter dem verknüpften Text angezeigt wird*/

a:hover{ border:0 ;} /* Hier legen Sie fest, dass die gepunktete Linie nicht angezeigt wird, wenn die Maus über den verknüpften Text fährt*/

Vollständiger DIV-CSS-Code:

Erklärung: Text- decoration:none; Hiermit wird die CSS-Unterstreichung (das Standard-Unterstreichungsattribut von Hyperlinks) entfernt

Das obige ist der detaillierte Inhalt vonAllgemeine Beispiel-Tutorials für CSS mit gepunkteten Linien. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Detaillierte Erläuterung der Grenzinstanzen in CSS3Nächster Artikel：Detaillierte Erläuterung der Grenzinstanzen in CSS3

In Verbindung stehende Artikel

Mehr sehen