css布局初次尝试-Layer7

效果：

分析：

 上面Layer7...是一个定义了高度的div,下面是一个两行的table，主要东西都在第一行中，第二行定义了一个高度，是为了和下方结果之间有一个空隙。

1、

2、

3、

table的第一行如蓝色的线部分，两列，其左侧空白即红色的线部分，主体部分在第二个td中：

4、

  5、

 

右侧td里面定义了一个一行一列的table,并设置背景图片
                       在单元格中定义一个div，设定padding-left

                       div中又定义了一个width是90%的table,这才是内容的主体部分

 

6、绿线是div部分，右侧蓝线是90%的table部分

这个主体table部分代码：

<div id="searchInfo" style="padding-left: 20px;">
										<table style="width:90%;" border="0">
											<tr height="30px">
												<td colspan="5">
													<span style="color: #808080;font-weight: bold;">
														Select a mark-up Area
													</span>
												</td>
											</tr>

 最后的按钮class:

<input type="button" class="button_search" onclick="doQuery();" value="Search"/>

 

.button_search {
	width: 150px;height:23px;border: 1px solid #8DB3E2;background:#5D5DFF;text-align:center;text-decoration:none;font-size:13px;color: #FFF;font-weight: bold;
}

 背景图片：

...