Homework about a div css website homepage layout_html/css

Homework about a div css website homepage layout_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:58:22

Original

1318 people have browsed it

<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>

Copy after login

Column 1

Column 2

Column 3

Column 4

Column 5

Column 6

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.

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.

Column 1

Column 2

;div class="neikuang2">Column five

Column six

.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;}

Copy after login

Use one class for the same div. Your css code is too redundant