css 实现图片间用间隔线（竖线）

用伪元素(::after)实现

//父元素
.recom_bd ul li {position: relative;   //父元素用相对路径float: left;
}//子元素.recom_bd ul li:nth-child(-n+3)::after {       content: '';      position: absolute;     //子元素用绝对路径right: 0;             top: 10px;width: 1px;         height: 145px;background-color: red;注:
1.nth-child(-n+3)表示，在div内，li有4个，一般前三个li需要竖线隔开，第四个不需要，n+3表示从第三个往后面数，则-n+3就是从第三个往前数，即实现了前三个竖线显示，第四个不显示。
2.right和top表示竖线在li的位置是靠右的。
3.width和height表示竖线在li中的大小。
4.子绝父相记得搭配使用（子元素用绝对路径，父元素用相对路径）；

效果如下：

css 实现图片间用间隔线（竖线）相关推荐

html照片与照片之间的间隔,css设置图片之间的间隔的方法
css设置图片之间的间隔的方法发布时间:2021-01-05 09:32:24 来源:亿速云阅读:116 作者:小新这篇文章将为大家详细讲解有关css设置图片之间的间隔的方法,小编觉得挺实用的, ...
使用CSS实现间隔线|(竖线)
方法一: <div style="float:left;width: 1px;height: 25px; background: #000;"></div>
CSS实现间隔线|(竖线)
<div style="float:left;width: 1px;height: 40px; background: #e5e5e5;"></div> 就 ...
html文字图片同一行,CSS控制图片和文字在同一行显示且对齐的3种方法
CSS控制图片和文字在同一行显示且对齐的3种方法在 HTML 代码中,有时会需要在文字旁边加上一个图标. 默认情况,是图片置顶对齐,文字置底对齐,所以通常图片高,文字低,不能水平居中对齐. 常见欢思 ...
html图片自动滚动播放器,jQuery+css实现图片滚动效果(附源码)
bxCarousel参数说明: move:每次滚动移动图片的数量,默认为4. display_num:展示图片的数量,默认为4. speed:图片滚动速度,默认为500毫秒. margin:图片间的间 ...
python+opencv将表格图片按照表格框线分割、识别
如下小程序为使用python+opencv将表格图片,按照表格进行分割,并识别分割后的子图片中的文字,希望对需要的小伙伴有一些些帮助.具体的实现见如下代码. # -*- coding: utf-8 - ...
webpack打包css image,webpack 打包CSS 引入图片
加载css 安装style-loader, css-loader npm install style-loader css-loader --save-dev 配置webpack.config.js文 ...
html中改变一张图片的颜色,简单的 css 改变图片颜色
当我们在做项目的时候,经常有许多个icon 图片两个或更多个颜色的版本,下面切图网教你,怎么用简单的css改变图片的颜色. 熟悉PS的人都应该知道混合模式,css3中也有两个与混合模式相关的属性,mi ...
R语言ggplot2可视化、使用axis.ticks.length函数设置坐标轴间隔标签竖线的长度、并设置坐标轴间隔标签在图像内部（刻度标记放置在图像内部）
R语言ggplot2可视化.使用axis.ticks.length函数设置坐标轴间隔标签竖线的长度.并设置坐标轴间隔标签在图像内部(刻度标记放置在图像内部) 目录

css 实现图片间用间隔线（竖线）

用伪元素(::after)实现

css 实现图片间用间隔线（竖线）相关推荐

最新文章

热门文章