修改文件,应用第一个样式:

【汇智学堂】-div+css布局三(商品管理页面)_html
其中样式文件:
goods2.css中的内容

.a1{
	margin-top: 30px;
}

完整html文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>商品管理</title>		
		<link rel="stylesheet" href="css/goods2.css" />
	</head>
	<body>
		<div >您当前的位置是:商品管理</div>
		<hr>
		<div class="a1">
			<div >商品管理</div>
			<div class="a1">
				<span>商品名称</span>
				<input type="text" />
				<input type="button" value="查询" style="width: 100px;"/>
			</div>
			<div class="a1">
				<input type="button" style="width: 150px;" value="选择文件" />
				<span>请选择文件</span>
				<input type="button" style="width: 150px;" value="导入商品" />
				<input type="button" style="width: 150px;" value="手动添加" />
			</div>
		</div>
		<div class="a1">
			<table>				
				<th>
					<thead>
						<tr>
							<td>商品标示ID</td>
							<td>生产商名称</td>
							<td>生产商ID</td>
							<td>商品名称</td>
							<td>重量</td>
							<td>审核</td>
							<td>操作</td>
						</tr>
					</thead>
				</th>
				
				<tbody>					
					    <tr>
							<td>1</td>
							<td>海尔集团</td>
							<td>manid00123</td>
							<td>洗衣机</td>
							<td>30公斤</td>
							<td>通过</td>
							<td><input type="button" value="查看"><input type="button" value="编辑"><input type="button" value="删除"></td>
						</tr>
						
						<tr>
							<td>2</td>
							<td>格力集团</td>
							<td>manid00123</td>
							<td>冰箱</td>
							<td>90公斤</td>
							<td>通过</td>
							<td><input type="button" value="查看"><input type="button" value="编辑"><input type="button" value="删除"></td>
						</tr>
				</tbody>				
			</table>
		</div>
	</body>
</html>

浏览器文件运行效果如下图:
【汇智学堂】-div+css布局三(商品管理页面)_修改文件_02