首页product_list.html怎么写

product_list.html怎么写

时间: 2024-03-01 08:56:10 浏览: 22

`product_list.html`是一个网页模板文件，用于显示产品列表页面。它需要使用HTML、CSS和JavaScript语言编写。以下是一个基本的示例： ```html <!DOCTYPE html> <html> <head> <title>Product List</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1>Product List</h1> <ul id="product-list"> {% for product in products %} <li>{{ product.name }} - ${{ product.price }}</li> {% endfor %} </ul> <script type="text/javascript" src="script.js"></script> </body> </html> ``` 这个模板文件使用了一个`product-list`的无序列表来显示产品列表，并使用了一个`for`循环来显示每个产品的名称和价格。需要注意的是，这个模板文件需要使用模板引擎（如Django或Flask）来渲染，以便将数据注入到模板中。同时，这个模板文件还使用了一个外部的CSS文件（`style.css`）和一个外部的JavaScript文件（`script.js`），用于样式和交互效果。