CSS可以通过设置默认的选中导航栏来控制页面的初次展示效果。nav { display: flex; justify-content: space-around; } nav a { padding:
CSS可以通过设置默认的选中导航栏来控制页面的初次展示效果。
nav { display: flex; justify-content: space-around; } nav a { padding: 10px; text-decoration: none; color: #333; border-bottom: 2px solid transparent; } nav a:hover { border-bottom: 2px solid #333; } nav .active { border-bottom: 2px solid #333; }
在上面的代码中,我们首先使用了flex布局来实现导航栏的水平排列,并为导航栏中的每一个链接设置了共同的样式,包括内边距、文本装饰和文字颜色。
其中,nav a:hover
表示鼠标经过链接时的样式,为其下边框设置了2像素的宽度以及黑色的颜色。
而nav .active
则为默认选中的导航栏设置了样式,同样为其下边框设置了2像素的宽度以及黑色的颜色,以区别于其他链接。
因此,在HTML中只需要设置一个链接的class为active
即可默认选中该链接,并在页面加载时呈现这个效果。
粉丝
0
关注
0
收藏
0