首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

用TAOBAO的方法隐藏多余的线条

偶然的看到了TAOBAO UED团队的BLOG,在上面看到了篇文章,说的是怎么隐藏导航最后一项的竖线 1、类目之间的横竖线 从很久很久以前开始,类目间的竖线无非都只有三种。...1、背景图 在a标签设置一个padding 用宽1px高不等的背景图来position到右侧。 缺点:最后一个还是要用class来隐藏掉背景。 2、符号 在每个a标签之间用”|”符号来填充。...3、a标签右侧的boder。 同背景图一样,只不过使用border-right来代替。缺点也同上。 看到这里,可能已经有人打开淘宝首页用firebug查看源码来看是怎么做了。...其实现有是利用ul的overflow:hidden 再将li的margin-left:-1px的做法做出来的。这样的做法就可以同时避免以上的缺点了。 其实这种方法我们可以在很多地方都用的到,比如

642100
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    文字溢出隐藏以及和flex冲突的问题

    在某些段落中,页面要求文字只显示一行,但是width固定,而文字过长,就会出现一个需求,超过长度限制的文字被隐藏且显示省略号,css 支持这样的属性。...单行文本溢出隐藏 div{ overflow: hidden;   white-space: nowrap;   text-overflow: ellipsis; } 多行文本溢出隐藏 div {...但是有一个我们需要注意的地方!! flex布局是前端写代码经常使用的一种布局方式,简单便捷且有效,但是在使用flex布局的元素中不能同时使用文字溢出隐藏,也就是两者不能同时出现在同一标签中。...这里,我们也有对应的解决办法。 只要保证flex布局和隐藏的样式不在同级元素中就可以,所以在文字外部多包裹一层标签。 可以采用下面这段代码的写法;    的标签进行flex布局 -->   的标签我们引入文字过长隐藏的样式 --> <!

    1.7K10

    css3 属性 text-overflow 实现截取多余文字内容 以省略号来代替多余内容

    css3 属性 text-overflow: ellipsis 前言 正文 结束语 前言 公众号:前端印象 不定时有送书活动,记得关注~ 关注后回复对应文字领取:【面试题】、【前端必看电子书】、【数据结构与算法完整代码...】、【前端技术交流群】 我们在设计网站的时候有时会遇到这样一个需求:因为页面空间大小的问题,需要将多余的文字隐藏起来,并以省略号代替,类似这样的效果: ?...100px; white-space: nowrap; /*使文本内容不换行,写在一行*/ overflow: hidden; /*隐藏多余内容...100px; white-space: nowrap; /*使文本内容不换行,写在一行*/ overflow: hidden; /*隐藏多余内容...*/ text-overflow: ellipsis; /*将多余内容以省略号的方式展示*/ } 效果图 ?

    1K10

    图片内容管家 (把文字隐藏到图片里)

    下载地址) 功能简介: 一款颇具创意的javafx应用软件。 可以在图片放入和编辑: 电影下载链接、电影番号、学习资料网址、告白情诗、记录心情笔记等。 支持链接一键在浏览器打开,支持内容的导出。...对内容进行加密,并支持对图片的密码设置,提高安全性。 软件截图: 1 打开图片 支持拖拽 可以直接拖拽至主界面左侧,图片位置。..., 在迅雷开启的情况下回自动响应。...3 浏览器响应 一键打开 如果是可用浏览器打开的链接,后面会有一个浏览器图标, 点击该按钮,即可一键用浏览器打开该链接。...4 添加内容 方便贴心 输入文本后,按下回车键或者右侧的“新建内容”按钮, 即可添加内容。 5 双击编辑 简单方便 双击对应内容即可编辑。

    3.4K20

    如何巧妙去除隐藏“站长统计”文字链接?

    站长统计没有自带隐藏前台“站长统计”文字的功能,这2字在我们页面中时而多余时而碍眼,所以90%以上的用户都会想办法去除或隐藏“站长统计”四个字。...ID为你网站的统计ID,有2处要修改,分别是id='cnzz_stat_icon_5844924'和stat.php%3Fid%3D5844924,把5844924修改成你网站的统计id就可以了。...增加一段js隐藏站长统计文字链接 在获取的统计代码最后,也就是前面,加一段: document.getElementById("cnzz_stat_icon_xxxxxxx").style.display...= "none"; 在保存前记得修改站点统计ID,将xxxxxxx修改为你的站长统计网站统计ID即可。...参考:如何巧妙去除隐藏“站长统计”文字链接? 版权所有:可定博客 © WNAG.COM.CN 本文标题:《如何巧妙去除隐藏“站长统计”文字链接?》

    2.1K20

    WordPress移除head头部js、css、feed等多余加载项

    在我们开发WordPress主题时,细心的小伙伴或发现网站头部如果加载head页面就会出现很多系统自带的加载项目,例如自带的css、js、feed、style等多余信息。...这些加载项目很多是没有必要加载的,那么我们如何将这些多余的head头部信息移除呢? 方法很简单,网上针对此类WordPress优化的教程也很多,今天WPTOO教程网就给大家整理下。...我们先看看移除多余加载项之前的代码截图 解决方法 //去除头部多余加载信息 remove_action( 'wp_head', 'wp_generator' );//移除WordPress版本 remove_action...rest_output_link_wp_head', 10 ); //移除wp-json remove_action( 'wp_head', 'print_emoji_detection_script', 7 ); //头部的JS...head头部是不是少了很多多余加载项信息? 下面是精简后的代码截图 ?

    2.6K20
    领券