Как сделать — Разделенный/разделить экран
Узнайте, как создать Разделенный/разделить экран (50/50) с помощью CSS.
Создание разделенного экрана
Шаг 1) добавить HTML:
Пример
Шаг 2) добавить CSS:
Пример
/* Split the screen in half */
.split <
height: 100%;
width: 50%;
position: fixed;
z-index: 1;
top: 0;
overflow-x: hidden;
padding-top: 20px;
>
/* Control the left side */
.left <
left: 0;
background-color: #111;
>
/* Control the right side */
.right <
right: 0;
background-color: red;
>
/* If you want the content centered horizontally and vertically */
.centered <
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
>
/* Style the image inside the centered container, if needed */
.centered img <
width: 150px;
border-radius: 50%;
>
Как поделить одну страничку на два блока?
Здравствуйте, мне нужно в html документе прописать чудо код, чтоб сделалось 2 блока (1 — Контент, 2 — Правая панель).
Нужно сделать, чтоб было как на картинке:
Кто то использует float . Конечно, это тоже вариант, а что если необходимо будет переставить контентный блог на место правого, что тогда лезть в код и перебивать float’ы. Есть вариант который я использую.
теперь отрегулируем все в CSS
И так два блока мы создали. Теперь же к чему все это. Допустим, нам необходимо поменять местами левую и правую часть, просто идем в html копируем весь блок [content] и со всем содержимым внутри его и просто вставляем ниже блока [sidebar] и все. т.е должно получиться так. (И заметьте мы даже стили не трогали)
Фреймы в html
Окно браузера может быть разделено на фреймы, т.е. на области расположенные рядом друг с другом. В каждую из этих областей можно загружать свои html-страницы. На примере будет понятнее, создайте новый файл с названием index.html со следующим кодом:
В окне браузера это будет выглядеть так:
Окно браузера разделено на 3 части. Надо сказать, что это единственный случай, когда в html-документе отсутствуют теги <body></body>. Вместо них используются теги <frameset></frameset>, которые и указывают браузеру разбить окно на несколько областей — фреймов.
Сколько будет таких областей и как они будут расположены зависит от двух параметров тега <frameset></frameset>:
-
rows — указывает разбить окно на горизонтальные области. Причем, сколько значений у этого параметра, столько и областей. В нашем примере rows=»30%, 10%, 60%» , т.е. три горизонтальные области: ширина первой — 30% от ширины экрана, ширина второй — 10%, а третьей — 60%.
Внутри тегов <frameset></frameset> располагаются одиночные теги <frame>, причем их должно быть столько, сколько задано областей. Без параметров эти теги бесполезны.
Мы рассмотрим параметры тега <frame> на примерах.
-
src — самый главный параметр, он определяет адрес той html-страницы или картинки, которая будет загружаться во фрейм.
Давайте определим этот параметр для наших фреймов в примере. Для этого создайте три обычные html-страницы:
Как разделить страницу на 2 части по вертикали?
Как разделить html страницу на 2-е равных части в процентах по вертикали?
И назначить им разные цвета?
Например верхняя часть красная, а нижняя синяя.
Ссылка на комментарий
Поделиться на других сайтах
2 ответа на этот вопрос
- Сортировать по голосам
- Сортировать по дате
Рекомендованные сообщения
Присоединяйтесь к обсуждению
Вы можете опубликовать сообщение сейчас, а зарегистрироваться позже. Если у вас есть аккаунт, войдите в него для написания от своего имени.
Примечание: вашему сообщению потребуется утверждение модератора, прежде чем оно станет доступным.