css盒模型div嵌套制作网页块状部分案例
html文件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/margingpadding.css"/> </head> <body> <div id="top"> <div id="top_nav"></div> </div> <div id="body"> <div id="body_image"></div> <div id="body_content"> <div id="body_no"></div> <div id="body_c"></div> </div> </div> <div id="footing"> <div id="footing_d"></div> <div id="footing_nav"></div> </div> </body> </html>
css文件
*{ margin:0px ; padding: 0px; } #top{ width: 100%; height: 50px; background-color:#000000 ; } #top_nav{ width: 75%; height: 50px; margin: 0px auto; background-color:#004488 ; } #body{ margin: 10px auto; width: 75%; height: 1500px; background-color: #00FF77; } #body_image{ margin: 0px; width: 100%; height: 400px; background-color:#FF0000; } #body_content{ margin: 0px; width: 100%; height: 1100px; background-color: antiquewhite; } #body_no{ margin: 0px; width: 100%; height: 50px; background-color:blue; } #body_c{ margin: 0px; width: 100%; height: 1050px; background-color:#00FF77; } #footing{ margin: 0px auto; height: 300px; width: 75%; background-color: brown; } #footing_d{ margin: 0px; height: 230px; width: 100%; background-color: chartreuse; } #footing_nav{ margin: 0px; height: 70px; width: 100%; background-color: black; }
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。