Нужна помощь в верстке меню-бара

senioz · November 13, 2022

Нужно сверстать по картинке меню-бар. Не получается сделать вот это поле поиска

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
.nav {
    display: flex;
    list-style-type: none;
    padding-left: 0;
    font-size: 17px;
    text-transform: uppercase;
}
.nav > li > a {
    color: #fff;
    text-decoration: none;
}
.nav > li {
    padding-left: 29px;
    margin-left: 30px;
}

.header {
    display: flex;
    background-color: #31485b;
    justify-content: space-between;
    align-items: center;
}
 
.sidebar {
    width: 410px;
    display: block;
    padding-right: 20px;
    margin: auto;
    margin-left: 250px;
}
 
ul.nav li a:hover {
    background-color: #687c8d;
    padding: 17.2px 35px;
}
 
input[type="text"], input[type="search"] {
  background-color: #687c8d;
  width: 60%;
  padding: 8px;
  margin: 0 50px
}
 
input[type="search"] {
    color: #31485b;
    font-style: italic;
}



    </style>
</head>
<body>
    <div class="header">
                <ul class="nav">
                    <li class="s1"><a href="#">Главная</a></li>
                    <li><a href="#">Блог</a></li>
                    <li><a href="#">Сервисы</a></li>
                    <li><a href="#">Онлайн-профессии</a></li>
                    <li><a href="#">О сайте</a></li>
                </ul>
               
                <div class="sidebar">
                    <form method="post" action="#" id="search_form" >
                      <input type="search" name="search_field" placeholder="Поиск" />
                    </form>
                  </div>
    </div>
</body>
</html>

Int · March 27

border: none

border-radius примерно 4 пикселя

На background добавиь картинку лупы и справа сделать padding, чтобы текст не залез на картинку
Ну и с остальных боков тоже сделать padding, чтобы было как на макете.

Sign In

Нужна помощь в верстке меню-бара

Question

senioz

Link to comment

Share on other sites

1 answer to this question

Recommended Posts

Int

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information