Maison > Article > interface Web > 关于一道div+css 网站首页布局的课后作业_html/css_WEB-ITnose
关于一道div+css 网站首页布局的课后作业_html/css_WEB-ITnose
- WBOYoriginal
- 2016-06-24 11:58:221318parcourir
<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> 栏目一
栏目二
栏目三
栏目四
栏目五
栏目六
这个地方老是布局不好，求指导。
回复讨论(解决方案)
图片为要求完成的样子。
你的position 呢。float呢。
你的position 呢。float呢。
float 有的啊，position没教吧。好像不需要的样子
过前端板块问吧，毕竟那边的人专业一些。
栏目一
栏目二
栏目三
栏目四
栏目五
栏目六
.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;} 相同的div 就用一个class 你这个css代码太冗余了
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：CSS定义了圆角文本框，可是获得焦点时是方角，显得很难看_html/css_WEB-ITnoseArticle suivant：css hack 总结 包括ie6-11,chrome,opera,firefox_html/css_WEB-ITnose