HTML <div> 标签插入图片_html div表面插入图片-优快云博客

美工想做一个DIV + CSS 布局的网页 页面布局如图
DIV1、DIV2、DIV3为背景层用来放置背景图片需要无缝拼接
DIV1a、DIV1b、DIV1c属于DIV1
DIV2a、DIV2b属于DIV2
DIV3a、DIV3b、DIV3c属于DIV3
且
DIV1a、DIV1b
DIV2a、DIV2b
DIV3a、DIV3b、DIV3c
需要并列排列

回答：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <style>
	body{
		margin:0px;
		padding:0px;
		text-align:center;
	}
	div{
		margin:0px;
		padding:0px;
		margin:auto;
	}
	.cl{
		clear:both;
	}

	#div1{
		background:#FEE9F4;
		width:970px;
	}
	#div2{
		background:#E9FEF0;
		width:970px;
	}
	#div3{
		background:#C7C2FC;
		width:970px;
	}
  </style>
 </head>

 <body>
	
  <div id="div1">
	<div style="height:30px;width:960px;border:1px solid #000;">div1c</div>
	<div style="width:455px;height:300px;float:left;border:1px solid #000;margin:10px;">div1a</div>
	<div style="width:455px;height:300px;float:right;border:1px solid #000;margin:10px;">div1b</div>
	<div class="cl"></div>
  </div>
   <div id="div2">
	<div style="width:455px;height:300px;float:left;border:1px solid #000;margin:10px;">div2a</div>
	<div style="width:455px;height:300px;float:right;border:1px solid #000;margin:10px;">div2b</div>
	<div class="cl"></div>
  </div>
  <div id="div3">
	<div style="width:300px;height:300px;float:left;border:1px solid #000;margin:10px;">div3a</div>
	<div style="width:300px;height:300px;float:left;border:1px solid #000;margin:10px;">div3b</div>
	<div style="width:300px;height:300px;float:right;border:1px solid #000;margin:10px;">div3c</div>
	<div class="cl"></div>
  </div>
 </body>
</html>

参考： http://www.w3school.com.cn/tags/tag_div.asp