首頁  >  文章  >  web前端  >  关于一道div+css 网站首页布局的课后作业_html/css_WEB-ITnose

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

WBOY
WBOY原創
2016-06-24 11:58:221318瀏覽

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

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn