HTML+CSS实战,导航栏中菜单的样式

我要实现的效果

1.当鼠标悬浮在某个菜单时会出现背景色

2.当鼠标悬浮时字体会变大

3.链接的下划线消失

首先了解

a:link 英文link就是链接的意思,代表当一段文本为链接时的属性

a:hover 英文hover就是悬停的意思,代表鼠标指针放在这个链接上时的属性

在这里我们要用到link标签,hover选择器

接下来看图

在a:link中输入

text-decoration:none;链接的下划线消失

在a:hover中输入

background-color: #FF4500;当鼠标悬浮时会出现背景色

transform: scale(1.2);当鼠标悬浮时字体会变大为原来的1.2倍

text-decoration:none;网页中菜单链接不显示下划线

效果图

源代码




    
    
    



 


你可能感兴趣的:(HTML+CSS实战,导航栏中菜单的样式)