首页使用html css制作带图片的蛋糕价目表

使用html css制作带图片的蛋糕价目表

时间: 2023-12-29 08:03:01 浏览: 30

好的，以下是一个简单的带图片的蛋糕价目表的HTML和CSS代码： HTML代码： ```html <!DOCTYPE html> <html> <head> <title>蛋糕价目表</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>蛋糕价目表</h1> <table> <tr> <th>蛋糕名称</th> <th>价格</th> <th>图片</th> </tr> <tr> <td>巧克力蛋糕</td> <td>¥50</td> <td><img src="chocolate-cake.jpg" alt="巧克力蛋糕"></td> </tr> <tr> <td>草莓慕斯蛋糕</td> <td>¥60</td> <td><img src="strawberry-cake.jpg" alt="草莓慕斯蛋糕"></td> </tr> <tr> <td>抹茶蛋糕</td> <td>¥55</td> <td><img src="matcha-cake.jpg" alt="抹茶蛋糕"></td> </tr> </table> </body> </html> ``` CSS代码： ```css h1 { text-align: center; } table { margin: 0 auto; border-collapse: collapse; } td, th { border: 1px solid black; padding: 10px; text-align: center; } th { background-color: #ccc; } ``` 注意：上面的代码只是一个简单的示例，您可以根据自己的需求进行修改和美化。同时，您需要将图片文件保存在与HTML代码相同的文件夹中，并将图片文件名替换为上面代码中的文件名。