关于一道div+css 网站首页布局的课后作业_html/css

关于一道div+css 网站首页布局的课后作业_html/css_WEB-ITnose

php中文网

发布： 2016-06-24 11:58:22

原创

1573人浏览过

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

登录后复制

栏目一

栏目二

栏目三

栏目四

栏目五

栏目六

这个地方老是布局不好，求指导。

小门道AI

小门道AI是一个提供AI服务的网站

117

查看详情

回复讨论(解决方案)

图片为要求完成的样子。

你的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代码太冗余了