頁面布局 · 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)