布局div

最新推荐文章于 2023-12-19 23:05:48 发布

原创最新推荐文章于 2023-12-19 23:05:48 发布 · 494 阅读

0 ·

CC 4.0 BY-SA版权

HTML5 专栏收录该内容

17 篇文章

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#a1 { width:960px; height:560px; margin:0 auto;}
#a2{ width:300px; height:560px; float:left; margin-left:20px;}
#a5{ width:300px; height:560px; float:left; margin-left:20px;  background-color:#FF1800;  }
#a6{ width:300px; height:560px;margin-left:20px;  float:right;}
#a3{ width:300px; height:270px; background-color:#00E7FF; margin-bottom:20px;}

//<span style="color: rgb(255, 0, 0); font-family: Arial, Helvetica, sans-serif;">margin-bottom:20px;</span><span style="color: rgb(255, 0, 0); font-family: Arial, Helvetica, sans-serif;">这里指的是与下面的div的距离</span>
#a4{ width:300px; height:270px; background-color:#FF27FF;}
#a7{ width:300px; height:170px; background-color:#00D800;}
#a8{ width:300px; height:170px; background-color:#6B16D2; margin-top:20px; margin-bottom:20px;}

<span style="color:#ff0000;">//<span style="font-family: Arial, Helvetica, sans-serif;">margin-top:25px; margin-bottom:25px;这里指的是与上面的和下面的div都是20px</span></span>

#a9{ width:300px; height:170px; background-color:#656A9B;}

</style>
<!-- 
letter-spacing:5px; 文字间距
overflow:hidden超过的部分显示方式

 -->
</head>

<body>
<div id="a1">
	<div id="a2">
        <div id="a3"></div>
        <div id="a4"></div>
     </div>
     <div id="a5"></div>
     <div id="a6">
        <div id="a7"></div>
        <div id="a8"></div>
        <div id="a9"></div>
      </div>
</div>
</body>
</html>