當前位置:妙知谷 >

遊戲數碼 >IT技術 >

HTML分隔線如何美化?

HTML分隔線如何美化?

做HTML頁面開發時,在幾段文字之間,或幾塊內容之間,經常會使用分隔線去做分隔,以讓頁面顯示更加有條理。分隔線我們基本上都是用hr標籤去生成,怎麼去美化這個分隔線?下面一起看下。

操作方法

(01)先看下我們的html代碼,二個p段落,中間用hr作分隔,代碼如圖。

HTML分隔線如何美化?

(02)頁面運行後,可以看到,默認的hr分隔線就是一條黑色的線條,算不上美觀。

HTML分隔線如何美化? 第2張

(03)通過添加一些樣式,我們可以設置hr分隔線的大小和顏色,主要是設置它的border樣式。代碼如下,ent hr{ border: 2px solid #cc0000 }

HTML分隔線如何美化? 第3張

(04)刷新頁面,可以看到效果如圖

HTML分隔線如何美化? 第4張

(05)我們還可以把分隔線默認的實體線改成點劃線,只需要把border樣式改成如下:border: 1px dashed #cc0000;效果如圖。

HTML分隔線如何美化? 第5張

(06)另外如果你需要很複雜的分隔線,就需要用背景圖來實現了,我們可以為hr設置背景圖,但要注意的是,如果是用背景圖,我們一定要設置hr的高度,和把border設置為none,代碼如圖

HTML分隔線如何美化? 第6張

(07)效果如圖,我們的分隔線雖然很簡單,但也能設置很多樣式,能做很好的美化效果。

HTML分隔線如何美化? 第7張
標籤: 分隔線 HTML
  • 文章版權屬於文章作者所有,轉載請註明 https://miaozhigu.com/sm/itjishu/3vo33m.html