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

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

高洛峰
Freigeben: 2017-03-27 18:00:45
Original
4434 Leute haben es durchsucht

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

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

<!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>
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage