CSS 畫一條橫線/豎線
阿新 • • 發佈：2018-11-06
作為優秀的java程式設計師,紮實(la ji )前端水平是我工作的基礎 , 所以今天記錄一下怎麼用css畫一條橫線/豎線出來 , 以此為筆記, 將來不需要去翻閱別人的程式碼
廢話不多說 筆記開始
#CSS 程式碼
/*中間的過度的橫線*/ .link-top { width: 50%; height: 1px; border-top: solid #ACC0D8 1px; } /*畫一條再右邊的豎線*/ .link-right { width: 50px; height: 20%; border-right: solid #ACC0D8 1px; }
#整體的HTML程式碼
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>畫一個直線</title> <style> /*中間的過度的橫線*/ .link-top { width: 50%; height: 1px; border-top: solid #ACC0D8 1px; } /*畫一條再右邊的豎線*/ .link-right { width: 50px; height: 20%; border-right: solid #ACC0D8 1px; } </style> </head> <body> <h1>Hellow World</h1> <div class="link-top"></div> <p class="link-right">段落1</p> <div class="link-top"></div> <p>段落2</p> </body> </html>
#頁面效果圖
#實際工作頁面效果圖
補充:
上面的圖片很醜 , 後來發現了畫豎線的妙法 就是 直接用 | 這個代替,效果非常好
#效果圖
