-3

Как сверстать блок header таким образом, как это изображено на картинке, средствами только css и html?

введите сюда описание изображения

1
  • 4
    Добавьте пример и Ваш код.
    – Narek
    9 апр 2020 в 10:47

2 ответа 2

4

.wrapper{
  background: linear-gradient(to right, #D0CFD4 30%, #E8E8E8 60% );
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
}

.logo{
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -ms-align-items: center;
  align-items: center;

}

.a{
  font-size: 35px;
  text-transform: capitalize;
  color: #373737;
}
.b{
  color: #C03635;
}
.list{
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -ms-align-items: flex-end;
  align-items: flex-end;
}
ul{
  list-style-type: none;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
}
li{
  margin-left: 20px;
  border-right: 1px solid #000;
  padding-right: 10px;
}
li:hover{
color: red;
}
li:last-child{
  border-right: none;
}
<div class="wrapper">
  <div class="logo">
 <a href="https://imgbb.com/"><img src="https://i.stack.imgur.com/AieOc.png" alt="1586433967272" border="0"></a>
    <span class='a'>Xman<span class='b'>Bank</span></span>
  </div>
  <div class="list">
    <ul>
      <li>My account</li>
      <li>Settings</li>
      <li>Logout</li>
    </ul>
  </div>
</div>

введите сюда описание изображения

8
  • Всё хорошо, надо только с фоном иконки поработать, чтобы не выделялся квадратом (+) 9 апр 2020 в 16:29
  • попробуй в графическом редакторе вырезать фон иконки и перевести иконку в формат png 9 апр 2020 в 17:20
  • После того, как сделана картинка без фона в формате png, загружаешь её на сервер хранения картинок. Для этого открываешь топик на редактирование - вставка изображений (Ctrl+G) Картинка загрузится в топик, копируешь её ссылку и вставляешь в свой код, вместо ссылки на изображение JPG 9 апр 2020 в 18:30
  • @Lекs "[1]: i.stack.imgur.com/t5MfO.png" вот так выглядит ссылка на сервер, где хранятся картинки Она получится автоматически после выполнения действий, описанных в комментарии выше 9 апр 2020 в 18:39
  • А в фотошопе фон стирал инструментом "Волшебный ластик"? 9 апр 2020 в 19:26
2

div {
  position: relative; width: 100%; height: 90px;
  background: linear-gradient(to right, #D0CFD4 30%, #E8E8E8 60%);
}

ul {
  list-style: none; margin: 0;
  position: absolute;
  bottom: 14px; right: 10px;
}

li {display: inline-block; padding: 0 8px 0 4px; line-height: 14px;}
li:hover {color: red;}
li:not(:last-child) {border-right: 1px solid #000;}

img {float: left; margin: 7px 7px 0 14px;}
span {line-height: 90px; font-size: 35px; color: #373737;}
span>span {color: #C03635;}
<div>
  <img src="https://i.stack.imgur.com/AieOc.png"><span>Xman<span>Bank</span></span>
  <ul>
    <li>My account</li>
    <li>Settings</li>
    <li>Logout</li>
  </ul>
</div>

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.