С Новым годом! Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Карта форума Темы раздела Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.50/6: Рейтинг темы: голосов - 6, средняя оценка - 4.50
14 / 1 / 2
Регистрация: 18.11.2016
Сообщений: 113
1

Подскажите как сверстать меню как на скриншоте

18.11.2016, 14:11. Показов 1246. Ответов 4
Метки нет (Все метки)

Author24 — интернет-сервис помощи студентам
Добрый день! На курсах по frontend получил задание сверстать макет с вот таким как на скрине меню. Понимаю, что это не самое сложное задание, но для новичка вроде меня кажется не простым. Подскажите хотя бы с какой стороны начинать верстку.
Миниатюры
Подскажите как сверстать меню как на скриншоте  
0
Лучшие ответы (1)
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
18.11.2016, 14:11
Ответы с готовыми решениями:

Как сверстать меню такое меню?
Здравствуйте. Подскажите пожалуйста, как сверстать меню, как на этом сайте:...

Как сверстать меню?
Решил попрактиковаться в вёрстке. Скачал несложный шаблон, но не могу понять, как реализовать это...

Как сверстать кнопку меню
Можно ли на CSS сверстать кнопку меню?

Подскажите как сверстать таблицу
Ребята, подскажите пожалуйста, как сверстать бордеры в таблице?

4
Почетный модератор
Эксперт по компьютерным сетямЭксперт Windows
28046 / 15779 / 983
Регистрация: 15.09.2009
Сообщений: 67,752
Записей в блоге: 78
18.11.2016, 14:12 2
кнопка со скрепкой - загрузить изображение на форум.
1
Эксперт HTML/CSS
2964 / 2620 / 1068
Регистрация: 15.12.2012
Сообщений: 10,091
Записей в блоге: 11
18.11.2016, 14:15 3
Victorpusaka, посмотрите, как работать в редакторе на форуме в частности пост #2... Для начала по-человечески загрузите картинку, приложите Ваши наработки и вместе посмотрим, что не получается...
0
s_
2 / 2 / 4
Регистрация: 16.11.2016
Сообщений: 7
18.11.2016, 14:59 4
Лучший ответ Сообщение было отмечено Victorpusaka как решение

Решение

Victorpusaka, надо учится хорошо а то время/деньги на ветер уйдет, просто скопировав код вы не решите проблему изучайте CSS свойств и значение ...

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="styles/main.css">
</head>
<body>
    <div class="nav">
        <ul>
            <li><a href="#">главная</a></li>
            <li><a href="#">цель проекта</a></li>
            <li><a href="#">компании</a></li>
        </ul>
    </div>
</body>
</html>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
* {
    margin: 0;
    padding: 0;
}
 
ul {list-style-type: none;}
 
body {
    background-color: #e6ebee;
    margin: 50px 0;
}
 
.nav {
    border-bottom: 1px solid #92979a;
    height: 43px;
}
 
.nav ul {
    float: right;
    margin-right: 80px;
}
 
.nav ul li {
    float: left;
}
 
.nav ul li a {
    border-right: 1px solid #92979a;
    border-top: 1px solid #92979a;
    padding: 15px 30px;
    line-height: 40px;
    text-decoration: none;
    color: #8f9497;
}
 
.nav ul li a:hover {
    border-bottom: 1px solid #e9eef1;
    background: linear-gradient(to bottom, #ffffff, #e9eef1);
    color: #00bdf3;
}
 
.nav ul li:last-child a {
    border-radius: 0 20px 0 0;
}
 
.nav ul li:first-child a {
    border-radius: 20px 0 0 0;
    border-left: 1px solid #92979a;
}
1
14 / 1 / 2
Регистрация: 18.11.2016
Сообщений: 113
21.11.2016, 18:11  [ТС] 5
Цитата Сообщение от s_ Посмотреть сообщение
надо учится хорошо а то время/деньги на ветер уйдет, просто скопировав код вы не решите проблему изучайте CSS свойств и значение
Большое спасибо! Я стараюсь, просто на курсах реально КМБ. С места в карьер, не всегда все успеваю выучить и во всем разобраться. Спасибо еще раз за Вашу помощь! Я проанализировал Ваш код и не один раз, на выходных занимался исключительно версткой блоков <header> с меню. Так что время зря не терял. Сейчас для того чтобы закрепить знания и разобраться в чем-то новом использую: Большая книга СSS — Дэвид Макфарланд.
0
21.11.2016, 18:11
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
21.11.2016, 18:11
Помогаю со студенческими работами здесь

Как правильнее сверстать верхнее меню?
Добрый вечер! Пример странички: http://work.kreine.ru/catalog.php Меню &quot;О нас&quot;, &quot;Продукция&quot; и...

Подскажите, как сверстать такой слайдер
Доброго времени суток. Подскажите, как сверстать такой слайдер ?

Подскажите, как сверстать такой дизайн?
Есть такой дизайн: Ширина фиксированная, в длину должен растягиваться. Пытался сверстать с...

Подскажите, как сверстать выпадающую форму?
Стоит задача сверстать сайт. Все готово, кроме этой формы. Подскажите, как ее сверстать или где...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
Новые блоги и статьи
Книги и учебные ресурсы по C#
InfoMaster 08.01.2025
Базовые учебники и руководства Одной из лучших книг для начинающих является "C# 10 и . NET 6 для начинающих" Эндрю Троелсена и Филиппа Джепикса . Книга последовательно раскрывает основные концепции. . .
Что такое NullReferenceEx­­­ception и как исправить?
InfoMaster 08.01.2025
NullReferenceException - одно из самых распространенных исключений, с которым сталкиваются разработчики на C#. Это исключение возникает при попытке обратиться к членам объекта (методам, свойствам или. . .
Что такое Null Pointer Exception (NPE) и как это исправить?
InfoMaster 08.01.2025
Null Pointer Exception (NPE) - это одно из самых распространенных исключений в Java, которое возникает при попытке использовать ссылку на объект, значение которой равно null. Это исключение относится. . .
Русский язык в консоли C++
InfoMaster 08.01.2025
При разработке программ на C++ одной из частых проблем, с которой сталкиваются русскоязычные программисты, является корректное отображение кириллицы в консольных приложениях. Эта проблема особенно. . .
Telegram бот на C#
InfoMaster 08.01.2025
Разработка ботов для Telegram стала неотъемлемой частью современной экосистемы мессенджеров. C# предоставляет мощный и удобный инструментарий для создания разнообразных ботов, от простых. . .
Использование GraphQL в Go (Golang)
InfoMaster 08.01.2025
Go (Golang) является одним из наиболее популярных языков программирования, используемых для создания высокопроизводительных серверных приложений. Его архитектурные особенности и встроенные. . .
Что лучше использовать при создании класса в Java: сеттеры или конструктор?
Alexander-7 08.01.2025
Вопрос подробнее: На вопрос: «Когда одновременно создаются конструктор и сеттеры в классе – это нормально?» куратор уточнил: «Ваш класс может вообще не иметь сеттеров, а только конструктор и геттеры. . .
Как работать с GraphQL на TypeScript
InfoMaster 08.01.2025
Введение в GraphQL и TypeScript В современной разработке веб-приложений GraphQL стал мощным инструментом для создания гибких и эффективных API. В сочетании с TypeScript, эта технология. . .
Счётчик на базе сумматоров + регистров и генератора сигналов согласования.
Hrethgir 07.01.2025
Создан с целью проверки скорости асинхронной логики: ранее описанного сумматора и предополагаемых fast регистров. Регистры созданы на базе ранее описанного, предполагаемого fast триггера. То-есть. . .
Как перейти с Options API на Composition API в Vue.js
BasicMan 06.01.2025
Почему переход на Composition API актуален В мире современной веб-разработки фреймворк Vue. js продолжает эволюционировать, предлагая разработчикам все более совершенные инструменты для создания. . .
Архитектура современных процессоров
inter-admin 06.01.2025
Процессор (центральный процессор, ЦП) является основным вычислительным устройством компьютера, которое выполняет обработку данных и управляет работой всех остальных компонентов системы. Архитектура. . .
История создания реляционной модели баз данных, правила Кодда
Programming 06.01.2025
Предпосылки создания реляционной модели В конце 1960-х годов компьютерная индустрия столкнулась с серьезными проблемами в области управления данными. Существовавшие на тот момент модели данных -. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2025, CyberForum.ru