关于技术您现在的位置是:首页 > 关于技术
CSS如何优雅地实现目录结构中间横线自适应
2019-01-21 17:31:22 【CSS】 840 人已围观 0 条评论
简介
项目中我们经常会遇到一些类似于新闻列表的布局,例如下面的栗子: 那么中间的横线该如何自适应实现呢? 其实也简单 […]
项目中我们经常会遇到一些类似于新闻列表的布局,例如下面的栗子:
那么中间的横线该如何自适应实现呢?
其实也简单,只要把横线设置为背景图片,然后给左边的标题和右边的更新时间设置与页面相同的背景色即可,用来遮挡横线背景。具体代码如下:
页面结构html:
<ul class="video_list con"> <li> <a href="#"> <h4>3D3SV13.0演示视频-网壳整体稳定性分析</h4> <i>(2017-09-08更新)</i> </a> </li> </ul>
核心CSS代码:
.video_list{ width: 1000px; margin-top: 50px; margin-bottom: 50px; } .video_list li{ width: 100%; font-size: 14px; line-height: 20px; margin-bottom: 30px; } .video_list li a{ display: block; color: #434343; background: url(../images/common/list_bg.png) repeat-x; background-position: left center; } .video_list li a:hover{ color: #b2b2b2; } .video_list li h4{ display: inline-block; background-color: #fff; } .video_list li i{ float: right; background-color: #fff; }
以上,就简单的实现了,列表中间横线自适应的效果了。当然,要实现这样的效果还有很多方法,这里只是简单的介绍一种最普通的方法。
Over~拜
已是最后文章
下一篇: 纯CSS实现广告位3D滚动效果
相关推荐
文章评论

点击排行
友情推荐
- 微信公众号:扫描加关注