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

## 页面布局 >[info]代码： ~~~ <!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> </html> ~~~ ![](https://box.kancloud.cn/32083d12319a973b37457f6dbec577b7_690x700.png)