关于美食HTML网页设计实例代码
在当今的互联网时代,美食已经成为人们生活中不可或缺的一部分,为了满足人们对美食的热爱和追求,创建一个美食网站是一个很好的选择,下面是一个简单的美食HTML网页设计实例代码,供您参考。
<!DOCTYPE html> <html> <head> <title>美食天地</title> <style> body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f0f0f0; } header { background-color: #333; color: #fff; padding: 10px; text-align: center; } nav { background-color: #555; color: #fff; padding: 10px; } nav ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; } nav ul li { float: left; } nav ul li a { display: block; color: #fff; text-align: center; padding: 14px 16px; text-decoration: none; } nav ul li a:hover { background-color: #111; } section { padding: 20px; } section h2 { color: #333; } section p { color: #666; } footer { background-color: #333; color: #fff; padding: 10px; 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> </section> <section> <h2>家常菜谱</h2> <p>这里是一些简单易学的家常菜谱,让您在家也能轻松做出美味佳肴。</p> </section> <section> <h2>世界美食</h2> <p>这里汇集了世界各地的美食,让您足不出户就能品尝到各地的美食风味。</p> </section> <footer>版权所有 © 2023 美食天地</footer> </body> </html>