首页html网页果蔬代码模版

html网页果蔬代码模版

时间: 2024-11-23 10:15:33 浏览: 20

HTML是一种用于创建网页的标准标记语言，不是专门为果蔬设计的模板。不过，如果你想创建一个显示水果和蔬菜信息的HTML页面，你可以使用基础的HTML结构，并结合CSS样式使其看起来更吸引人。下面是一个简单的HTML模板示例： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>果蔬展示</title> <style> /* 添加一些基本样式 */ .fruit-vegetable { display: flex; justify-content: space-between; } .item { width: calc(50% - 10px); margin-bottom: 20px; } img { max-width: 100%; height: auto; } h2 { font-size: 18px; margin-top: 0; } </style> </head> <body> <header> <h1>新鲜果蔬大放送</h1> </header> <main class="fruit-vegetable"> <div class="item"> <img src="apple.jpg" alt="苹果"> <h2>红富士苹果</h2> <p>价格：$5/kg</p> </div> <div class="item"> <img src="banana.jpg" alt="香蕉"> <h2 香蕉">金枕头香蕉</h2> <p>价格：$3/kg</p> </div>  </main> <footer> ...底部信息... </footer> </body> </html> ``` 在这个例子中，每个`<div>`标签代表一个水果或蔬菜项目，包含图片、名称和价格。通过CSS样式，你可以调整布局和外观。

阅读全文