css技巧--给选中的tab加下划线

最新推荐文章于 2024-05-15 09:45:51 发布

原创最新推荐文章于 2024-05-15 09:45:51 发布 · 3.2k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#css3

CSS技巧专栏收录该内容

13 篇文章

订阅专栏

博客展示了CSS3相关代码及对应的效果图，聚焦于信息技术领域的前端开发方面，通过代码和可视化效果呈现CSS3的应用。

1、代码

.inquiry-list-wrap .mini-tab-active :after {
    content: '';
    width: auto;
    min-width: 44px;
    height: 2px;
    background: #1182FB;
    border-radius: 1px;
    display: block;
    margin-top: 1px;
}

2、效果图

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

WebKoalaBoy

关注关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

【css】-下划线展示，点击切换tab

jieweiwujie的博客

12-28

1003

下划线展示，点击切换

animated-tab-bar:带有HTML，CSS和Javascript想法的动态标签栏

04-29

例如，当用户切换标签时，可以给当前选中的标签添加一个不同的背景色或下划线动画： ```css .tab-bar { display: flex; } .tab { padding: 10px; cursor: pointer; transition: background-color 0.3s; } ....

1 条评论您还未登录，请先登录后发表或查看评论

纯css实现tab导航栏下划线

热门推荐

康康

08-07

2万+

技术不行，拿百度前端学院题目练习，其中遇到一个导航栏，每当选中一个选项，下面出现一个下划线标注。我本来想直接省掉这个功能，后来觉得这样学习估计什么都学不到。后来思考和查阅，记录如下。大概是这么个效果： HTML代码： Time of new life

css实现tab切换时下划线动画效果

qq_45768050的博客

07-19

3419

css实现tab切换下滑线动画

js实现移动端tab切换时下划线滑动效果

10-16

本文将探讨如何使用JavaScript实现移动端的Tab切换时下划线滑动效果，这通常用于导航菜单，使用户更容易理解当前选中的选项。我们将通过一个简单的示例来详细解释这个过程。首先，HTML结构是基础。在示例中，我们...

css实现tab导航下划线动画效果(从中间过渡到两边)

努力变好

08-12

4160

tab导航的中间开始然后向两边过渡的动画效果，增加页面的美观性...

css不使用text-decoration实现自定义下划线

hcz297799265的博客

11-07

749

利用background-image及其相关属性模拟下划线背景可以完美地跟随换行的文本，而且借助CSS 背景与边框（第三版）中与背景相关的新属性，我们已经拥有了细粒度控制背景的能力。我们甚至不需要用到额外的HTTP 请求来加载背景图片，因为可以通过CSS 渐变来凭空生成所需的图像：background: linear-gradient(gray, gray) no-repeat; backgroun

如何使用::after伪元素实现tab栏底部线条

weixin_43818906的博客

07-19

472

如何使用::after伪元素实现tab栏底部线条如何使用::after伪元素实现tab栏底部线条废话不多说，直接上代码 <a class="common-tab-item" :class="currentView==1?'current':''" @click="tabToggle2(1)">净值趋势</a> <a class="common-tab-item" :class="currentView==2?'current':''" @click="tabToggle

如何制作选中项的下划线样式

qq_42931285的博客

07-15

548

选中状态、下划线

CSS设置文字动态下划线

weixin_45985112的博客

01-08

910

css设置动态下划线

css订单导航栏横线动画,小程序纯css 实现tab导航栏下划线跟随动画

weixin_29062671的博客

08-04

1336

很多时候在做tab导航的点击时我们都会要上一个过渡的动画，不然的话会显得生硬，用户没有达到比较佳的用户体验。如下图：在开发者工具中预览效果t3fyo-a07nj.gif我们可以用两种方法实现这样动画，css3的过渡或者用js去控制。省事的当然是用css3来写啦，我们先来看看css3的具体实现。css3实现：先看最基本的.wxml布局：image.png从图中可以看到，当前tap的line是用专门用...

tab 切换下划线跟随实现

weixin_34061555的博客

09-17

3128

HTML 结构如下： <ul> <li class="active">不可思议的CSS</li> <li>导航栏</li> <li>光标小下划线跟随</li> <li>PURE CSS</li> <li&...

js+css制作导航栏下划线跟随动画，自适应元素尺寸变化，Vue/Uniapp

qq1219579255的博客

02-07

3985

导航栏下划线跟随动画，自适应元素尺寸变化，自定义下划线样式

html导航默认选中状态,css 导航栏下划线跟随效果，默认第一个li为选中状态

weixin_35664484的博客

06-02

2159

本次主要是联系css实现导航栏下划线跟随效果 HTML：js：主要是为了刷新页面，让第一个li默认有下划线和选中效果css：/*下划线跟随*/ul{display: flex;position: initial;}li{position: relative;padding: 1em 2em;font-size: 12px;list-style: none;white-space:nowrap;wi...

导航栏菜单底部加动画横线

sunnyboysix的博客

01-19

1073

一效果图二代码 <template> <div class="menuList"> <div class="menuItem" v-for="(item, index) in list" :key="index" :class="[index + 1 === active ? 'isActive' : '']" @click="changeMenu(item.id)"> <div class="menu">{{ i.

HTML5——css1（选择器，字体，段落，背景，下划线，点击事件（对a标签））

zdc_56的博客

01-26

2683

CSS 都写在哪里 1：直接写在标签里 2：写在style标签内 3：使用外部.css文件（首先创建一个文件写样式，再引入）再引入选择器的使用：如图（id>class>元素选择器）字体/文本： font-famliy：选择字体类型，一般浏览器默认的都是微软雅黑。当写多个字体之后，中间用逗号隔开。如果...