首页写一个菜单的设计并完成一个HTML页面的制作，内容应包含文本标签、表格标签的运用，要求有代码

写一个菜单的设计并完成一个HTML页面的制作，内容应包含文本标签、表格标签的运用，要求有代码

时间: 2024-09-17 08:09:07 浏览: 57

当设计一个简单的HTML菜单时，我们可以创建一个包含标题、列表项和表格的布局。下面是一个基础的示例： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>简单菜单</title> <style> body { font-family: Arial, sans-serif; margin: 0; padding: 20px; } ul { list-style-type: none; padding: 0; } li a { display: block; color: #333; text-decoration: none; padding: 10px 20px; } .menu-table { width: 100%; border-collapse: collapse; } .menu-table th, .menu-table td { border: 1px solid #ccc; padding: 15px; } </style> </head> <body>  <header> <h1>欢迎来到美食天地</h1> <ul class="menu-list"> <li><a href="#">主页</a></li> <li><a href="#">菜品推荐</a></li> <li><a href="#">特色菜</a></li> <li><a href="#">关于我们</a></li> </ul> </header>  <section> <h2>热门菜品排行</h2> <table class="menu-table"> <thead> <tr> <th>排名</th> <th>菜品名称</th> <th>价格</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>红烧肉</td> <td>￥38</td> </tr> <tr> <td>2</td> <td>鱼香茄子</td> <td>￥28</td> </tr> <tr> <td>3</td> <td>宫保鸡丁</td> <td>￥32</td> </tr> </tbody> </table> </section> </body> </html> ``` 在这个例子中，我们使用了`<ul>`元素来创建无序列表作为菜单，`<a>`标签来链接每个菜单项。表格部分则通过`<table>`、`<thead>`、`<tbody>`等标签构建，并设置了样式。

阅读全文