明輝手游網(wǎng)中心：是一個免費提供流行視頻軟件教程、在線學(xué)習(xí)分享的學(xué)習(xí)平臺！

hr如何設(shè)置虛線樣式？多種hr樣式分享！

發(fā)表時間：2023-08-29 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：

[摘要]本篇文章主要給大家介紹HTML中hr標(biāo)簽設(shè)置虛線的方法以及幾種好看的hr樣式分享。想必大家對于hr標(biāo)簽已經(jīng)非常熟悉了，在我們網(wǎng)頁設(shè)計中，常常會需要使用hr標(biāo)簽達(dá)到分隔線的效果。<hr> 標(biāo)簽官方給的定義就是在 HTML 頁面中創(chuàng)建一條水平線。那么從美觀上來說，好看的水平線肯定能讓你的網(wǎng)...
本篇文章主要給大家介紹HTML中hr標(biāo)簽設(shè)置虛線的方法以及幾種好看的hr樣式分享。

想必大家對于hr標(biāo)簽已經(jīng)非常熟悉了，在我們網(wǎng)頁設(shè)計中，常常會需要使用hr標(biāo)簽達(dá)到分隔線的效果。

<hr> 標(biāo)簽官方給的定義就是在 HTML 頁面中創(chuàng)建一條水平線。

那么從美觀上來說，好看的水平線肯定能讓你的網(wǎng)頁內(nèi)容展現(xiàn)得層次分明，內(nèi)容清晰可見，并且也會提升用戶體檢。

推薦參考視頻教程：《HTML教程》

下面我們就給大家介紹hr設(shè)置虛線樣式的方法以及其他幾款好看的hr樣式分享。

hr使用代碼示例如下：

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>hr標(biāo)簽使用示例</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>

前臺效果如下：

f70bb3f5761517b46f808bcd462cb97.png

那么以上就是四款好看的hr樣式分享，其中第一條就是虛線設(shè)置。

大家只要熟練的掌握hr標(biāo)簽的使用，就可以在你的網(wǎng)頁靈活運用。

注：水平分隔線（horizontal rule）可以在視覺上將文檔分隔成各個部分，并且在 HTML 中，<hr> 標(biāo)簽沒有結(jié)束標(biāo)簽。

height:5px;是指hr的高度

border:none;無邊框的設(shè)置。

border-top:2px dotted #ff3844;設(shè)置水平線的樣式

dotted表示虛線

#185598 表示顏色

那么本篇就是關(guān)于HTML中hr標(biāo)簽設(shè)置虛線以及其他樣式的方法介紹，非常簡單易懂，希望對需要的朋友有所幫助！

以上就是hr怎么設(shè)置虛線樣式？多種hr樣式分享！的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！


網(wǎng)站建設(shè)是一個廣義的術(shù)語，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。