Как сделать данную меню на html и css

@MRXOneX2 · Регистрация: 17.11.2020

Студворк — интернет-сервис помощи студентам

Как сделать данное меню в css
И поместить по середине экрана

@Erdinger · 11.12.2020, 17:44

Цвета сами подберете надеюсь?

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<div class="menu">
  <div>
  </div>
  <div>
  </div>
  <div>
  </div>
  <div>
  </div>
  <div>
  </div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.menu {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  width: 1000px;
}
.menu div {
  background-color: #00f;
  border-right: 2px solid #f00;
  flex-grow: 1;
  height: 50px;
}
.menu div:first-child {
  border-radius: 50px 0 0 0;
}
.menu div:last-child {
  border-radius: 0 0 50px 0;
  border: 0;
}

@MRXOneX2 · 11.12.2020, 18:14 **[ТС]**

А как из этого сделать меню?Чтобы при там был текст и при нажатие открывалась ссылка

@fanatikus · 11.12.2020, 21:45

Сообщение от MRXOneX2

Чтобы при там был текст и при нажатие открывалась ссылка

вставить ссылки в пустые div

HTML5
1
<a href="link">link</a>

@Erdinger · 12.12.2020, 00:23

MRXOneX2, я там не заметил, что у вас еще задача по центру поставить, тогда так:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="container">
<div class="menu">
  <div>
  </div>
  <div>
  </div>
  <div>
  </div>
  <div>
  </div>
  <div>
  </div>
</div>
</div>

и в css добавить

CSS
1
2
3
4
5
6
.container {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  width: 100%;
} /* вообще есть куча вариантов выравнивания по центру, мне нравится такой.*/

@mrtoxas · 12.12.2020, 20:56

Комментарий модератора

Тема почищенна от оффтопа. Призываю присутствующих воздержаться от дальнейшего диалога не по теме!

Новые блоги и статьи Все статьи Все блоги /
Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .	SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .	SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip Сканируйте QR-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .
Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .	Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .	SDL3 для Web (WebAssembly): Сборка библиотек: SDL3, Box2D, FreeType, SDL3_ttf, SDL3_mixer и SDL3_image из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .	SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .

@MRXOneX2 1 / 1 / 0 Регистрация: 17.11.2020 Сообщений: 7

	Как сделать данную меню на html и css 11.12.2020, 17:17. Показов 783. Ответов 5 Метки нет (Все метки) Как сделать данное меню в css И поместить по середине экрана Миниатюры 0

@MRXOneX2 1 / 1 / 0 Регистрация: 17.11.2020 Сообщений: 7
	11.12.2020, 18:14 [ТС]
	А как из этого сделать меню?Чтобы при там был текст и при нажатие открывалась ссылка 0