主页 / 问题 / 700845
Accepted
Ara Chinaryan
Asked:2020-08-02 15:15:06 +0000 UTC2020-08-02 15:15:06 +0000 UTC

Bootstrap 菜单，链接顶部的图片

  • 772

大家好。你能告诉我部分 HTML 和 CSS 代码如何制作这样的菜单，以便图片位于链接的顶部。

    <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav">
            <li><a href="#">Палитра</a></li>
            <li><a href="#">Page 3</a></li>
        </ul>
    </div>

在此处输入图像描述

bootstrap

2 个回答

  1. *{
 box-sizing: border-box;
}

.nav {
    padding: 0;
}
.nav > li {
    list-style: none;
    float: left;
}

.nav > li a {
    display: inline-block;
    position: relative;
    padding-top: 50px;
}

.nav > li a:before {
    content: '';
    position: absolute;
    top: 5px;
    left: 50%;
    margin-left: -23px;
    width: 46px;
    height: 44px;
    background: url(https://www.w3schools.com/css/img_navsprites.gif) 0 0;
    text-align: center;   
}
.nav > li:nth-of-type(2) a:before{    
    width: 43px;
    background: url(https://www.w3schools.com/css/img_navsprites.gif) -47px 0;
}
.nav > li:nth-of-type(3) a:before{
    width: 43px;
    background: url(https://www.w3schools.com/css/img_navsprites.gif) -91px 0;
}
    <ul class="nav navbar-nav">
    <li><a href="#">Палитра</a></li>
    <li><a href="#">Палитра</a></li>
    <li><a href="#">Палитра</a></li>     
</ul>

    • 1
  2. Best Answer

    .navbar-custom {
  background: #0c7b86;
}

.navbar-toggle .icon-bar {
  background: #fff;
}

.navbar-custom a {
  color: #fff;
}

.ico {
  display: block;
  width: 50px;
}
    <script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.min.js"></script>
  
  
<nav class="navbar navbar-custom">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span> 
      </button>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active">
          <a href="#">
            <span class="ico">
              <img src="http://www.newdesignfile.com/postpic/2012/06/black-white-home-icon_280130.png" alt="" class="img-responsive">
            </span>
            <span>Home</span>
          </a>
        </li>
        <li>
          <a href="#">
            <span class="ico">
              <img src="http://www.newdesignfile.com/postpic/2012/06/black-white-home-icon_280130.png" alt="" class="img-responsive">
            </span>
            <span>Page 1</span>
          </a>
        </li>
        <li>
          <a href="#">
            <span class="ico">
              <img src="http://www.newdesignfile.com/postpic/2012/06/black-white-home-icon_280130.png" alt="" class="img-responsive">
            </span>
            <span>Page 2</span>
          </a>
        </li> 
        <li>
          <a href="#">
            <span class="ico">
              <img src="http://www.newdesignfile.com/postpic/2012/06/black-white-home-icon_280130.png" alt="" class="img-responsive">
            </span>
            <span>Page 3</span>
          </a>
        </li> 
      </ul>
    </div>
  </div>
</nav>

    • 1

相关问题