HTML中设定下划线样式并且指定下划线长度 |
您所在的位置:网站首页 › span标签颜色怎么设置 › HTML中设定下划线样式并且指定下划线长度 |
今天笔者在写网页导航栏时,想要给链接加一个悬停下划线,写出来如下 HTMl: 首页 课程 职业规划CSS:(关于其他格式的设定略,只看下划线这一段代码) a { text-decoration: none; color: black; } li a:hover { text-decoration: underline; }这样确实是设定下划线了,但是效果如下,看上去很难看 既然这样,那么该如何改变一下呢? 其实可以使用border-bottom来实现,代码如下 CSS: a { text-decoration: none; color: black; } li a:hover { padding-bottom: 10px; /*盒子下边距,这里用来指定下划线距离文字的高度*/ border-bottom: 2px solid skyblue; /*设定一个2px,实线,天蓝色的下边距*/ }效果图如下:
可以看的出来,这样写确实比上一种美观不少,而且还可以设定各种参数,但需要注意当元素为块级元素时,下划线不仅仅是文本内容的长度,它会占满一行,所以当给块级元素添加下划线时,要指定宽度,或者将其转变为行级元素(display:inline) 虽然第二种方法美观了不少,但是有一个小问题:”首页“下面的下划线太短了,不美观,有没有一种方法能将其下划线变长呢?当然有,可以通过将转化为行内块来实现,代码如下: HTML: 首页 课程 职业规划CSS: a { display: inline-block; /*将转化为行内块*/ text-decoration: none; color: black; } .planning { width: 90px; /*由于“职业规划”四个字过长,特别把他盒子整大一点*/ } li a:hover { padding-bottom: 10px; /*盒子下边距,这里用来指定下划线距离文字的高度*/ border-bottom: 2px solid skyblue; /*设定一个2px,实线,天蓝色的下边距*/ }效果如下: 诶感觉不错 但是作为一个严谨的技术人来说,这个还不够,仔细观察会发现:将整个链接改为行内块之后,点击整个盒子的区域都会导致跳转(有没有什么软件能将光标一起截图啊,这张图是在obs窗口里截的,可能不太清晰,领会精神就行...) 这里用定位来实现这个效果,代码如下: HTML: 首页 _____ 课程 _____ 职业规划 ________CSS: a { text-decoration: none; color: black; } #underline { position: absolute;/*绝对定位*/ top: 1px; left: -11px; color: skyblue; font-size: 30px; /*设置定位和长度(用字体大小调节下划线长度)*/ visibility: hidden; /*先设置可见度为隐藏*/ } li:hover>#underline { visibility: visible; /*悬停时可见*/ }效果图如下: 但是别急,还存在一个小问题: 在悬停时,光标变成了输入状态,而且点击不能跳转了,推测可能是因为跟在同一级的原因,导致无法跳转,将放入中即可 HTML: 首页_____ 课程_____ 职业规划________CSS: a { text-decoration: none; color: black; } #underline { position: absolute;/*绝对定位*/ top: 1px; left: -11px; color: skyblue; font-size: 30px; /*设置定位和长度(用字体大小调节下划线长度)*/ visibility: hidden; /*先设置可见度为隐藏*/ } a:hover>#underline { /*此处修改了包含关系,所以改为a:hover*/ visibility: visible; /*悬停时可见*/ }最终效果图:
这次不会出现任何问题了,做到了仅当鼠标悬停在字上时,才会出现下划线~ 有任何问题欢迎一起讨论~ 下次见啦~ |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |