Код?... Это просто!
php js Jquery JsPhp blog
ТЕГИ:
php (100)
js (87)
php date (19)
online (14)
html (14)
js slice (13)
js array (11)
encode (11)
js date (10)
php array (10)
hash (10)
info (7)
dosite (7)
php img (7)
jsphp (6)
Показать еще :

Трехстолбчатый/трехстолбцовый макет сайта

Наиболее часто встречаемый макет сайтов - это "трехстолбчатый" или если хотите "трехстолбцовый макет сайта".

В прошлый раз я рассматривал макет страницы с меньшим количеством столбцов.

Сегодня тоже самое, но добавим третий столбец посередине... с шириной в 60%, а столбцы по бокам будут 20%.

Напоминаю! Что это всего лишь начальная схема построения макета из трех столбцов!

И естественно, что её ещё надо дорабатывать !

Пошагово "трехстолбчатый/трехстолбцовый макет сайта".

  1. трехстолбчатый/трехстолбцовый макет на div.
  2. трехстолбчатый/трехстолбцовый макет с flex.
  3. трехстолбчатый/трехстолбцовый макет сайта на display: table
  4. трехстолбчатый/трехстолбцовый макет сайта на table
  1. Трехстолбчатый/трехстолбцовый макет на div.

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

    <div>

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

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

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

    </div>

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

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

    Добавим стилей и ... пусть столбцы будут шириной 20%, а центральный столбец шириной 60%(100% - (20% х 2) = 60% ) и ещё немного стилей(бордюр для очертания границ столбцов):

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="utf-8">

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

    </head>

    <style>

    * { box-sizing: border-box; }

    body { margin: 0px; }

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

    .column, .center {

    float: left;

    border: 1px solid;

    }

    .column { width: 20%; }

    .center { width: 60%; }

    </style>

    <body>

    <div class="line">

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

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

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

    </div>

    </body>

    </html>

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

    Смотрим на всём экране
  2. Трехстолбчатый/трехстолбцовый макет сайта на flex

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

    Столбцы по краям шириной в 20%.

    А центральный в 60%(100% - (20% х 2) = 60% ).

    Код трехтолбчатого/трехстолбцового макета на flex:

    <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: 20%; }

    .center { flex: 60%; }

    .column, .center {

    padding: 10px;

    border: 1px solid #d6d6d6;

    }

    </style>

    </head>

    <body>

    <div class="row">

    <div class="column">

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

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

    </div>

    <div class="center">

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

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

    </div>

    <div class="column">

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

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

    </div>

    </div>

    </body>

    </html

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

    Смотрим пример трехтолбчатого/трехстолбцового макета на flex:
  3. Трехстолбчатый/трехстолбцовый макет сайта на display: table

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

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="utf-8">

    <title>Пример трехстолбчатый/трехстолбцовый 3(display: table)</title>

    <style>

    * { box-sizing: border-box; }

    body { margin: 0px; }

    .row {

    display: table;

    width: 100%;

    }

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

    .column { width: 20%; }

    .center { width: 60%; }

    .column, .center{

    display: table-cell;

    padding: 10px;

    border: 1px solid #d6d6d6;

    }

    </style>

    </head>

    <body>

    <div class="row">

    <div class="column">

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

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

    </div>

    <div class="center">

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

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

    </div>

    <div class="column">

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

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

    </div>

    </div>

    </body>

    </html>

    Пример трехтолбчатого/трехстолбцового макета на display: table:

    Смотрим пример трехтолбчатого/трехстолбцового макета на display: table:
  4. Трехстолбчатый/трехстолбцовый макет сайта на table

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

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

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="utf-8">

    <title>Пример трехстолбчатый/трехстолбцовый 4(table)</title>

    <style>

    body { margin: 0px; }

    .row { width: 100%; }

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

    .column, .center {

    padding: 10px;

    border: 1px solid #d6d6d6;

    vertical-align: top;

    }

    .column { width: 20%; }

    .center { width: 60%; }

    </style>

    </head>

    <body>

    <table class="row">

    <tr>

    <td class="column">

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

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

    </td>

    <td class="center">

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

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

    </td>

    <td class="column">

    <h2>Столбец 3</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.006597 секунд.