Heim > Artikel > Web-Frontend > Einführung in den CSS-Stil zur Definition horizontaler HR-Linien

Einführung in den CSS-Stil zur Definition horizontaler HR-Linien

高洛峰Original: 2017-03-27 18:00:454361Durchsuche

CSS definiert mehrere Stile von HR-Horizontallinien. Sobald es verwendet wird, werden mehrere schöne HR-Stile und -Farben als Referenz definiert . Wenn es Ihnen gefällt, kopieren Sie einfach den Code und verwenden Sie ihn.

Die Wirkung ist wie folgt

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
 <title>CSS定义HR水平线</title> 
 <style type="text/css"> 
 <!-- 
.hr0{ height:1px;border:none;border-top:1px dashed #0066CC;} 
.hr1{ height:1px;border:none;border-top:1px solid #555555;} 
.hr2{ height:3px;border:none;border-top:3px double red;} 
.hr3{ height:5px;border:none;border-top:5px ridge green;} 
.hr4{ height:10px;border:none;border-top:10px groove skyblue;} 
 --> 
 </style> 
</head> 
<body> 
<hr class="hr0" /> 
<hr class="hr1" /> 
<hr class="hr2" /> 
<hr class="hr3" /> 
<hr class="hr4" /> 
</body> 
</html>

Das obige ist der detaillierte Inhalt vonEinführung in den CSS-Stil zur Definition horizontaler HR-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 Einführung in Web-Front-End-Wissenspunkte im CSS-StilNächster Artikel：Detaillierte Einführung in Web-Front-End-Wissenspunkte im CSS-Stil

In Verbindung stehende Artikel

Mehr sehen