首页网页导航html源码

网页导航html源码

时间: 2023-09-06 19:02:48 浏览: 139

以下是一个简单的网页导航HTML源码示例： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>网页导航</title> <style> .wrapper { width: 600px; margin: 0 auto; } h1 { text-align: center; } .nav-menu { list-style: none; padding: 0; margin: 0; display: flex; justify-content: center; } .nav-menu li { margin: 10px; } .nav-menu li a { color: #333; text-decoration: none; padding: 5px 10px; border: 1px solid #333; border-radius: 5px; } .nav-menu li a:hover { background-color: #333; color: #fff; } </style> </head> <body> <div class="wrapper"> <h1>网页导航</h1> <ul class="nav-menu"> <li><a href="https://www.google.com">Google</a></li> <li><a href="https://www.baidu.com">百度</a></li> <li><a href="https://www.taobao.com">淘宝</a></li> <li><a href="https://www.jd.com">京东</a></li> <li><a href="https://www.v2ex.com">V2EX</a></li> </ul> </div> </body> </html> ``` 这个源码创建了一个简单的网页导航页面。首先定义了页面的标题和字符集，然后设置了一些基本的CSS样式。在body部分，使用了一个wrapper容器来进行页面内容的居中显示，并添加了一个标题。接下来使用了无序列表ul和列表项li来创建导航菜单，每个列表项包含一个链接a，指向不同的网站。对于链接的样式，定义了一些基本的样式，包括颜色、边框等，当鼠标悬停在链接上时，还定义了鼠标悬停时的样式变化。

阅读全文