关于技术您现在的位置是:首页 > 关于技术

CSS如何优雅地实现目录结构中间横线自适应

头像 2019-01-21 17:31:22 116 人已围观 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~拜

文章评论


  • 0 条评论来说两句吧…  (* 为必填项,邮箱不会公开)

  •  *
  •  *
  • 提交评论

最停留-个人博客

友情推荐

  • 微信公众号:扫描加关注
  • 最停留-微信公众号