前端导航栏标签中间的小竖线 超简单的实现方法~

最新推荐文章于 2024-02-28 12:37:15 发布
最新推荐文章于 2024-02-28 12:37:15 发布
阅读量972 收藏 4
点赞数 1
文章标签： html css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_71926767/article/details/130331241
版权

标签和标签挤在一起很难看?怎么办！！？？不急不急~当然使用小竖线给它隔开啦

实现方法：

把每个小竖线都看成一个盒子,给它一个高度、背景颜色以及左右两边的margin值。这里使用的是小li来制作盒子。如图所示，一共需要13个小li。

html:

刚好偶数个小li做为小竖线的盒子，所以把所有偶数的小li选择，统一给它们写样式。

CSS:

 这样就可以实现了~（效果如第一张图所示）

 

 

 

m0_71926767
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
js实现前端界面导航栏下拉列表
10-14
本文将详细介绍如何使用JavaScript实现前端界面的导航栏下拉列表。 首先，我们需要创建HTML结构。一个简单的导航栏下拉列表通常由`<nav>`元素包裹，内部包含一个无序列表`<ul>`，每个列表项`<li>`代表一个菜单项，...
导航栏 实现标签之间用竖线“|”分隔的六种写法
热门推荐
junxianzhou的博客
08-26 2万+
导航栏 a标签用竖线“|”分隔的六种写法 html代码： <div class="navigation-bar"> <a class="item active" href="#home">首页</a> <a class="item" href="#aboutus">关于我们</a> <a class="item" href="#service">专业服务</a> </div> 效果图：
html导航栏中加竖线,前端导航栏标签中间的小竖线 实现方法
weixin_39976081的博客
05-31 3635
此方法在可控性方面比较占优势但是会增加一个竖线的节点html部分：CSS部分：.top .top_page .top_page_l ul li{float: left;margin-right: 6px;//要计算好距离}.top .top_page .top_page_l ul li a{display: inline-block;margin-right: 6px;//计算好距离}方法二：HT...
前端学习-导航栏中的竖线
qq_50106904的博客
08-04 918
导航栏中的竖线
【css】导航栏li竖线“|”的写法；
weixin_30597269的博客
01-12 2066
导航栏li竖线“|”的写法； 1、li加boder-right（利用margin-right：-1px；隐去最右边的border）； 2、直接在htm写|； 3、利用<span>|</span>； 4、直接切图,利用background； 转载于:https://www.cnblogs.com/othen/p/4219916.html...
css 实现图片间用间隔线（竖线）
wzt888的博客
12-30 3766
Vue实现导航栏点击当前标签变色功能
10-16
主要为大家详细介绍了Vue实现导航栏点击当前标签变色功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Vue实现点击导航栏当前标签后变色功能
10-14
在Vue.js中，实现点击导航栏当前标签后变色的功能是一项常见的需求，它能提供良好的用户体验，让用户清楚地知道当前所在页面。以下是如何利用Vue.js实现这一功能的详细步骤和相关知识点。 首先，我们需要在HTML模板...
微信小程序实现左侧滑动导航栏
10-16
主要为大家详细介绍了微信小程序实现左侧滑动导航栏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
小程序实现自定义导航栏适配完美版
10-17
主要介绍了小程序实现自定义导航栏适配完美版，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Canvas学习：绘制虚线和圆点线
wulixiaoxiao1的博客
03-18 7382
上一节中，使用moveTo()、lineTo()和stroke()可以很轻易的在Canvas中绘制出实线（线段）。整篇文章中看到的都是绘制实现。不知道你和我是不是一样的好奇，那么要在Canvas中绘制虚线和圆点线又要怎么绘制，在Canvas有没有类似的API能直接绘制呢？ 其实我也很好奇，看了一些资料，要像绘制实线那样简单或者直接，相对来说是没有的，但不用担心，通过其他的方法也是可以实现的。
前端画竖线
girllan的博客
07-02 1371
一条竖线的写法 实现原理： 利用浮动,设置width:1px 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale
导航栏困扰初学者的小竖线
ChangXuanjie的博客
08-19 1002
我们平时做导航栏，在两个超链接中有一条小竖线，该怎么实现呢，讲三种方法： html样式 <div> <a href="#">首页</a> <a href="#">网站导航</a> <a href="#">教育网</a> <a href="#" class="last">English</a> </div> 第一种：边框实现法 <style> * { margin:
无序列表制作横向导航
Mervyn(vivo)的专栏
05-10 9942
关于导航栏，就是导航横向排列中间用竖线分割的那种，我所见的做法有4种了。最简单的也是以前最常用的是栏目1 | 栏目2 | 栏目3 这种。自从div+css爆发开始，很多导航都采用无序列表这种方式了。据说这种方式有N多好处，具体如何不得而知。用做导航栏最大的问题就在于中间的一条竖线。这条竖线的加入方法我见过三种。  利用空的,给这个li一个class，在class中定义背景宽度
使用css在页面画一条竖线
最新发布
m0_70605065的博客
02-28 702
在这个例子中，我们创建了一个名为 vertical-line 的 CSS 类，它使用 border-left 属性来创建一条竖线。你可以通过调整 border-left 的值来改变线的粗细和颜色，通过调整 height 的值来改变线的高度，以及通过调整 top 的值来改变线的垂直位置。然后在 HTML 中，我们使用一个 div 元素并应用这个类来在页面上显示这条线。
＜li＞标签 —— 转换为行内块后，横向列表无法对齐
Y_Aryan的博客
08-07 719
。
前端导航栏标签中间的小竖线 实现方法
weixin_30481087的博客
05-13 2465
此方法在可控性方面比较占优势但是会增加一个竖线的节点 html部分： <div class="top_page_l"> <ul> <li><a href="#">小米商城</a><s>|</s></li> <li><a href="#">MIUI&...
web前端入门到实战：css左边竖条的实现方法
软件开发-前端开发-IT
09-05 1054
问题描述： 在只使用一个标签的情况下实现左边竖线，通用标签与样式如下： 实现左边竖线 html: <div>实现左边竖线</div> css: web前端开发学习Q-q-u-n： 731771211，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频） .div1 { width: 200px; he...
菜单导航间竖杠竖线间隔符 | 效果的CSS实现
小菜鸡程序媛的挣扎史
07-26 4834
只有少数的间隔符（比如1个） 1、<a></a> <span>|<span> <a></a> 用span来创造两边的空隙而不使用空格 有多个重复的间隔符 1、使用<a>的border属性 再用first-child把最左边的删掉 缺点：如果点击效果和点击范围仅限文字，那么...
网页导航栏标签页代码实现
05-29
网页导航栏标签页可以通过HTML和CSS代码实现。以下是一个简单的例子： ... ``` <li><a href="#">首页</a></li> <li><a href="#">新闻</a></li> ...通过 CSS 样式，可以实现导航栏的样式和交互效果。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值