Как разделить экран пополам
Здесь вы узнаете, как разделить экран пополам (50/50) при помощи CSS.
Как разделить экран
Шаг 1) Добавляем HTML:
Юлия Иванова
Какой-то текст.
Федор Петров
Здесь тоже какой-то текст.
Шаг 2) Добавляем CSS:
/* Разделяем экран пополам */ .split < height: 100%; width: 50%; position: fixed; z-index: 1; top: 0; overflow-x: hidden; padding-top: 20px; >/* Контролируем левую половину */ .left < left: 0; background-color: #111; >/* Контролируем правую половину */ .right < right: 0; background-color: red; >/* Если нужно, чтобы контент был выровнен по центру горизонтально и вертикально */ .centered < position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; >/* Стили изображения внутри отцентрированного контейнера */ .centered img
Как разделить html страницу на две части ( меню и рабочая зона)
Например есть меню в левой части , а справа должно открываться рабочая зона того подменю которое выбрано прмер: Меню (с права область где срабатывают ссылки в меню, нажимаю на пункт продажи появляется например таблица с вводом товара) Меню статично а правая часть реагирует на ссылки) Можно ли это сделать без js стандартным способом или все пути к js?
Отслеживать
4,071 1 1 золотой знак 10 10 серебряных знаков 36 36 бронзовых знаков
задан 29 июн 2021 в 7:44
49 7 7 бронзовых знаков
можно, но скорее всего вам это нафиг не надо. 21век, JS работает везде, есть JS фреймворки которые работают быстрее чем сайты с чистым JS . Если хотите мучаться — делайте без JS))
29 июн 2021 в 7:47
да моя цель не фронт, а бек, хотел сделать кошку что бы тренироваться на ней, не углубляясь во фронт
29 июн 2021 в 7:49
JS достаточно прост
29 июн 2021 в 8:01
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
Вот пример, как делать. HTML+CSS.
Работает на псевдоклассах input[type=»radio»] .
label указывает на input , на который фокусировать/переводить событие при нажатии на label . Так можно определять кликабельную область.
input[type=»radio»] скрытый, там не нужны точки. Но благодаря label состояние меняется. У input[type=»radio»] одного меню должно быть одно название, иначе работать не будет. fieldset похоже не обязательный.
При активном input[type=»radio»] становится активным псевдокласс :checked и теперь мы можем например отобразить следущий после input элемент.
Вот и все, в принципе.
А, да. Самы верхний label и input[type=»radio»] отвечает за закрытие блока.
#menu < position: relative; >#menu label < width: 200px; display: block; >input[type="radio"], input[type="radio"]+.faked-area < display: None; >input[type="radio"]:checked+.faked-area