Your IP : 3.15.208.109
<?
require($_SERVER["DOCUMENT_ROOT"]."/bitrix/header.php");
$APPLICATION->SetTitle("Типовая контентная страница");
?>
<p class="intro">Вступительный текст на странице. Отличается от остальных абзацев более крупным размером. Его задача заинтересовать читателя. Если вступительный текст понравится — с большой вероятностью человек станет читать дальше. Он не должен быть слишком большим, иначе есть риск, что его не станут читать целиком.</p>
<p>Это обычный абзац. Их таких будет тут много, чтобы разбавлять заголовки и прочие элементы, которые обычно не идут друг за другом, а сочетаются с абзацами текста. Алиса сидела со старшей сестрой на берегу и маялась: делать ей было совершенно нечего, а сидеть без дела, сами знаете, дело нелегкое; раз-другой она, правда, сунула нос в книгу, которую сестра читала, но там не оказалось ни картинок, ни стишков. «Кому нужны книжки без картинок, — или хоть стишков, не понимаю!» — думала Алиса.</p>
<h2>Заголовок второго уровня</h2>
<p>Уровни заголовков служат не для красоты, а для деления контента. Заголовок первого уровня — используется в качестве главного заголовка страницы и более не используется нигде на странице. Деление контента на смысловые блоки делается сначала с помощью заголовков второго уровня. Эти блоки в свою очередь делятся с помощью заголовков третьего уровня и т. д. Если заголовок кажется вам слишком большим и вам хочется использовать другой — обратитесь к дизайнеру, чтобы он исправил стили страницы, вместо того, чтобы использовать заголовки произвольно.</p>
<h3>Заголовок третьего уровня</h3>
<p>Это обычный абзац. Их таких будет тут много, чтобы разбавлять заголовки и прочие элементы, которые обычно не идут друг за другом, а сочетаются с абзацами текста. Алиса сидела со старшей сестрой на берегу и маялась: делать ей было совершенно нечего, а сидеть без дела, сами знаете, дело нелегкое; раз-другой она, правда, сунула нос в книгу, которую сестра читала, но там не оказалось ни картинок, ни стишков. «Кому нужны книжки без картинок, — или хоть стишков, не понимаю!» — думала Алиса.</p>
<ul>
<li>Это пример небольшого ненумерованного списка</li>
<li>Из нескольких пунктов</li>
<li>Разной длины</li>
<li>Иногда пункты бывают очень длинными. Расстояние между соседними пунктами должно быть больше, чем расстояние между строчками одного длинного пункта. Это правило визуальной иерархии, применимое ко всему оформлению контента вообще.</li>
<li>Вот и список закончился</li>
</ul>
<h4>Заголовок 4-го уровня можно использовать для заглавия списков</h4>
<ol>
<li>Это пример небольшого нумерованного списка</li>
<li>Из нескольких пунктов</li>
<li>Разной длины</li>
<li>Иногда пункты бывают очень длинными. Расстояние между соседними пунктами должно быть больше, чем расстояние между строчками одного длинного пункта. Это правило визуальной иерархии, применимое ко всему оформлению контента вообще.</li>
<li>Вот и список закончился</li>
</ol>
<h2>Картинки, врезки и прочие элементы оформления</h2>
<p>Это обычный абзац. Их таких будет тут много, чтобы разбавлять заголовки и прочие элементы, которые обычно не идут друг за другом, а сочетаются с абзацами текста. Алиса сидела со старшей сестрой на берегу и маялась: делать ей было совершенно нечего, а сидеть без дела, сами знаете, дело нелегкое; раз-другой она, правда, сунула нос в книгу, которую сестра читала, но там не оказалось ни картинок, ни стишков. «Кому нужны книжки без картинок, — или хоть стишков, не понимаю!» — думала Алиса.</p>
<p class="insert">Это врезка. С помощью неё оформляются ключевые мысли и фразы. Или цитаты.</p>
<p>Это обычный абзац. Их таких будет тут много, чтобы разбавлять заголовки и прочие элементы, которые обычно не идут друг за другом, а сочетаются с абзацами текста. Алиса сидела со старшей сестрой на берегу и маялась: делать ей было совершенно нечего, а сидеть без дела, сами знаете, дело нелегкое; раз-другой она, правда, сунула нос в книгу, которую сестра читала, но там не оказалось ни картинок, ни стишков. «Кому нужны книжки без картинок, — или хоть стишков, не понимаю!» — думала Алиса.</p>
<ul class="horizontal">
<li><a href="#">Горизонтальный список</a></li>
<li><a href="#">С короткими пунктами</a></li>
<li><a href="#">Иначе не влезет</a></li>
</ul>
<p><img src="http://placehold.it/200x150" class="image-left">Картинка по левому краю внутри абзаца. Их таких будет тут много, чтобы разбавлять заголовки и прочие элементы, которые обычно не идут друг за другом, а сочетаются с абзацами текста. Алиса сидела со старшей сестрой на берегу и маялась: делать ей было совершенно нечего, а сидеть без дела, сами знаете, дело нелегкое; раз-другой она, правда, сунула нос в книгу, которую сестра читала, но там не оказалось ни картинок, ни стишков. «Кому нужны книжки без картинок, — или хоть стишков, не понимаю!» — думала Алиса.</p>
<p>С горя она начала подумывать (правда, сейчас это тоже было дело не из легких — от жары ее совсем разморило), что, конечно, неплохо бы сплести венок из маргариток, но плохо то, что тогда нужно подниматься и идти собирать эти маргаритки, как вдруг... Как вдруг совсем рядом появился белый кролик с розовыми глазками!</p>
<p>Тут, разумеется, еще не было ничего такого необыкновенного; Алиса-то не так уж удивилась, даже когда услыхала, что Кролик сказал (а сказал он: «Ай-ай-ай! Я опаздываю!»). Кстати, потом, вспоминая обо всем этом, она решила, что все-таки немножко удивиться стоило, но сейчас ей казалось, что все идет как надо.</p><img src="http://placehold.it/200x150" class="image-right">
<p>Но когда Кролик достал из жилетного кармана (да-да, именно!) ЧАСЫ (настоящие!) и, едва взглянув на них, опрометью кинулся бежать, тут Алиса так и подскочила!</p>
<p>С горя она начала подумывать (правда, сейчас это тоже было дело не из легких — от жары ее совсем разморило), что, конечно, неплохо бы сплести венок из маргариток, но плохо то, что тогда нужно подниматься и идти собирать эти маргаритки, как вдруг... Как вдруг совсем рядом появился белый кролик с розовыми глазками!</p>
<p>Тут, разумеется, еще не было ничего такого необыкновенного; Алиса-то не так уж удивилась, даже когда услыхала, что Кролик сказал (а сказал он: «Ай-ай-ай! Я опаздываю!»). Кстати, потом, вспоминая обо всем этом, она решила, что все-таки немножко удивиться стоило, но сейчас ей казалось, что все идет как надо.</p>
<p>Это обычный абзац. Их таких будет тут много, чтобы разбавлять заголовки и прочие элементы, которые обычно не идут друг за другом, а сочетаются с абзацами текста. Алиса сидела со старшей сестрой на берегу и маялась: делать ей было совершенно нечего, а сидеть без дела, сами знаете, дело нелегкое; раз-другой она, правда, сунула нос в книгу, которую сестра читала, но там не оказалось ни картинок, ни стишков. «Кому нужны книжки без картинок, — или хоть стишков, не понимаю!» — думала Алиса.</p>
<p class="center"><img src="http://placehold.it/2000x400" class="image-center"></p>
<p>Это обычный абзац. Их таких будет тут много, чтобы разбавлять заголовки и прочие элементы, которые обычно не идут друг за другом, а сочетаются с абзацами текста. Алиса сидела со старшей сестрой на берегу и маялась: делать ей было совершенно нечего, а сидеть без дела, сами знаете, дело нелегкое; раз-другой она, правда, сунула нос в книгу, которую сестра читала, но там не оказалось ни картинок, ни стишков. «Кому нужны книжки без картинок, — или хоть стишков, не понимаю!» — думала Алиса.</p>
<h4 class="center">Пример использования класса «center» и горизонтального списка</h4>
<ul class="horizontal center">
<li><img src="http://placehold.it/200x60"></li>
<li><img src="http://placehold.it/170x65"></li>
<li><img src="http://placehold.it/200x55"></li>
</ul>
<h2>Ну и таблицы</h2>
<h4>Маленькая табличка</h4>
<table cellspacing="0" cellpadding="0" class="table-small">
<tbody>
<tr>
<th>Название</th>
<th>Значение</th>
</tr>
<tr>
<td>Ширина воздухоприёмника</td>
<td>254 мм²</td>
</tr>
<tr>
<td>Скорость ястреба</td>
<td>14 км/ч</td>
</tr>
<tr>
<td>Толщина стебля</td>
<td>Большая</td>
</tr>
</tbody>
</table>
<h4>Большая полосатая таблица</h4>
<table cellspacing="0" cellpadding="0" class="table stripes">
<tbody>
<tr>
<th>КС</th>
<th>Ссылка</th>
<th>Наименование</th>
<th>Изображение</th>
<th>Доп. изображение</th>
<th>Артикул</th>
<th>Бренд</th>
<th>Модель</th>
</tr>
<tr>
<td>1</td>
<td><a href="http://www.lombard-time.ru/t3914/">http://www.lombard-time.ru/t3914/</a></td>
<td>Rolex Oyster Perpetual Date Submariner</td>
<td>img_time/Rolex/К0471/16610.jpg</td>
<td></td>
<td>К0471</td>
<td>Rolex</td>
<td>16610 black</td>
</tr>
<tr>
<td>2</td>
<td><a href="http://www.lombard-time.ru/t6966/">http://www.lombard-time.ru/t6966/</a></td>
<td>Rolex Oyster Perpetual Submariner HULK</td>
<td>img_time/Rolex/К0668/116610LV_green.jpg</td>
<td>img_time/Rolex/К0668/116610LV_green_big.jpg</td>
<td>К0668</td>
<td>Rolex</td>
<td>116610LV</td>
</tr>
<tr>
<td>3</td>
<td><a href="http://www.lombard-time.ru/t4482/">http://www.lombard-time.ru/t4482/</a></td>
<td>Rolex Submariner</td>
<td>img_time/Rolex/К0494/116610LN.jpg</td>
<td>img_time/Rolex/К0494/116610LN_big.jpg</td>
<td>К0494</td>
<td>Rolex</td>
<td>116610LN</td>
</tr>
<tr>
<td>4</td>
<td><a href="http://www.lombard-time.ru/t7078/">http://www.lombard-time.ru/t7078/</a></td>
<td>Rolex Oyster Perpetual Yacht-Master II</td>
<td>img_time/Rolex/К0508/116688.jpg</td>
<td>img_time/Rolex/К0508/116688_big.jpg</td>
<td>К0508</td>
<td>Rolex</td>
<td>116688</td>
</tr>
<tr>
<td>5</td>
<td><a href="http://www.lombard-time.ru/t7072/">http://www.lombard-time.ru/t7072/</a></td>
<td>Rolex Oyster Perpetual Cosmograph Daytona</td>
<td>img_time/Rolex/К0599/116523-black.jpg</td>
<td>img_time/Rolex/К0599/116523-black_big.jpg</td>
<td>К0599</td>
<td>Rolex</td>
<td>116523 Black Dial</td>
</tr>
<tr>
<td>6</td>
<td><a href="http://www.lombard-time.ru/t7073/">http://www.lombard-time.ru/t7073/</a></td>
<td>Rolex Oyster Perpetual Cosmograph Daytona</td>
<td>img_time/Rolex/К0553/116523_grey.jpg</td>
<td></td>
<td>К0553</td>
<td>Rolex</td>
<td>116523 Grey Dial</td>
</tr>
<tr>
<td>7</td>
<td><a href="http://www.lombard-time.ru/t6158/">http://www.lombard-time.ru/t6158/</a></td>
<td>Rolex Oyster Perpetual Cosmograph Daytona</td>
<td>img_time/Rolex/К0510/116505.jpg</td>
<td>img_time/Rolex/К0510/116505_big.jpg</td>
<td>К0510</td>
<td>Rolex</td>
<td>116505</td>
</tr>
</tbody>
</table>
<?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/footer.php");?>