首頁 >web前端 >html教學 >hr怎麼設定虛線樣式?多種hr樣式分享!

hr怎麼設定虛線樣式?多種hr樣式分享!

藏色散人
藏色散人原創
2018-11-03 09:31:5122105瀏覽

本篇文章主要跟大家介紹HTML中hr標籤設定虛線的方法以及幾種好看的hr樣式分享。

想必大家對於hr標籤已經非常熟悉了,在我們網頁設計中,常常會需要使用hr標籤達到分隔線的效果。


標籤官方給的定義就是在 HTML 頁面中建立一條水平線。

那麼從美觀上來說,好看的水平線肯定能讓你的網頁內容展現得層次分明,內容清晰可見,並且也會提升用戶體檢。

推薦參考影片教學:《HTML教學

#下面我們就跟大家介紹hr設定虛線樣式的方法以及其他幾款好看的hr樣式分享。

hr使用程式碼範例如下:

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>hr标签使用示例</title>
<head>
    <style>
    </style>
</head>
<body>
<div>
    <hr style=" height:5px;border:none;border-top:2px dotted #ff3844;" /><br>
    <hr style="height:10px;border:none;border-top:10px groove #1094f2;" /><br>
    <hr style="height:11px;border:none;border-top:5px ridge #4cedef;" /><br>
    <hr style="height:8px;border:none;border-top:3px double #9492ff;" />
</div>

</body>
</html>

「前台效果如下:

hr怎麼設定虛線樣式?多種hr樣式分享!

那麼以上就是四款好看的hr樣式分享,其中第一條就是虛線設定。

大家只要熟練的掌握hr標籤的使用,就可以在你的網頁靈活運用。

註:水平分隔線(horizo​​ntal rule)可以在視覺上將文件分隔成各個部分,並且在 HTML 中,


標籤沒有結束標籤。

height:5px;是指hr的高度

border:none;無邊框的設定。

border-top:2px dotted #ff3844;設定水平線的樣式

dotted表示虛線

#185598 表示顏色

那麼本篇就是關於HTML中hr標籤設定虛線以及其他樣式的方法介紹,非常簡單易懂,希望對需要的朋友有所幫助!

以上是hr怎麼設定虛線樣式?多種hr樣式分享!的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn