我将如何在 HTML/CSS 中进行此列表 [关闭]

【问题标题】：How would I do this listing in HTML/CSS [closed]我将如何在 HTML/CSS 中进行此列表 [关闭]
【发布时间】：2014-06-12 05:22:39
【问题描述】：

我把它做成了 Photoshop（http://i.imgur.com/pte5hfk.png - 你在那里看不到它，但文本之间有分隔线）以便将它放在我的网站上，但是我无法让它正常工作。目前，我刚刚使用了<img src = "" />，但它看起来一点也不好看。有什么想法吗？

<div class = "container">
    <div class = "row"> the image is transparent too.
       <div class = "col-md-12" align = "center">
          <img class = "img-responsive" src = "img/sepline.png">
        </div>
     </div>
</div>

谢谢

【问题讨论】：

  • 如果您不向我们展示一些代码怎么办？！ :)
  • @RokoC.Buljan 我必须向您展示的唯一代码是容器内的 img src。错误的不是位置，而是它的外观。
  • 我们不知道没有代码的样子。我假设图像是透明的，但是，我不知道图像背后的颜色是什么。它是否“看起来不错”是主观的。请给我们更多的合作机会！
  • 图片也是透明的。
  • @GANIZniz 这次我会为你做这件事，我会将 HTML 放在你的问题中。然后找到你的 CSS，然后点击 |edit| 按钮并使用正确的代码格式将其粘贴到下方。

标签： html css image twitter-bootstrap-3


【解决方案1】：

如果您尝试使用 HTML 和 CSS 创建一个看起来像您发布的图像的菜单，这应该可以帮助您开始。

HTML：

<div class="container">
  <div class="row">
    <div class="col-md-3">
      <ul class="nav nav-custom">
        <li><a href="#"><i class="glyphicon glyphicon-chevron-right"></i>Item A</a></li>
        <li><a href="#"><i class="glyphicon glyphicon-chevron-right"></i>Item B</a></li>
        <li><a href="#"><i class="glyphicon glyphicon-chevron-right"></i>Item C</a></li>
        <li><a href="#"><i class="glyphicon glyphicon-chevron-right"></i>Item D</a></li>
        <li><a href="#"><i class="glyphicon glyphicon-chevron-right"></i>Item E</a></li>
        <li><a href="#"><i class="glyphicon glyphicon-chevron-right"></i>Item F</a></li>
      </ul>
    </div>
  </div>
</div>

CSS：

.nav-custom i.glyphicon {
    margin-right: 25px;
}
.nav-custom li {
    border-top: 1px solid #DDD;
}
.nav-custom li:first-child {
    border-top: none;
}

您也许可以使用 WebKit CSS 来完成渐变分隔线，但更可能的是您必须使用图像。

小提琴：http://jsfiddle.net/natalieperna/g3cFk/1/

【讨论】：

    猜你喜欢
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode