HTML+CSS 輕鬆入門之盒子模型之邊框(下)
通常我們是很少給p標籤來加邊框的,但是在設計的時候,我們會給div 標籤加上邊框,這樣看起來會明顯一點
下面我們來做一個實例:例如網站首頁部分,頭部中部(分成左右兩個區塊) 底部這樣的一個佈局樣式,我們要怎麼實現呢
首先我們要給一個大的div 頭部中部和底部都放在這個div 中這樣我們就要給第一個div 做一個css樣式,然後再這個div 中加入3個div 標籤
程式碼如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #dv1{ width:800px; height:500px; border:1px solid red; margin:0 auto; /*居中*/ } </style> </head> <body> <div id="dv1"> <div id="top">头部</div> <div id="cen">中部</div> <div id="but">底部</div> </div> </body> </html>
下面我們要給頭部中間底部分別加上樣式,完整程式碼如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #dv1{ width:800px; height:500px;border:1px solid red;margin:0 auto; /*居中*/text-align:center; } #top{ width:780px;height:100px;border:1px solid green;margin:0 auto;background-color:#ccc;margin-top:30px; } #cen{ width:780px; height:200px;border:1px solid black;margin:0 auto;background-color:#f77;margin-top:5px; } #but{ width:780px;height:100px;border:1px solid #f60;margin:0 auto;margin-top:5px; } #left{ width:200px; height:198px; border:1px solid green; margin-left:5px; float:left; } #right{ width:570px; height:198px; border:1px solid black; float:right; } </style> </head> <body> <div id="dv1"> <div id="top">头部</div> <div id="cen"> <div id="left">左边</div> <div id="right">右边</div> </div> <div id="but">底部</div> </div> </body> </html>
註:邊框也要分上下左右的
border-top 上
# border-left 左