本篇文章主要跟大家介紹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標籤的使用,就可以在你的網頁靈活運用。
註:水平分隔線(horizontal rule)可以在視覺上將文件分隔成各個部分,並且在 HTML 中,
height:5px;是指hr的高度
border:none;無邊框的設定。
border-top:2px dotted #ff3844;設定水平線的樣式
dotted表示虛線
#185598 表示顏色
那麼本篇就是關於HTML中hr標籤設定虛線以及其他樣式的方法介紹,非常簡單易懂,希望對需要的朋友有所幫助!
以上是hr怎麼設定虛線樣式?多種hr樣式分享!的詳細內容。更多資訊請關注PHP中文網其他相關文章!