div+CSS编程

在这里插入图片描述

要求如下:
各div的id如图所示。
所有的div相对定位,左浮动,border都为实线,1px,红色。
所有的div的外边距为10px,内边距为10px。
main的宽为400px,高为270px;
top的宽为358px,高为20px。
foot的宽为358px,高为15px。
left的宽为100px,高为110px。
right的高为110px。
div内的文字不为判分条件,有即可。

<meta charset="utf-8">
	<div id="main" class="ans">
		<div id="top" class="div_1">top</div>
		<div id="left" class="div_1">left</div>
		<div id="right" class="div_1">right</div>
		<div id="foot" class="div_1">foot</div>
	</div>
	<style>
		.ans{
			border:solid 1px #ff0000;
			position:relative; float:left;
			margin:10px; padding:10px;
		}
		.div_1{
			border:solid 1px #ff0000;
			position:relative; float:left;
			margin:10px; padding:10px;
		}
		#main{
			width:400px; height:270px;
		}
		#top{
			width:358px; height:20px;
		}
		#foot{
			width:358px; height:15px;
		}
		#left{
			width:100px; height:110px;
		}
		#right{
			height:110px; width:216px;
		}
	</style>
发布了37 篇原创文章 · 获赞 13 · 访问量 4532

猜你喜欢

转载自blog.csdn.net/qq_42836388/article/details/103762367