首页网页头部设计html css

网页头部设计html css

时间: 2023-07-30 20:07:22 浏览: 50

好的，我可以为您提供一些头部设计的HTML和CSS代码示例。 HTML代码示例： ```html <!DOCTYPE html> <html> <head> <title>网页标题</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> </head> <body> <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> </header> <main>  </main> <footer>  </footer> </body> </html> ``` CSS代码示例： ```css /* 定义全局样式 */ * { margin: 0; padding: 0; box-sizing: border-box; } /* 定义头部样式 */ header { background-color: #333; color: #fff; padding: 20px; } nav ul { list-style: none; display: flex; justify-content: space-between; align-items: center; } nav li { margin-right: 20px; } nav li:last-child { margin-right: 0; } nav a { color: #fff; text-decoration: none; font-weight: bold; font-size: 18px; } nav a:hover { text-decoration: underline; } ``` 您可以根据自己的需要进行修改和调整。希望这可以帮助到您！