Heim > Artikel > Web-Frontend > DIV- und CSS-Methoden zum Implementieren von gepunkteten Rändern |. CSS-gepunktete Unterstreichungen und gepunktete Linien

DIV- und CSS-Methoden zum Implementieren von gepunkteten Rändern |. CSS-gepunktete Unterstreichungen und gepunktete Linien

不言Original: 2018-06-28 13:44:433648Durchsuche

Dieser Artikel stellt hauptsächlich die Methoden von DIV und CSS zum Implementieren von gepunkteten Rändern und gepunkteten Linien vor. Jetzt kann ich ihn mit Ihnen teilen

Hier wird die gepunktete Linie durch den gepunkteten Rand des Border-Attributs gesteuert

1. Gepunktete CSS-Randlinie - TOP
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 dashed #000; 黑色虚线边框[code/]

Beispiel:
CSS-Code:

[code].pcss5{border:1px dashed #000; height:50px;width:350px}

Html-Code:

<p class="pcss5">我的四边为黑色虚线边框</p>

Legen Sie fest Grenze hier Die Abkürzungsmethode definiert den vierseitigen Rand des pcss5-Selektors als 1 Pixel großen schwarzen gepunkteten Rand

2. Gepunktete Linie links:

CSS-Code:

.pcss5-1{border-left:1px dashed #000; height:50px;width:350px}

Html Code:

<p class="pcss5-1">我的左边为黑色虚线边框</p>

Hier ist ein schwarzer gepunkteter Rand auf der linken Seite

3. Gepunktete Linie auf der rechten Seite:

CSS-Code:

.pcss5-2{border-right:1px dashed #000; height:50px;width:350px}

Html-Code:

<p class="pcss5-2">我的右边为黑色虚线边框</p>

Hier setzen wir einen schwarzen gepunkteten Rand auf der rechten Seite

4. Die Oberseite (Oberkante) ist eine gepunktete Linie:

CSS-Code:

.pcss5-3{border-top:1px dashed #000; height:50px;width:350px}

Html-Code:

<p class="pcss5-3">我的上边为黑色虚线边框</p>

Hier wird der obere Rand (Oberkante) als schwarz gepunkteter Rand festgelegt

5. Der untere Rand (Unterkante) ist eine gepunktete Linie:

CSS-Code:

.pcss5-4{border-bottom:1px dashed #000; height:50px;width:350px}

Html-Code:

<p class="pcss5-4">我的下边为黑色虚线边框</p>

Hier ist der untere Rand ( untere Linie) wird auf einer Seite als schwarzer gepunkteter Rand festgelegt

6. Eine Seite ist keine gepunktete Linie, die andere Seite. Wenn die drei Seiten gepunktete Linien sind

Fügen Sie stattdessen den rechten Rand hinzu gepunktete Linien und keine Kanten, und die anderen drei Seiten sind schwarz gepunktete Ränder

CSS-Code:

.pcss5-5{border:1px dashed #000;border-right:0; height:50px;width:350px}

Html-Code:

我的右边边框无边线而其它三边为黑色虚线边框实例 
这里通过先设置了该对象四边为黑色1px虚线边框，紧接着又设置一边边线为0的设置，这样相当于设置了3边的边框虚线属性，但是这里注意边框属性设置前后顺序。 
以上实例完整p+CSS代码如下： 
 
 
 
 
CSS 虚线 pCSS5实例说明www.pcss5.com 
 
 
 
www.pcss5.com css虚线实例实例
我四边为虚线边框
<p class="pcss5-1">我的左边为黑色虚线边框</p>
<p class="pcss5-2">我的右边为黑色虚线边框</p>
<p class="pcss5-3">我的上边为黑色虚线边框</p>
<p class="pcss5-4">我的下边为黑色虚线边框</p>
我的右边边框无边线而其它三边为黑色虚线边框实例

2. Hyperlink gepunktet unterstrichen – TOP

Wir stellen den verlinkten Textinhalt oft so ein, dass er entweder eine gepunktete Unterstreichung mit dem Link hat, oder wir bewegen die Maus über den verlinkten Text und eine gepunktete Unterstreichung erscheint. Um dies zu erreichen, finden Sie hier eine Einführung gepunktete Unterstreichung von CSS-Hyperlinks.

1. Der verlinkte Text hat eine gepunktete Unterstreichung

Hier wird die CSS-Rahmeneigenschaft auch verwendet, um den CSS-Stil des Hyperlinks auf ein Objekt zu steuern.

Demo-CSS-Code:

a{ border-bottom:1px dashed #111;}/* 这里设置带链接文字下方出现虚线下划线*/

a:hover{ border:0;}/* 这里设置鼠标经过被链接文字时不出现虚线 */

Vollständiger Div-CSS-Code:

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

Beschreibung: text-decoration:none; Dies dient zum Entfernen der CSS-Unterstreichung (super Der Link verfügt standardmäßig über das Unterstreichungsattribut)

Das Obige ist Text mit einem CSS-Hyperlink mit einer gepunkteten Unterstreichung.

2. Eine gepunktete Unterstreichung erscheint, wenn die Maus auf dem verlinkten Text platziert wird.

Dies ist dem oben genannten sehr ähnlich. Entfernen Sie einfach die Unterstreichung für Hyperlink A und fügen Sie eine gepunktete Linie unter dem CSS hinzu Text, wenn die Maus darüber fährt, unterstreichen Sie einfach den Rand. Der entsprechende CSS-Code für

lautet:

a{text-decoration:none;}
[/code]a:hover{border-bottom:1px dashed #111;} [/code]

So funktioniert es. Sie können es auch mit dem Hyperlink-Unterstreichungsbeispiel versuchen.

3. Listen-CSS mit gepunkteter Unterstreichung – TOP

Wenn sie auf CSS LI stoßen, hoffen sie oft, dass der untere Teil jeder Inhaltszeile in diesem CSS-Listenstil durch gepunktete Linien getrennt wird, wie gezeigt unten

Hier müssen wir nur den unteren Rand von LI auf einen gepunkteten Rand setzen.

Zuerst legen wir den CSS-Code fest, wenn wir das CSS initialisieren:

li{border-bottom:1px dashed #111;}

Dann können wir den Effekt von li-Listeninhalten erzielen, die durch gepunktete Linien getrennt sind, wie oben gezeigt ( Der untere Teil jedes Li-Inhalts ist ein gepunkteter Rand.)
Außerdem stellen wir häufig fest, dass die gepunktete Linie am unteren Rand eines Li so klein ist wie ein Punkt, und der Rand ist schwierig zu implementieren. Zu diesem Zeitpunkt benötigen wir einen gepunkteten Rand Bild der gepunkteten Linie (eine Seite ist 1 Pixel hoch und breit, 3 Pixel eines 1 Pixel Farbbildes können erreicht werden)

Entsprechender CSS-LI-Code:

Li{background:url(点图片路径) repeat-x 0 bottom}

Wir werden nicht demonstrieren Im Detail stellen wir Ihnen hier auch verschiedene Produktionsmethoden in CSS-Wissenspunkten vor.

4. CSS definiert eine horizontale gepunktete Linie - TOP

Dies ist leicht zu verstehen und kann auch durch Festlegen einer gepunkteten Rahmenlinie auf dem p-Objekt erreicht werden Attribut auf der horizontalen Linienbeschriftung hr.

Es kann hier wie folgt übergeben werden:

Legen Sie eine horizontale gepunktete Linie für p fest:

.pcss5{ height:1px; width:100%; border-bottom:1px dashed #000;}

Entsprechender HTML-Code:

<p class="pcss5"></p>

For hr-Ebene Legen Sie die Attribute der Trennlinie fest:

Die erste Methode besteht darin, das Attribut der gepunkteten Linie im hr-Tag festzulegen:

<hr size=1 style="color: blue;border-style:dashed ;width:100%">

Was hier erklärt wird, ist, dass die Größe ist der Wert von hr, und eine Seite kann auf 1 gesetzt werden.

Die zweite Möglichkeit besteht darin, das CSS-Attribut von hr im CSS-Code oder in der CSS-Datei

hr {border-top:1px dashed #00F ; }

entsprechend dem hr-Titelcode in HTML zu definieren:

<hr size=1>

Stellen Sie hier den Rand für hr auf einen blauen gepunkteten Rand von 1 Pixel am oberen oder unteren Rand ein und legen Sie die Größe von hr auf 1 fest, was ungefähr dem ersten Wert entspricht. Der einzige Unterschied besteht darin, dass Das HR-Tag wird in HTML angezeigt. Das HR-Tag-Attribut ist für CSS festgelegt, wodurch die Codemenge reduziert werden kann, wenn die Webseite mehrmals angezeigt wird.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

CSS-Stil für vertikal zentrierte Bilder in Divs mit variabler Breite und Höhe

Übergangsübergang in CSS3-Einführung zur Verwendung von Animationsanimationsattributen

Das obige ist der detaillierte Inhalt vonDIV- und CSS-Methoden zum Implementieren von gepunkteten Rändern |. CSS-gepunktete Unterstreichungen und gepunktete Linien. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php css css3 html 对象选择器 border transition animation li

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：So beheben Sie den Fehler beim direkten Zugriff auf den Seitenbildpfad nach der Webpack-VerpackungNächster Artikel：So beheben Sie den Fehler beim direkten Zugriff auf den Seitenbildpfad nach der Webpack-Verpackung

In Verbindung stehende Artikel

Mehr sehen