Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 18.08.2019, 18:20   #1
Blood_ghosT
Пользователь
 
Регистрация: 29.07.2011
Сообщений: 92
По умолчанию помогите сверстать шапку

всем привет нужна помощь в верстке шапки что то не получается сверстать(

примерно что получилось html
Код:
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
<link rel="stylesheet" href="/css/style.css">
  <title>Just</title>
</head>
<body>
  <header class="header">
    <nav class="main_menu">
      <ul>
        <div class="main_menu-left">
            <li><a href="#">Караганда</a></li>
            <li><a href="#">Контакты</a></li>
            <li><a href="#">Помощь</a></li>
        </div>
        <!-- /.main_menu-left -->
        <div class="main_menu-center">
            <input type="text" placeholder='Услуги и салоны'>
        </div>
        <!-- /.main_menu-center -->
        <div class="main_menu-right">
            <li><a href="#">Регистрация</a></li>
            <li><a href="#">Вход</a></li>
        </div>
        <!-- /.main_menu-right -->
        
      </ul>
    </nav>
    <!-- /.main_menu -->
  </header>
  <!-- /.header -->
</body>
</html>
css
Код:
@font-face {
  font-family: 'Rounded Elegance Regular';
  src: url("../fonts/RoundedElegance-Regular.eot");
  src: url("../fonts/RoundedElegance-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/RoundedElegance-Regular.woff") format("woff"), url("../fonts/RoundedElegance-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'COCOMAT Light';
  src: url("../fonts/COCOMAT-Light.eot");
  src: url("../fonts/COCOMAT-Light.eot?#iefix") format("embedded-opentype"), url("../fonts/COCOMAT-Light.woff") format("woff"), url("../fonts/COCOMAT-Light.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'COCOMAT Regular';
  src: url("../fonts/COCOMAT.eot");
  src: url("../fonts/COCOMAT.eot?#iefix") format("embedded-opentype"), url("../fonts/COCOMAT.woff") format("woff"), url("../fonts/COCOMAT.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

* {
  margin: 0;
  padding: 0;
}

body {
  max-width: 1920px;
  font-family: 'Rounded Elegance Regular', sans-serif;
}

header {
  max-width: 1886px;
  margin: 0 auto;
}

.container {
  max-width: 1670px;
  margin: 0 auto;
}

.main_menu {
  height: 72px;
  background: #fff;
}

.main_menu li {
  padding-bottom: 27px;
  padding-top: 27px;
}

.main_menu-center {
  margin-left: 287px;
}

.main_menu-left {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.main_menu-left li:first-child {
  margin-left: 0px;
}

.main_menu-left li {
  margin-left: 80px;
}

.main_menu-right {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-left: 300px;
}

.main_menu-right li:first-child {
  margin-left: 0px;
}

.main_menu-right li {
  padding: 27px 30px;
  border-left: 1px solid #dadada;
  margin-left: 80px;
  margin-right: 50px;
}

.main_menu ul {
  list-style: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 20px;
  font-weight: 400;
}
не получается как в макете( монитор 1366 визуально не вижу( помогите плиз
Изображения
Тип файла: jpg 15-layers.jpg (4.4 Кб, 113 просмотров)
Blood_ghosT вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
помогите сверстать ruslanakhatv Помощь студентам 2 11.02.2017 16:56
Сверстать navbar trilenium HTML и CSS 1 27.01.2015 03:24
Как сверстать такой блок Manonia HTML и CSS 10 19.02.2010 12:57
Сверстать сайт Julian Фриланс 1 02.04.2009 15:20
Помогите сверстать OrangeGirl HTML и CSS 12 20.01.2009 21:36