Allgemeine Beispiel-Tutorials für CSS mit gepunkteten Linien-CSS-Tutorial-php.cn

Allgemeine Beispiel-Tutorials für CSS mit gepunkteten Linien

零下一度

Freigeben： 2017-06-16 13:53:42

Original

2779 Leute haben es durchsucht

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:

Meine vier Seiten sind schwarz gepunktete Ränder

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:

Meine linke Seite ist ein schwarzer gepunkteter Rand

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:

Meine rechte Seite ist ein schwarz gepunkteter Rand

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:

i Der obere Rand ist ein schwarzer gepunkteter Rand

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:

Mein Boden ist ein schwarzer gepunkteter Rand

Der 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:

Mein rechter Rand hat keinen Rand und die anderen drei Seiten sind Beispiele für schwarz gepunktete Ränder

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

Nach dem Login kopieren

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!