Код?... Это просто!
php js Jquery JsPhp blog
ТЕГИ:
html (14)

php (101)
js (87)
php date (19)
html (14)
online (14)
js slice (13)
encode (11)
js array (11)
php array (10)
js date (10)
engine (10)
hash (10)
dosite (9)
info (7)
php img (7)
jsphp (6)
Показать еще :

Двустолбчатый макет сайта

Один из следующих шагов в понимании макетов : "двустолбчатый макет сайта". Или "двустолбцовый макет сайта"(если вам так больше нравится). Рассмотрим несколько вариантов макета из двух столбцов, с примерами.

Типичный пример двустолбчатого макета сайта - это "youtube".

Пошагово "двустолбчатый макет сайта".

  1. Двустолбчатый макет на div.
  2. Двустолбчатый макет с flex.
  3. Двустолбчатый макет сайта на display: table
  4. Двустолбчатый макет сайта на table
  1. Двустолбчатый макет на div.

    Первый двустолбчатый макет, который приходит на ум может быть сделан из div.

    <div>

    <div>первый столбец</div>

    <div>второй столбец</div>

    </div>

    Но если мы его вот так поместим на страницу, то естественно, что блоки выстроятся в один столбец и будут находится друг над другом, поскольку они имеют оба значение по умолчанию "display:block".

    первый столбец
    второй столбец
    Поэтому

    Пусть столбцы будут 50% т.е. половина всей ширины и ещё немного стилей(бордюр для очертания границ столбцов):

    <!DOCTYPE html>

    <html>

    <meta name="robots" content="noindex" content="nofollow">

    <head>

    <meta charset="utf-8">

    <title>Пример двустолбчатый 1</title>

    </head>

    <style>

    * { box-sizing: border-box; }

    body { margin: 0px; }

    html, body, .line, .column{ height: 100%; }

    .column {

    border: 1px solid;

    width: 50%;

    float: left;

    }

    </style>

    <body>

    <div class="line">

    <div class="column">первый столбец</div>

    <div class="column">второй столбец</div>

    </div>

    </body>

    </html>

    Пример двустолбчатого дизайна:

    Смотрим на всём экране
  2. Двустолбчатый макет сайта на flex

    Второй вариант двустолбчатого дизайна - использование в стилях flex:

    Код двустолбчатого макета на flex:

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="utf-8">

    <title>Пример двустолбчатый 2(flex)</title>

    <style>

    * { box-sizing: border-box; }

    body { margin: 0px; }

    .row { display: flex; }

    html, body, .row , .column{ height: 100%; }

    .column {

    flex: 50%;

    padding: 10px;

    border: 1px solid #d6d6d6;

    }

    </style>

    </head>

    <body>

    <div class="row">

    <div class="column">

    <h2>Столбец 1</h2>

    <p>Некоторый текст..</p>

    </div>

    <div class="column">

    <h2>Столбец 2</h2>

    <p>Некоторый текст..</p>

    </div>

    </div>

    </body>

    </html>

    Пример двустолбчатого макета на flex:

    Смотрим пример двустолбчатого макета на flex:
  3. Двустолбчатый макет сайта на display: table

    Третий вариант двустолбчатого дизайна - использование в стилях display: table:

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="utf-8">

    <title>Пример двустолбчатый 3</title>

    <style>

    body { margin: 0px; }

    .row {

    display: table;

    width: 100%;

    }

    html, body, .row{ height: 100%; }

    .column {

    display: table-cell;

    width: 50%;

    padding: 10px;

    border: 1px solid #d6d6d6;

    }

    </style>

    </head>

    <body>

    <div class="row">

    <div class="column">

    <h2>Столбец 1</h2>

    <p>Некоторый текст..</p>

    </div>

    <div class="column">

    <h2>Столбец 2</h2>

    <p>Некоторый текст..</p>

    </div>

    </div>

    </body>

    </html>

    Пример двустолбчатого макета на display: table:

    Смотрим пример двустолбчатого макета на display: table:
  4. Двустолбчатый макет сайта на table

    Четвертый вариант двустолбчатого дизайна - использование тега table:

    Код двустолбчатого макета на таблицах:

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="utf-8">

    <title>Пример двустолбчатый 4</title>

    <style>

    body { margin: 0px; }

    .row {

    width: 100%;

    }

    html, body, .row { height: 100%; }

    .column {

    padding: 10px;

    border: 1px solid #d6d6d6;

    vertical-align: top;

    }

    </style>

    </head>

    <body>

    <table class="row">

    <tr>

    <td class="column">

    <h2>Столбец 1</h2>

    <p>Некоторый текст..</p>

    </td>

    <td class="column">

    <h2>Столбец 2</h2>

    <p>Некоторый текст..</p>

    </td>

    </tr>

    </table>

    </body>

    </html>

    Пример двустолбчатого макета на таблицах:

    Смотрим пример двустолбчатого макета на таблицах
jsphp.ru есть здесь:
Полезные ссылки:
ruweb
Я писал немного о ruweb.net!
Помочь проекту JsPhp.ru

Что можно сделать!?

Поделиться ссылкой! C друзьями или врагами!


Помочь проекту JSPHP.RU: Помочь проекту JSPHP.RU прокомментировать :

Скоро...


Мои Проекты :

Скоро...



О хостинге :

Скоро...


© jsphp.ru 2023 - 2024 , Аминев Марат. Контакты
Страница загружена за : 0.006566 секунд.