Question

我对品牌徽标图片有疑问。虽然它在我的电脑上看起来不错，但我使用背景颜色来检查悬停，它似乎非常偏离位置。请检查一下。顺便说一句，我是网页设计的新手，所以你可能会在我的代码中看到很多错误，呵呵。 pd：我将图像上传到Imgur，但我直接从文件夹中使用它。

.navbar-default {
  background-color: #4bd434;
  border-color: #209c44;
}
.navbar li a:hover:not(.active) {
    background-color: #209c44;
}
.navbar-default .navbar-brand {
  color: #ffffff;
}
.navbar-default .navbar-nav > li > a {
  color: #ffffff;
  font-weight: bold;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
  color: black; 
}

body {
    background-image: url("Imagenes/1.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.jumbotron {
    margin-top: 100px;
}

.jumbotron h1{
    text-align:center;
}

.map-responsive{
    overflow:hidden;
    padding-bottom:40%;
    position:relative;
    height:0;
}
.map-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}
#brand-image {
  height: 110px;
  width: 110px;
  padding-bottom: 40px;
  margin-top: -24px;
}

#brand-image:hover {
  background-color: red; 
}

<!DOCTYPE html>
<html lang="es">
<head>
  <title>Central de Reparaciones</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <link rel="stylesheet" type="text/css" href=".\sheet.css">
</head>
<body>
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
      <a class="navbar-brand" a href="./index.html">
        <img class="img-responsive" id="brand-image" alt="Website Logo" src="http://s14.postimg.org/rqjmwt8r5/logo.png"/> 
      </a>
      <ul class="nav navbar-nav">         
        <li><a href="./ajax/heladeras.html">Heladeras</a></li>
        <li><a href="./ajax/lavarropas.html">Lavarropas</a></li>
        <li><a href="./ajax/secarropas.html">Secarropas</a></li>
        <li><a href="./ajax/microondas.html">Microondas</a></li>
        <li><a href="./ajax/televisores.html">Televisores</a></li>  
        <li><a href="./ajax/lavavajillas.html">Lavavajillas</a></li>           
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-earphone"></span> (0223) 482-5446</a></li>
        <li><a href="./ajax/donde.html"><span class="glyphicon glyphicon-map-marker"></span> Dónde estamos</a></li>
      </ul>
    </div>
  </nav>
    
  <div class="container">    
    <div class="jumbotron well">
      <div class="page-header">
        <h1>Central de Reparaciones</h1>      
      </div>
      <p>Somos service oficial de Whirpool blablablablal</p> 
      <p>ASDSDASDSDASDDSDASDSDASDDSDDDASDASD</p>
    </div>
  </div>

</body>
<script src=".\script.js"></script>
</html>

Answer 1

由于a.index(sorted(a)[4-1])+1中的padding-bottom: 40px;，似乎已经过时了。删除它应解决问题。如果您希望保持相同的像素比率，请使用#brand-image代替margin-bottom。

您的CSS应如下所示：

padding-bottom

品牌形象似乎没有“响应”

1 个答案: