Home > Article > Web Front-end > Homework about a div css website homepage layout_html/css_WEB-ITnose
<html><head > <style> .headbox{ width:25%; height:15%; margin:0.5%; border:solid 1px; float:left; } .headbox2{ width:46.5%; height:15%; margin:0.5%; border:solid 1px; float:left; } .daohang{ clear:both; //width:inherit; width:98.5%; height:5%; margin:0.5%;; border:solid 1px; } .bodybox{ width:73%; //height:73%; height:55%; margin:0.5%; border:solid 0px; float:left; } .neikuang1{ width:49%; height:49%; margin-right:1.5%; border:solid 1px; float:left; } .neikuang2{ width:49%; height:49%; margin:0%; border:solid 1px; float:left; } .neikuang3{ width:23%; height:49%; margin-right:1.5% 1.5% 0 0; border:solid 1px; float:left; } .neikuang4{ width:23%; height:49%; margin:1.5% 0 0 0; border:solid 1px; float:left; } .fukuang{ width:24.5%; height:55%; margin:0.5%; border:solid 0px; float:left; } .fu1{ width:99%; height:31%; margin:0px; border:solid 1px; float:top; } .fu2{ width:99%; height:31%; margin:3.5% 0 0 0; border:solid 1px; float:top; } .foot{ width:99%; height:10%; margin:0.5px; border:solid 1px; float:left; } </style></head> <body> <div class="headbox">框(一)</div> <div class="headbox2">框(二)</div> <div class="headbox">框(三)</div> <div class="daohang">框(导航)</div> <div class="bodybox"> <div class="neikuang1">栏目一</div> <div class="neikuang2">栏目二</div> <div class="neikuang3">栏目三</div> <div class="neukuang3">栏目四</div> <div class="neikuang3">栏目五</div> <div class="neikuang4">栏目六</div> </div> <div class="fukuang"> <div class="fu1">栏目七</div> <div class="fu2">栏目八</div> <div class="fu2">栏目九</div> </div> <div class="foot"></div> </body></html>
The picture shows what the requirements look like.
Where is your position? It's float.
Where is your position? It's float.
Go to the front-end section and ask, after all, the people there are more professional.
b736e34e57fb317d3d19aff82126cf79
5dce05ce06e5ec12d71c42fb3b3167e1Column 116b28748ea4df4d9c2150843fecfba68
5dce05ce06e5ec12d71c42fb3b3167e1Column 216b28748ea4df4d9c2150843fecfba68
;div class="neikuang2">Column five16b28748ea4df4d9c2150843fecfba68
d1737d1c06babce4c89203c031e0a551Column six16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
.neikuang1, .neikuang2 {
float:left;
}
.neikuang1 {
width:49%;
height:49%;
margin-right:1.5 %;
border:solid 1px;
}
.neikuang2 {
width:23%;
height:49%;
margin-right:1.5% 1.5% 0 0;
border:solid 1px;
}
<div class="bodybox"> <div class="neikuang1">栏目一</div> <div class="neikuang1">栏目二</div> <div class="neikuang2">栏目三</div> <div class="neukuang2">栏目四</div> <div class="neikuang2">栏目五</div> <div class="neikuang2">栏目六</div></div>.neikuang1, .neikuang2 { float:left;}.neikuang1 { width:49%; height:49%; margin-right:1.5%; border:solid 1px;}.neikuang2 { width:23%; height:49%; margin-right:1.5% 1.5% 0 0; border:solid 1px;}Use one class for the same div. Your css code is too redundant