要实现一个导航栏,可以使用HTML和CSS,以下是一个简单的示例:
(图片来源网络,侵删)1、创建一个HTML文件,例如index.html
,并添加以下内容:
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF8"> <meta name="viewport" content="width=devicewidth, initialscale=1.0"> <title>导航栏示例</title> <link rel="stylesheet" href="styles.css"> </head> <body> <nav> <ul class="navlist"> <li><a href="#">首页</a></li> <li><a href="#">关于我们</a></li> <li><a href="#">产品</a></li> <li><a href="#">联系我们</a></li> </ul> </nav> </body> </html>
2、接下来,创建一个CSS文件,例如styles.css
,并添加以下内容:
/* 重置浏览器默认样式 */ { margin: 0; padding: 0; boxsizing: borderbox; } /* 设置导航栏样式 */ nav { backgroundcolor: #333; padding: 1rem; } /* 设置导航栏列表样式 */ .navlist { display: flex; justifycontent: spacearound; liststyletype: none; } /* 设置导航栏链接样式 */ .navlist a { color: white; textdecoration: none; fontsize: 1rem; } /* 设置鼠标悬停时链接的样式 */ .navlist a:hover { color: #ccc; }
这个示例中,我们使用了HTML的<nav>
元素来创建导航栏,然后使用CSS来设置导航栏的样式,导航栏包含一个无序列表(<ul>
),其中包含四个列表项(<li>
),每个列表项都有一个链接(<a>
),我们还设置了鼠标悬停在链接上时的样式。
最新评论
本站CDN与莫名CDN同款、亚太CDN、速度还不错,值得推荐。
感谢推荐我们公司产品、有什么活动会第一时间公布!
我在用这类站群服务器、还可以. 用很多年了。