位置: IT常识 - 正文

HTML中设定下划线样式并且指定下划线长度(html下划线怎么设置)

编辑:rootadmin
HTML中设定下划线样式并且指定下划线长度

推荐整理分享HTML中设定下划线样式并且指定下划线长度(html下划线怎么设置),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:html下划线怎么弄,html中怎么设置下划线,html设置下划线,html设置下划线,html下划线怎么设置,html5设置下划线,html5设置下划线,html下划线代码怎么写,内容如对您有帮助,希望把文章链接给更多的朋友!

今天笔者在写网页导航栏时,想要给链接加一个悬停下划线,写出来如下

HTMl:

<ul> <li><a href="#">首页</a></li> <li><a href="#">课程</a></li> <li><a href="#">职业规划</a></li></ul>

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)

 虽然第二种方法美观了不少,但是有一个小问题:”首页“下面的下划线太短了,不美观,有没有一种方法能将其下划线变长呢?当然有,可以通过将<a>转化为行内块来实现,代码如下:

HTML:

<ul> <li><a href="#">首页</a></li> <li><a href="#">课程</a></li> <li><a class="planning" href="#">职业规划</a></li></ul>

CSS:

a { display: inline-block; /*将<a>转化为行内块*/ text-decoration: none; color: black;}.planning { width: 90px; /*由于“职业规划”四个字过长,特别把他盒子整大一点*/}li a:hover { padding-bottom: 10px; /*盒子下边距,这里用来指定下划线距离文字的高度*/ border-bottom: 2px solid skyblue; /*设定一个2px,实线,天蓝色的下边距*/}

效果如下:

HTML中设定下划线样式并且指定下划线长度(html下划线怎么设置)

诶感觉不错

但是作为一个严谨的技术人来说,这个还不够,仔细观察会发现:将整个链接改为行内块之后,点击整个盒子的区域都会导致跳转(有没有什么软件能将光标一起截图啊,这张图是在obs窗口里截的,可能不太清晰,领会精神就行...)

 这里用定位来实现这个效果,代码如下:

HTML:

<ul> <li> <a href="#">首页</a> <i id="underline">_____</i> </li> <li> <a href="#">课程</a> <i id="underline">_____</i> </li> <li> <a href="#">职业规划</a> <i id="underline">________</i> </li></ul>

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; /*悬停时可见*/}

效果图如下:

 但是别急,还存在一个小问题:

在悬停时,光标变成了输入状态,而且点击不能跳转了,推测可能是因为<i>跟<a>在同一级的原因,导致无法跳转,将<i>放入<a>中即可

HTML:

<ul> <li> <a href="#">首页<i id="underline">_____</i></a> </li> <li> <a href="#">课程<i id="underline">_____</i></a> </li> <li> <a href="#">职业规划<i id="underline">________</i></a> </li></ul>

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; /*悬停时可见*/}

最终效果图:

 

这次不会出现任何问题了,做到了仅当鼠标悬停在字上时,才会出现下划线~

有任何问题欢迎一起讨论~

下次见啦~

本文链接地址:https://www.jiuchutong.com/zhishi/295338.html 转载请保留说明!

上一篇:JS逆向 webpack解密(auto.js 逆向)

下一篇:百度低代码框架amis介绍及实例讲解(低代码框架开发)

  • 闲鱼卖东西要自己寄吗(闲鱼卖东西要自己出邮费吗)

    闲鱼卖东西要自己寄吗(闲鱼卖东西要自己出邮费吗)

  • 红米k40pro+屏占比是多少(红米k40pro+的屏幕)

    红米k40pro+屏占比是多少(红米k40pro+的屏幕)

  • 微信聊天记录可以发送给别人吗(微信聊天记录可以在另外一个手机上恢复吗)

    微信聊天记录可以发送给别人吗(微信聊天记录可以在另外一个手机上恢复吗)

  • 手机丢了关机怎么定位找回(手机丢了关机怎么追踪手机位置呢)

    手机丢了关机怎么定位找回(手机丢了关机怎么追踪手机位置呢)

  • 苹果X怎么设置门禁卡(苹果x怎么设置呼叫转移其他号码)

    苹果X怎么设置门禁卡(苹果x怎么设置呼叫转移其他号码)

  • 误删好友怎么恢复聊天记录(误删好友怎么恢复亲密度)

    误删好友怎么恢复聊天记录(误删好友怎么恢复亲密度)

  • 华为打开软件后屏幕变暗(华为打开软件后怎么退出)

    华为打开软件后屏幕变暗(华为打开软件后怎么退出)

  • 电脑pressctrl+alt+del是怎么回事(电脑PressCtrl)

    电脑pressctrl+alt+del是怎么回事(电脑PressCtrl)

  • 荣耀x10发布会时间几点(荣耀x10pro发布会)

    荣耀x10发布会时间几点(荣耀x10pro发布会)

  • u盘内存有多大的(U盘内存有多大的)

    u盘内存有多大的(U盘内存有多大的)

  • kaios系统有微信吗(kai os支持微信吗)

    kaios系统有微信吗(kai os支持微信吗)

  • 电脑开机出现invalid partition table(电脑开机出现invalid partition)

    电脑开机出现invalid partition table(电脑开机出现invalid partition)

  • 微信怎么设置别人打不进视频和语音(微信怎么设置别人拉不了我进群聊)

    微信怎么设置别人打不进视频和语音(微信怎么设置别人拉不了我进群聊)

  • 电脑上的微信聊天记录怎么导入手机(电脑上的微信聊天记录怎么删除)

    电脑上的微信聊天记录怎么导入手机(电脑上的微信聊天记录怎么删除)

  • 企鹅电竞可以看回放吗(企鹅电竞看走势赚钱)

    企鹅电竞可以看回放吗(企鹅电竞看走势赚钱)

  • 摄像头poe和非poe区分(摄像头poe和非poe哪个贵)

    摄像头poe和非poe区分(摄像头poe和非poe哪个贵)

  • 手机屏幕有划痕还能贴膜吗(手机屏幕有划痕怎么修复)

    手机屏幕有划痕还能贴膜吗(手机屏幕有划痕怎么修复)

  • realmex2是什么牌子(realme x2真实口碑)

    realmex2是什么牌子(realme x2真实口碑)

  • 手机突然无服务是什么原因(华为手机突然无服务)

    手机突然无服务是什么原因(华为手机突然无服务)

  • 手机怎样放内存卡(怎样把手机内存放到储存卡里)

    手机怎样放内存卡(怎样把手机内存放到储存卡里)

  • 手机qq音乐怎么退出登录(手机qq音乐怎么导入本地音乐)

    手机qq音乐怎么退出登录(手机qq音乐怎么导入本地音乐)

  • 微信怎么开启悬浮窗(微信怎么开启悬浮窗功能)

    微信怎么开启悬浮窗(微信怎么开启悬浮窗功能)

  • 微信如何设置一直登录(微信如何设置来电铃声)

    微信如何设置一直登录(微信如何设置来电铃声)

  • 钉钉怎么滚动长截图(钉钉如何截图滚动窗口)

    钉钉怎么滚动长截图(钉钉如何截图滚动窗口)

  • 4g限速后怎样提升网速(4g限速后怎样提升速度)

    4g限速后怎样提升网速(4g限速后怎样提升速度)

  • 去除页眉中的横线的方法(去除页眉的横线快捷方式)

    去除页眉中的横线的方法(去除页眉的横线快捷方式)

  • 小规模纳税人销售自己使用过固定资产
  • 对公帐户退款
  • 社保局发放的稳岗补贴怎么入账
  • 政府减免税款如何账务处理
  • 工程预付款需要什么资料
  • 先开了发票给客户,不付款怎么办
  • 代扣代缴手续费返还需要缴纳增值税吗
  • 实收资本未实缴到位,是否缴纳印花税
  • 所得税退税未办理可以注销吗?
  • 小规模纳税人不允许开具零税率发票
  • 专票和国税额差很多
  • 自主就业退役士兵从事个体经营的
  • 混合销售和兼营的区别
  • 公司替员工承担个税分录不再收回
  • 应付职工薪酬会计科目怎么做
  • 卷烟批发企业批发卷烟是否缴纳消费税
  • 酒类应税消费品消费税纳税申报表怎么填
  • 科技型企业科研项目申报
  • 货币资金核算流程设计
  • 如何关闭windowsdefender防病毒
  • 个人开发是什么意思
  • 如何失业保险金
  • 收到业绩补偿会扣税吗
  • 企业利润取出税费有哪些
  • el-switch右对齐
  • php使用自定义函数的方式
  • 前端的基础知识
  • 基建账并账规定
  • 路径规划的基本流程和方法
  • roi opencv
  • 造孽啊啥意思
  • 解压包的命令
  • 资产减值损失一经计提不得转回
  • 防洪费属于税金及附加吗
  • phpcms使用教程
  • 营改增一般纳税人简易征收的范围
  • 旅游费用叫什么
  • 会计要考哪些证书,难度如何
  • 帝国cms会员注册天数自动升级会员组
  • centos7.1
  • 旅游门票费用可以用来报销吗?
  • 土地使用发票
  • 原材料用于加工什么
  • 工业企业库存商品的初始入账成本
  • 对方给我们等额的钱
  • 小规模纳税人销售商品会计分录
  • 核定征收的三种方式
  • 公司账户钱能全取出来吗
  • 如何区分借贷方和负债方
  • 勾选认证能够勾选当月
  • 未开票收入如何申报
  • 发票金额与实际金额不符怎么举报
  • 汇算清缴调增的工资怎么做账
  • 国家退税计入什么科目
  • 长期股权投资利润调整加折旧
  • 年底奖金怎么入账
  • 补记式余额调节法怎么写项目
  • sqlserver查询语句大全讲解
  • 没有本地策略的网站
  • windows7自动开机脚本文件
  • win8应用商店打开很慢怎么办
  • xp.系统
  • windows手动启动服务
  • linux 详解
  • dl是什么文件
  • ubuntu 配置
  • win7系统如何调节电脑屏幕亮度
  • win7修改用户密码命令
  • node js教程
  • python num怎么用
  • unity3d地图定位
  • unity3d从入门到精通
  • vue3目录解析
  • Tiled GPU perf. warning: RenderTexture color surface (0x0) was not cleared/discarded
  • android中toast用法
  • 出口退税企业的账务处理
  • 新公司印花税的缴纳
  • 买新房子需要交契税吗
  • 企业税收有哪些税种
  • 西安市乱占耕地建房
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设