首页美食分类表格表单html+css网页制作

美食分类表格表单html+css网页制作

时间: 2024-06-28 15:00:46 浏览: 189

创建一个美食分类表格的HTML和CSS网页，你可以按照以下步骤进行： **1. HTML结构:** ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>美食分类</title> <link rel="stylesheet" href="styles.css"> </head> <body> <header> <h1>美食分类</h1> </header> <main> <section class="food-categories"> <table id="food-table"> <thead> <tr> <th>分类</th> <th>描述</th> <th>图片</th> </tr> </thead> <tbody>   <tr> <td><a href="#">{{category}}</a></td> <td>{{description}}</td> <td><img src="{{image}}" alt="{{category}} 图片"></td> </tr> </tbody> </table> </section> </main> </body> </html> ``` **2. CSS样式 (styles.css):** ```css body { font-family: Arial, sans-serif; } header { background-color: #f0f0f0; padding: 20px; text-align: center; } .food-categories { margin-top: 20px; max-width: 900px; margin auto; border-collapse: collapse; } #food-table { width: 100%; border: 1px solid #ccc; } th, td { border: 1px solid #ddd; padding: 10px; text-align: left; } th { background-color: #f2f2f2; font-weight: bold; } a { color: #007BFF; text-decoration: none; } ``` **

阅读全文