Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.80/5: Рейтинг темы: голосов - 5, средняя оценка - 4.80
Victorpusaka
14 / 1 / 1
Регистрация: 18.11.2016
Сообщений: 24
#1

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

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

Добрый день! На курсах по frontend получил задание сверстать макет с вот таким как на скрине меню. Понимаю, что это не самое сложное задание, но для новичка вроде меня кажется не простым. Подскажите хотя бы с какой стороны начинать верстку.

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь.

0
Миниатюры
Подскажите как сверстать меню как на скриншоте  
Лучшие ответы (1)
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
18.11.2016, 14:11
Ответы с готовыми решениями:

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

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

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

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

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

4
magirus
Почетный модератор
Эксперт по компьютерным сетямЭксперт Windows
27947 / 15666 / 959
Регистрация: 15.09.2009
Сообщений: 67,839
Записей в блоге: 78
18.11.2016, 14:12 #2
кнопка со скрепкой - загрузить изображение на форум.
1
Fedor92
Человек из 90-х
Эксперт HTML/CSS
2598 / 2244 / 1011
Регистрация: 15.12.2012
Сообщений: 8,261
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
Victorpusaka
14 / 1 / 1
Регистрация: 18.11.2016
Сообщений: 24
21.11.2016, 18:11  [ТС] #5
Цитата Сообщение от s_ Посмотреть сообщение
надо учится хорошо а то время/деньги на ветер уйдет, просто скопировав код вы не решите проблему изучайте CSS свойств и значение
Большое спасибо! Я стараюсь, просто на курсах реально КМБ. С места в карьер, не всегда все успеваю выучить и во всем разобраться. Спасибо еще раз за Вашу помощь! Я проанализировал Ваш код и не один раз, на выходных занимался исключительно версткой блоков <header> с меню. Так что время зря не терял. Сейчас для того чтобы закрепить знания и разобраться в чем-то новом использую: Большая книга СSS — Дэвид Макфарланд.
0
21.11.2016, 18:11
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
21.11.2016, 18:11

Подскажите как сверстать данный элемент
Тут есть тени, градиент, закругленные углы, и выпуклая верхняя часть. С...

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

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


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

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru