页面布局-Vue从入门到实战

页面布局

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>前端研习社-图书管理系统</title>
		<style>
			h1 {
				text-align: center;
			}

		table,
		td,
		th {
			border-collapse: collapse;
			border-spacing: 0
		}
		
		table {
			width: 600px;
			margin: 0 auto;
			text-align: center;
		}
		
		td,
		th {
			border: 1px solid #bcbcbc;
			padding: 5px 10px;
		}
		
		th {
			background: #42b983;
			font-size: 1.2rem;
			font-weight: 400;
			color: #fff;
			cursor: pointer;
		}
		
		tr:nth-of-type(odd) {
			background: #fff;
		}
		
		tr:nth-of-type(even) {
			background: #eee;
		}
		
		.add {
			width: 400px;
			padding: 10px 50px;
			margin: 10px auto;
			background: #ccc;
			border-radius: 5px;
		}
		
		h2 {
			text-align: center;
		}
		
		p {
			height: 50px;
			line-height: 50px;
		}
		
		input {
			width: 300px;
			height: 50px;
			line-height: 50px;
			font-size: 20px;
			padding-left: 10px;
		}
		
		p button {
			float: right;
			width: 100px;
			height: 50px;
			line-height: 50px;
			font-size: 20px;
			border-radius: 5px;
		}
	</style>
</head>
<body>
	<div id="app">
		<h1>图书管理系统</h1> 
		<table>
			<thead>
				<tr>
					<th>书名</th>
					<th>作者</th>
					<th>价格</th>
					<th>标签</th>
					<th>操作</th>
				</tr>
			</thead> 
			<tbody>
				<tr>
					<td>《三国演义》</td>
					<td>罗贯中</td>
					<td>99.99</td> 
					<td>经典</td> 
					<td><button>删除</button></td>
				</tr>
				<tr>
					<td>《红楼梦》</td> 
					<td>曹雪芹</td> 
					<td>88</td> 
					<td>推荐</td> 
					<td><button>删除</button></td>
				</tr>
				<tr>
					<td>《水浒传》</td> 
					<td>施耐庵</td> 
					<td>77</td> 
					<td>热销</td> 
					<td><button>删除</button></td>
				</tr>
				<tr>
					<td>《西游记》</td> 
					<td>吴承恩</td> 
					<td>60</td> 
					<td>经典</td> 
					<td><button>删除</button></td>
				</tr>
			</tbody>
		</table> 
		<div class="add">
			<h2>添加新书</h2> 
			<div class="form-group">
				<p>书名：<input type="text"></p> 
				<p>作者：<input type="text"></p> 
				<p>价格：<input type="text"></p> 
				<p>标签：<input type="text"></p> 
				<p><button>添加</button></p>
			</div>
		</div>
	</div>