首页宠物店网页设计html

宠物店网页设计html

时间: 2023-09-29 12:10:51 浏览: 142

好的，下面是一个简单的宠物店网页设计的 HTML 代码。你可以根据自己的需要进行修改和完善。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>宠物店</title> <style> /* 样式表 */ body { background-color: #f2f2f2; font-family: Arial, sans-serif; margin: 0; padding: 0; } header { background-color: #333; color: #fff; padding: 20px; } h1 { margin: 0; } nav { background-color: #ddd; padding: 10px; } nav ul { list-style: none; margin: 0; padding: 0; } nav li { display: inline-block; margin-right: 10px; } nav a { color: #333; display: block; padding: 5px 10px; text-decoration: none; } nav a:hover { background-color: #333; color: #fff; } section { padding: 20px; } footer { background-color: #333; color: #fff; padding: 20px; text-align: center; } </style> </head> <body> <header> <h1>宠物店</h1> </header> <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">宠物</a></li> <li><a href="#">用品</a></li> <li><a href="#">联系我们</a></li> </ul> </nav> <section> <h2>欢迎来到宠物店</h2> <p>我们提供各种宠物和宠物用品，欢迎选购！</p> <h3>宠物</h3> <ul> <li>狗</li> <li>猫</li> <li>鸟</li> <li>鱼</li> <li>其他</li> </ul> <h3>用品</h3> <ul> <li>食品</li> <li>玩具</li> <li>床垫</li> <li>笼子</li> <li>其他</li> </ul> </section> <footer> <p>© 2021 宠物店</p> </footer> </body> </html> ``` 这只是一个简单的模板，你可以根据自己的需求进行修改和完善，例如增加图片、改变颜色等。同时，这个页面还没有响应式设计，如果需要适应不同大小的屏幕，你需要添加媒体查询或使用 CSS 框架。

阅读全文