Форум программистов
 
Контакты: о проблемах с регистрацией, почтой и по другим вопросам пишите сюда - alarforum@yandex.ru, проверяйте папку спам! Обязательно пройдите активизацию e-mail.

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

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


Донат для форума - использовать для поднятия настроения себе и модераторам

А ещё здесь можно купить рекламу за 25 тыс руб в месяц! ) пишите сюда - alarforum@yandex.ru

Ответ
 
Опции темы
Старый 18.08.2019, 19:20   #1
Blood_ghosT
Форумчанин
 
Регистрация: 29.07.2011
Адрес: г. Караганда(Казахстан)
Сообщений: 56
Репутация: 10
По умолчанию помогите сверстать шапку

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

примерно что получилось 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 визуально не вижу( помогите плиз
Миниатюры
Нажмите на изображение для увеличения
Название: 15-layers.jpg
Просмотров: 43
Размер:	4.4 Кб
ID:	97485  
Blood_ghosT вне форума   Ответить с цитированием
Ответ

Опции темы

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход

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


21:24.


Powered by vBulletin® Version 3.8.11
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.