文字在線中間，CSS巧妙實現分隔線的幾種方法

CODING 發布于2019-08-29 15:24 / 1291人閱讀

摘要：單個標簽實現分隔線優點代碼簡潔巧用背景色實現分隔線優點代碼簡潔，可自適應寬度實現分隔線點此查看實例展示優點文字可多行浮動實現分隔線優點利用字符實現分隔線小小分隔線字符來實現優點代碼簡潔以上簡單介紹了分隔線的

單個標簽實現分隔線：

.demo_line_01{

padding: 0 20px 0;
margin: 20px 0;
line-height: 1px;
border-left: 200px solid #ffffd;
border-right: 200px solid #ffffd;
text-align: center;

}
優點：代碼簡潔

巧用背景色實現分隔線：

.demo_line_02{

height: 1px;
border-top: 1px solid #ffffd;
text-align: center;

}
.demo_line_02 span{

position: relative;
top: -8px;
background: #fff;
padding: 0 20px;

}
優點：代碼簡潔，可自適應寬度

inline-block實現分隔線：

點此查看實例展示

.demo_line_03{

width:600px;

}
.demo_line_03 b{

background: #ffffd;
margin-top: 4px;
display: inline-block;
width: 180px;
height: 1px;
_overflow: hidden;
vertical-align: middle;

}
.demo_line_03 span{

display: inline-block;
width: 220px;
vertical-align: middle;

}
優點：文字可多行

浮動實現分隔線：

.demo_line_04{

width:600px;

}
.demo_line_04{

overflow: hidden;
_zoom: 1;

}
.demo_line_04 b{

background: #ffffd;
margin-top: 8px;
float: left;
width: 26%;
height: 1px;
_overflow: hidden;

}
優點：NUN

利用字符實現分隔線：

———————————小小分隔線字符來實現————————————

.demo_line_05{

letter-spacing: -1px;
color: #ffffd;

}
.demo_line_05 span{

letter-spacing: 0;
color: #222;
margin:0 20px;

}
優點：代碼簡潔以上簡單介紹了分隔線的寫法，也許還有其它比較合適的寫法，看環境各取所需吧！

云服務器 GPU云服務器 js緩存的幾種方法最基本的幾種 html的幾種輪播一段巧妙的css

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113296.html

文字在線中間，CSS巧妙實現分隔線的幾種方法

摘要：單個標簽實現分隔線優點代碼簡潔巧用背景色實現分隔線優點代碼簡潔，可自適應寬度實現分隔線點此查看實例展示優點文字可多行浮動實現分隔線優點利用字符實現分隔線小小分隔線字符來實現優點代碼簡潔以上簡單介紹了分隔線的 showImg(https://segmentfault.com/img/bVbaGqW?w=766&h=442);單個標簽實現分隔線： .demo_line_01{ paddin...

hosition 2019-08-02 10:27 評論0 收藏0
HTML與CSS中的文本個人分享

摘要：文本標題元素注意在一個頁面中最好只使用一個標題因為瀏覽器只會抓取一個多了沒用示例代碼標題元素元素默認效果是顯示最大顯示最小默認效果是由瀏覽器自帶樣式提供可以通過進行修改每個標題元素是獨占一行并且是垂直排列在實際開發中常用的標題元素最文本標題元素注意: 在一個HTML頁面中最好只使用一個標題因為瀏覽器只會抓取一個多了沒用示例代碼: 一花一世界一葉一孤城娃哈哈爽歪歪...

MartinHan 2019-08-29 16:32 評論0 收藏0
HTML與CSS中的文本個人分享

摘要：文本標題元素注意在一個頁面中最好只使用一個標題因為瀏覽器只會抓取一個多了沒用示例代碼標題元素元素默認效果是顯示最大顯示最小默認效果是由瀏覽器自帶樣式提供可以通過進行修改每個標題元素是獨占一行并且是垂直排列在實際開發中常用的標題元素最文本標題元素注意: 在一個HTML頁面中最好只使用一個標題因為瀏覽器只會抓取一個多了沒用示例代碼: 一花一世界一葉一孤城娃哈哈爽歪歪...

iliyaku 2019-08-02 11:21 評論0 收藏0
2016百度前端技術學院Task02

摘要：的演示整個項目的地址的地址起初只是想簡單開始重新做一遍百度前端技術學院的任務，但是在做的過程中萌生了要記錄下自己在過程中遇到的一系列問題的想法。現在我把自己完成的小項目的源碼在上分享出來，希望可以幫到廣大前端初學者們。 Task02的演示DEMO：https://amnova.github.io/New-... 整個項目的GitHub地址：https://github.com/amn...

venmos 2019-08-30 13:19 評論0 收藏0
2016百度前端技術學院Task02

摘要：的演示整個項目的地址的地址起初只是想簡單開始重新做一遍百度前端技術學院的任務，但是在做的過程中萌生了要記錄下自己在過程中遇到的一系列問題的想法。現在我把自己完成的小項目的源碼在上分享出來，希望可以幫到廣大前端初學者們。 Task02的演示DEMO：https://amnova.github.io/New-... 整個項目的GitHub地址：https://github.com/amn...

lolomaco 2019-08-01 16:09 評論0 收藏0