HTML-панель с двумя графическими гиперссылками - PullRequest
Новая
       33

HTML-панель с двумя графическими гиперссылками

0 голосов
/ 11 июня 2018

Я пытался создать отзывчивую навигационную панель всего с двумя изображениями (которые являются гиперссылками и прозрачными), и я не могу правильно выбрать форматирование.Я хочу, чтобы он выглядел следующим образом:

  • Первое изображение: ширина: 60%
  • Второе изображение: ширина: 40%
  • Оба имеют одинаковую высоту
  • Граница: сплошной черный 2px (вокруг обоих изображений)
  • Заполнение: 10px (вокруг обоих изображений и между ними)
  • Держите панель навигации вверху страницы
  • Эффект наведения, изменяющий цвет фона

Базовая идея

Наиболее близким является код:

HTML: 

<head>
    <div id="outerdiv" class="navbar-fixed-top">
         <a href="index.php"><img id="image1" src="image1.png"  alt="Find"/></a>
         <a href="add.php" > <img id="image2" src="image2.png" alt="Add"/></a>
    </div>
</head>

CSS: 

 <style>
    img{
        display:inline-block;
        border: 2px solid black;
        background-color:#499FE2;    
    }
    img:hover{
        background-color: #91BCEE;
    }

    #image1{
        width:60%;
        float:left;
    }

    #image2{
       width:40%;
       float:left;
    }

    #outerdiv{
       background-color: #black ;
    }

    a{
        display: block;
    }
</style>

Основная проблема, с которой я столкнулся, заключается в том, что я не могу понять, где реализовать заполнение, чтобы оно разделяло два изображения и окружалоих.

1 Ответ

0 голосов
/ 11 июня 2018

Сначала вам нужно очистить ваш HTML-код от действительного HTML-кода, чтобы ваши селекторы CSS могли применять стили к элементам в DOM.Удалите обратную косую черту из вашего кода HMTL, чтобы получить это; 

<head>
<div id="outerdiv" class="navbar-fixed-top">
     <a href="index.php"><img id="image1" src="image1.png"  alt="Find"/></a>
     <a href="add.php" > <img id="image2"   src="image2.png" alt="Add"/></a>
</div>
</head>

Добавьте левый край -4px к изображениям, чтобы противостоять пространству, используемому границами (это предотвращает переход второго изображения на следующую строкутак как они занимают 60% + 40% всей ширины страницы, все же правая + левая границы изображений занимают 4 пикселя).

Также добавить отображение: блок;свойство селектора "#outerdiv" и измените значение свойства display для селектора "a" на встроенное. 

img{
    display:inline-block;
    border: 2px solid black;
    background-color:#499FE2;
    margin-left:-4px;
}
img:hover{
    background-color: #91BCEE;
}

#image1{
    width:60%;
    float:left;
}

#image2{
   width:40%;
   float:left;
}

#outerdiv{
   background-color:black;
   display: block;
}

a{
    display: inline;
}

см. рабочий фрагмент 

 img{
        display:inline-block;
        border: 2px solid black;
        background-color:#499FE2;
        margin-left:-4px;
    }
    img:hover{
        background-color: #91BCEE;
    }

    #image1{
        width:60%;
        float:left;
    }

    #image2{
       width:40%;
       float:left;
    }

    #outerdiv{
       background-color:black;
       display: block;
    }

    a{
        display: inline;
    }
<head>
    <div id="outerdiv" class="navbar-fixed-top">
         <a href="index.php"><img id="image1" src="image1.png"  alt="Find"/></a>
         <a href="add.php" > <img id="image2"   src="image2.png" alt="Add"/></a>
    </div>
</head>
...