Rumah > hujung hadapan web > tutorial css > CSS定义HR水平线的样式介绍

CSS定义HR水平线的样式介绍

高洛峰
Lepaskan: 2017-03-27 18:00:45
asal
4435 orang telah melayarinya

 CSS定义HR水平线的几种样式,不要小看了HR水平线哦,用好了会给你的网页增色不少,这一段代码分别定义了几种漂亮的HR样式及颜色,供你参考,如果喜欢,直接拷贝代码就用吧。

 效果如下

 CSS定义HR水平线的样式介绍

<!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>
Salin selepas log masuk

Atas ialah kandungan terperinci CSS定义HR水平线的样式介绍. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan