css分割線程式碼例項
分享一段程式碼例項,它利用css實現了分割線效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> .line_01 { padding: 0 20px 0; margin: 20px 0; line-height: 1px; border-left: 200px solid #ddd; border-right: 200px solid #ddd; text-align: center; width: 100px; } .line_02 { height: 1px; border-top: 1px solid #ddd; text-align: center; width: 500px; } .line_02 span { position: relative; top: -8px; background: #fff; padding: 0 20px; } </style> </head> <body> <div class="line_01">螞蟻部落一</div> <div class="line_02"><span>螞蟻部落二</span></div> </body> </html>
相關文章
- css斜線效果程式碼例項CSS
- css細線表格程式碼例項CSS
- css梯形程式碼例項CSS
- css多行文字底部虛線效果程式碼例項CSS
- css3螞蟻線邊框程式碼例項CSSS3
- css切角效果程式碼例項CSS
- CSS 對聯程式碼例項CSS
- css模糊效果程式碼例項CSS
- CSS RGBA 程式碼例項CSS
- css3線性漸變簡單程式碼例項CSSS3
- 純css tab選項卡程式碼例項CSS
- CSS 隔行變色程式碼例項CSS
- CSS空心箭頭程式碼例項CSS
- CSS橢圓效果程式碼例項CSS
- CSS條紋背景程式碼例項CSS
- css元素位置固定程式碼例項CSS
- css立體效果程式碼例項CSS
- css取消滑鼠事件程式碼例項CSS事件
- css多重邊框程式碼例項CSS
- CSS3雪人程式碼例項CSSS3
- css Sprite 動畫效果程式碼例項CSS動畫
- css 心形效果程式碼例項CSS
- css實現梯形程式碼例項CSS
- CSS清除浮動程式碼例項CSS
- css中間標題兩端橫線效果程式碼例項CSS
- [例項分割]Condinst程式碼筆記筆記
- css背景虛化效果程式碼例項CSS
- CSS3卡通形象程式碼例項CSSS3
- css清除浮動程式碼例項演示CSS
- css水平垂直居中程式碼例項CSS
- css多欄佈局程式碼例項CSS
- css3 animation動畫程式碼例項CSSS3動畫
- css徑向漸變程式碼例項CSS
- jQuery css()函式使用程式碼例項jQueryCSS函式
- css彈性佈局程式碼例項CSS
- CSS文字模糊效果程式碼例項CSS
- css兩列等高程式碼例項CSS
- css圖片變黑白程式碼例項CSS