<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>盒模型</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="description" content="布尔教育 http://www.itbool.com" /><style> #container{ width: 1002px; height: 800px; background: blue; } #header{ height: 100px; background: green; } #main{ height: 500px; background: purple; } #lside{ width: 700px; background: pink; } .four{ width: 300px; height: 200px; background: black; float: left;
//margin设置外边框大小
margin: 10px; } #rside{ width: 302px; background: red; } #footer{ height: 200px; }</style></head> <body> <div id="container"> <div id="header"></div> <div id="main"> <div id="lside"> <div></div> <div></div> <div></div> <div></div> </div> <div id="rside"></div> </div> <div id="footer"></div> </div> </body></html>
border边框设置:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>新建网页</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="description" content="布尔教育 http://www.itbool.com" /><style> #container{ width: 800px; background: black; } #header{ width: 300px; height: 300px; background: blue; border: 20px rdige green; /*border 边框 solid 实线 背景绿色*/ }</style></head> <body> <div id="container"> border三要素 宽,形状,颜色 ,画一个三角形 <div id="header"></div> <div id="main"></div> <div id="footer"></div> </div> </body></html>