Home >Web Front-end >HTML Tutorial >Homework about a div css website homepage layout_html/css_WEB-ITnose
Homework about a div css website homepage layout_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:58:221336browse
<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> 5dce05ce06e5ec12d71c42fb3b3167e1Column 116b28748ea4df4d9c2150843fecfba68
d1737d1c06babce4c89203c031e0a551Column 2d4e6ef3935d870d31c81823c096b9b03
8490a95d721c28e758471a53bf5c5eb3Column 316b28748ea4df4d9c2150843fecfba68
36ebea55b64e1e564f99cfae44fd16b3Column 416b28748ea4df4d9c2150843fecfba68
568284e9f5a1b35a4d476bb57dbd047dColumn 516b28748ea4df4d9c2150843fecfba68
9f8c0ce41f422bfe3b8ffddb74777424Column 616b28748ea4df4d9c2150843fecfba68
This place is always poorly laid out, please give me some guidance.
Reply to the discussion (solution)
The picture shows what the requirements look like.
Where is your position? It's float.
Where is your position? It's float.
There is float, but position is not taught. It seems unnecessary
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