首页HTML 做一个类似淘宝的商品分类代码静态代码

HTML 做一个类似淘宝的商品分类代码静态代码

时间: 2024-02-27 18:55:56 浏览: 80

以下是一个简单的 HTML 代码示例，实现了类似淘宝的商品分类： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>商品分类</title> <style> /* 样式代码 */ ul { list-style: none; padding: 0; margin: 0; } li { display: inline-block; margin-right: 20px; } li:last-child { margin-right: 0; } a { text-decoration: none; color: #333; padding: 10px; } a:hover { background-color: #f5f5f5; } </style> </head> <body>  <ul> <li><a href="#">服装</a></li> <li><a href="#">数码</a></li> <li><a href="#">家居</a></li> <li><a href="#">美妆</a></li> <li><a href="#">食品</a></li> <li><a href="#">母婴</a></li> <li><a href="#">运动</a></li> <li><a href="#">家电</a></li> <li><a href="#">汽车</a></li> <li><a href="#">更多</a></li> </ul> </body> </html> ``` 在这个示例中，我们使用了无序列表 `<ul>` 和列表项 `<li>` 来创建商品分类列表。每个列表项都包含一个超链接 `<a>`，点击后可以跳转到相应的商品分类页面。通过CSS样式，我们给列表项添加了适当的间距和鼠标悬停效果，以提高页面的可读性和交互性。

阅读全文