CSS中,一个常见的需求就是在网站中添加一个导航栏,并加上打开和关闭功能。这可以通过使用CSS的“伪类”来实现。首先,我们需要添加一个HTML结构来表示导航条:<div class= n
<div class="navbar"> <div class="navbar-btn">Menu</div> <ul class="navbar-links"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </div>
/* 默认状态下的导航栏 */ .navbar-links { display: none; } /* 当按钮被点击时显示链接列表 */ .navbar-btn:focus + .navbar-links { display: block; } /* 链接列表样式 */ .navbar-links { position: absolute; top: 60px; right: 0; padding: 10px; background-color: #fff; border: 1px solid #ddd; } /* 按钮样式 */ .navbar-btn { display: inline-block; padding: 10px 20px; background-color: #ddd; color: #555; cursor: pointer; } /* 当按钮被聚焦时改变其样式 */ .navbar-btn:focus { outline: none; background-color: #555; color: #fff; }
粉丝
0
关注
0
收藏
0