ForumD.ru - Дизайн для форумов, скрипты для форумов, техническая поддержка

Объявление

Поисковой ресурс

Проект от команды FD

Спойлеры

Загадочный Дом «Кузнечик»

Форумные игры, кино, позитивное отношение и душевное общение!
Есть в мире место, где душе тепло...
Заходи, мы будем тебе рады!

Подробнее

Мийрон

Качественный пиар быстро и недорого.
Красивейшие дизайны по низким ценам.
Каталог ролевых игр.

Подробнее

FD Chat - Чат на вашем форуме

Чат на отдельной странице на форуме. Без регистрации, используются форумные аккаунты.
Стоимость: 1500р
Первым 10 покупателям скидка 20%.

Подробнее

Макет для сайта «Fantasy Calalogue»

Детализированный макет «Fantasy catalogue» для тёмного дизайна многостраничного сайта
Стоимость при покупке эксклюзивно: 3600р
В стоимость входит корректировка макета и доработка недостающих страничек под ваш проект.

Подробнее

Поддержать проект

Если у вас есть желание помочь нам сделать наш проект лучше:
Реклама на сайтеПредложения
Стать модераторомОтзывы

Подробнее
Объявление о технических обновлениях в шапке форума.

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.



Подборка html-шаблонов (html, css)

Сообщений 1 страница 10 из 21

1

Здесь мы будем делиться ссылками на сайты с интересными html-шаблонами и собственно, самими шаблонами. Шаблоны, представленные тут абсолютно универсальны для любой платформы.

Для поиска шаблонов на нужную тему воспользуйтесь навигацией:

Кнопки

Блоки/цитаты

Списки

Анкеты

Таблицы

Рамки

Подпись автора

https://forumupload.ru/uploads/0018/1e/e2/2/295990.png
мой графоний
заказать вёрстку

+2

2

Двойная смещённая рамка для фотографии

https://i.imgur.com/JuPabpN.png

КОД

CSS:

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

Ксс-код ставим в Свой стиль, в хтмл-верх в тегах <style> или отдельным файлом:

Код:
<style>
тут коды
<style>
Код:
     <!-- Стиль фоторамок двойная смещённая рамка -->
<link rel="stylesheet" type="text/css" href="https://ссылка на файл с ксс-кодом.css" />
<!-- Конец -->

В постах изображения оборачиваем тэгами:

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

Или используем хтмл-код:

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

© Источник

Подпись автора

"You don't need to be protected,
Because nothing shocks you any more."
© Mesh
https://forumstatic.ru/files/0015/1e/ae/69675.gif https://forumstatic.ru/files/0018/3d/6c/77729.jpg

+2

3

Таблица в объявление "IIIR"

[html]<style>
/* ТАБЛИЦА */
.IIIR {
margin:auto; width:800px; padding:15px 0;
text-align:center; line-height:16px; font-family:Arial;
background:#212121; /* ЦВЕТА */
}
.IIIR a {
text-decoration:none !important;
}
.boxIIIR {
display:inline-block; vertical-align:middle; margin-right:15px;
}
/* НОВОСТНОЙ БЛОК */
.ctxtIIIR {
margin-bottom:5px;
width:365px; height:91px; padding:5px; overflow:hidden;
font-size:10px; text-align:justify; line-height:15.5px;
background:grey; color:white; /* ЦВЕТА */
}
.ctxtIIIR:hover {
overflow-y:auto;
}
.imgIIIR {
position:absolute;
width:165px; height:55px;
}
/* ИКОНКИ */
.pfIIIR {
display:inline-block; vertical-align:bottom;
width:165px; padding:5px 0; overflow:hidden; text-align:left;
background:#E9E9E9; /* ЦВЕТА */
}
.pfIIIR img {
margin-left:5px;
width:35px; height:35px;
}
/* БЛОК АНОНСА */
.eventIIIR {
display:inline-block; vertical-align:bottom; margin-left:5px;
width:205px; height:95px; padding:5px 0; overflow:hidden;
font-size:9px; text-align:justify;
background:lightgrey; color:black; /* ЦВЕТА */
}
.eventIIIR p {
margin:0;
height:75px; padding:0 5px; overflow:hidden;
line-height:15px; font-family:Arial;
}
.eventIIIR p:hover {
overflow-y:auto;
}
/* ССЫЛКА В БЛОКЕ АНОНСА */
.eventIIIR a {
display:block; margin:5px auto 0;
width:195px; height:15px; overflow:hidden;
text-align:center; font-size:9px; text-transform:uppercase; line-height:15px;
background:black; color:white; /* ЦВЕТА */
}
/* БЛОК ССЫЛОК */
.lksIIIR {
width:190px; padding:7px 5px 2px;
text-transform:uppercase; text-align:center; line-height:18px; font-size:12px;
background:grey; /* ЦВЕТА */
}
/* ССЫЛКИ */
.lksIIIR a {
display:inline-block; vertical-align:top; margin-bottom:5px;
width:90px; height:18px; overflow:hidden; font-size:9px;
background:black; color:white !important; /* ЦВЕТА */
}
.lksIIIR a:nth-of-type(odd) {
margin-right:6px;
}
/* БЛОК ИКОНОК */
.partIIIR {
width:186px; height:85px; padding:10px 7px 15px; overflow:hidden; text-align:center;
background:#E9E9E9; /* ЦВЕТА */
}
.partIIIR img {
margin:5px;
width:35px; height:35px;
filter:grayscale(1); -webkit-filter:grayscale(1);
opacity:0.9; transition:all 0.65s ease-in-out; -webkit-transition:all 0.65s ease-in-out;
}
.partIIIR img:hover {
filter:grayscale(0); -webkit-filter:grayscale(0); opacity:1;
}
/* АМС */
#staffIIIR {
display:inline-block; vertical-align:middle; margin-right:-35px;
width:200px; height:200px; border-radius:100%; overflow:hidden;
}
.staffIIIR {
position:relative;
}
/* БЛОК АМС */
.tleSIIIR {
position:absolute; z-index:4; margin-left:50px; margin-top:50px;
width:100px; height:60px; padding-top:40px; border-radius:100px;
text-align:center; text-transform:uppercase; font-size:12px; font-weight:bold;
background:black; color:white; /* ЦВЕТА */
}
.SIIIR {
width:100px; height:100px;
font-size:11px; text-align:center; line-height:17px;
}
/* КОНТЕНТ БЛОКА АМС*/
.SIIIR div {
width:90px; height:75px; padding:25px 5px 0; overflow:hidden; border-radius:100px;
font-size:11px; text-align:center;
opacity:0; transition:all 0.45s ease-in; -webkit-transition:all 0.45s ease-in;
background:#E9E9E9; color:black; /* ЦВЕТА */
}
.SIIIR:hover div {
position:absolute; z-index:5;
opacity:1;
}
/* АДМИНЫ */
.onIIIR {
display:block; padding-top:2px;
font-size:10px; text-transform:uppercase; line-height:normal;
background:lightgreen; color:black; /* ЦВЕТА */
}
/* МОДЕРЫ */
.offIIIR {
display:block; padding-top:2px;
font-size:10px; text-transform:uppercase; line-height:normal;
background:crimson; color:white; /* ЦВЕТА */
}
/* ССЫЛКИ НА ПРОФИЛИ АМС */
.SIIIR a {color:black; /* ЦВЕТА */}

/* ЛЕВЫЙ ВЕРХНИЙ УГОЛ АМС */
.ISIIIR {
position:absolute; border-top-left-radius:100px;
}
.ISIIIR:hover div {
margin-left:50px; margin-top:50px;
}
/* ВЕРХНИЙ ПРАВЫЙ УГОЛ АМС */
.IISIIIR {
position:absolute; margin-left:100px;
border-top-right-radius:100px;
}
.IISIIIR:hover div {
margin-left:-50px; margin-top:50px;
}
/* НИЖНИЙ ЛЕВЫЙ УГОЛ АМС */
.IIISIIIR {
position:absolute; margin-top:100px;
border-bottom-left-radius:100px;
}
.IIISIIIR:hover div {
margin-left:50px; margin-top:-50px;
}
/* НИЖНИЙ ПРАВЫЙ УГОЛ АМС */
.IVSIIIR {
position:absolute; margin-top:100px; margin-left:100px;
border-bottom-right-radius:100px;
}
.IVSIIIR:hover div {
margin-left:-50px; margin-top:-50px;
}</style>
<div class="IIIR"><!-- НОВОСТИ ИЛИ ОПИСАНИЕ / ИКОНКИ / АНОНС --><div class="boxIIIR"><!-- НОВОСТИ ИЛИ ОПИСАНИЕ ФОРУМА --><div class="ctxtIIIR">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet quam vel lectus posuere viverra ac nec elit. Ut elementum ultricies tortor, et varius est facilisis in. Donec nulla tellus, sollicitudin id tellus sed, vestibulum tempus neque. Mauris aliquam commodo velit convallis imperdiet. Quisque laoreet, sem ut tincidunt tempor, est mauris ornare arcu, in tincidunt mauris orci eu purus. Suspendisse vel dolor ante. In sit amet bibendum erat. Quisque non aliquet tellus, sit amet accumsan neque. Donec rhoncus suscipit vestibulum. Mauris et rutrum urna, nec fermentum ligula. Nulla ultricies massa sit amet nulla posuere, quis gravida risus interdum. Cras pulvinar consequat tellus.</div><!-- ИЗОБРАЖЕНИЕ 165*55 --><img class="imgIIIR" src="https://www.aht.li/3208058/16555GREY.png" />
<!-- 4 ИКОНКИ РАЗМЕРОМ 35*35 --><div class="pfIIIR"><!-- I --><a href="..." target="_blank"><img src="https://www.aht.li/3208070/3535BW.png" /></a><!-- II --><a href="..." target="_blank"><img src="https://www.aht.li/3208070/3535BW.png" /></a><!-- III --><a href="..." target="_blank"><img src="https://www.aht.li/3208070/3535BW.png" /></a><!-- IV --><a href="..." target="_blank"><img src="https://www.aht.li/3208070/3535BW.png" /></a></div><!-- БЛОК АНОНСА --><div class="eventIIIR"><!-- ТЕКСТ АНОНСА --><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet quam vel lectus posuere viverra ac nec elit. Ut elementum ultricies tortor, et varius est facilisis in. Donec nulla tellus, sollicitudin id tellus sed, vestibulum tempus neque.</p><!-- LIEN --><a href="..." target="_blank">доп. информация</a></div></div>
<!-- ССЫЛКИ & ИКОНКИ --><div class="boxIIIR"><!-- 8 ССЫЛОК --><div class="lksIIIR"><!--  I --><a href="..." target="_blank">Ссылка</a><!-- II --><a href="..." target="_blank">Ссылка</a><!-- III --><a href="..." target="_blank">Ссылка</a><!-- IV --><a href="..." target="_blank">Ссылка</a><!-- V --><a href="..." target="_blank">Ссылка</a><!-- VI --><a href="..." target="_blank">Ссылка</a><!-- VII --><a href="..." target="_blank">Ссылка</a><!-- VIII --><a href="..." target="_blank">Ссылка</a></div>
<!-- 8 ИКОНОК РАЗМЕРОМ 35*35 - СМЕНА ЦВЕТА ПРИ НАВЕДЕНИИ --><div class="partIIIR"><!-- I --><a href="..." target="_blank"><img src="https://www.aht.li/2994070/3535C.png" /></a><!-- II --><a href="..." target="_blank"><img src="https://www.aht.li/2994070/3535C.png" /></a><!-- III --><a href="..." target="_blank"><img src="https://www.aht.li/2994070/3535C.png" /></a><!-- IV --><a href="..." target="_blank"><img src="https://www.aht.li/2994070/3535C.png" /></a><br/><!-- V --><a href="..." target="_blank"><img src="https://www.aht.li/2994070/3535C.png" /></a><!-- VI --><a href="..." target="_blank"><img src="https://www.aht.li/2994070/3535C.png" /></a><!-- VII --><a href="..." target="_blank"><img src="https://www.aht.li/2994070/3535C.png" /></a><!-- VIII --><a href="..." target="_blank"><img src="https://www.aht.li/2994070/3535C.png" /></a></div></div><!-- АМС - ИЗОБРАЖЕНИЯ 100*100 --><div id="staffIIIR"><div class="staffIIIR"><!-- БЛОК --><div class="tleSIIIR">АМС</div><!-- I - ИЗОБРАЖЕНИЕ --><div class="SIIIR ISIIIR" style="background:url(https://www.aht.li/3208040/100100L.png);"><!-- КОНТЕНТ I --><div>Ник<!-- ОБЯЗАННОСТИ И СТАТУС I --><span class="onIIIR">Админ</span><!-- ССЫЛКА НА ПРОФИЛЬ I --><a href="..." target="_blank">Профиль</a></div></div><!-- II - ИЗОБРАЖЕНИЕ --><div class="SIIIR IISIIIR" style="background:url(https://www.aht.li/3208041/100100LBW.png)"><!-- КОНТЕНТ II --><div>Ник<!-- ОБЯЗАННОСТИ II --><span class="offIIIR">Модер</span><!-- ССЫЛКА НА ПРОФИЛЬ II --><a href="..." target="_blank">Профиль</a></div></div><!-- III - ИЗОБРАЖЕНИЕ --><div class="SIIIR IIISIIIR" style="background:url(https://www.aht.li/3208041/100100LBW.png)"><!-- КОНТЕНТ III --><div>Ник<!-- ОБЯЗАННОСТИ III --><span class="onIIIR">Админ</span><!-- ССЫЛКА НА ПРОФИЛЬ III --><a href="..." target="_blank">Профиль</a></div></div><!-- IV - ИЗОБРАЖЕНИЕ --><div class="SIIIR IVSIIIR" style="background:url(https://www.aht.li/3208040/100100L.png)"><!-- КОНТЕНТ IV --><div>Ник<!-- ОБЯЗАННОСТИ IV --><span class="offIIIR">Модер</span><!-- ССЫЛКА НА ПРОФИЛЬ IV --><a href="..." target="_blank">Профиль</a></div></div></div></div></div>
[/html]

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

© Код взят с CCCRUSH, переведён специально для FD

Подпись автора

"You don't need to be protected,
Because nothing shocks you any more."
© Mesh
https://forumstatic.ru/files/0015/1e/ae/69675.gif https://forumstatic.ru/files/0018/3d/6c/77729.jpg

+2

4

Алфавитный список "BOTTIN AVATARS"

Просьба не убирать копирайт из кода!

[html]<style>
*, ::after, ::before {
box-sizing:content-box; -moz-box-sizing:initial; -webkit-box-sizing:initial;
}
.ABC {
margin:auto; width:460px;
text-align:center; font-family:Arial; line-height:16px;
}
.ABC a {
text-decoration:none !important;
}
.cdtABIC {
display:none;
}
.listABC {
margin:30px auto 0;
width:450px;
}
.LTRS {
display:inline-block; vertical-align:top; margin:0 5px 10px;
width:15px; height:15px; padding:5px; border-radius:100%;
text-align:center; font-size:11px; line-height:15px;
background:grey; color:white;
}
.IIND {
background:#191919; color:white;
}
.LTI div {
border:5px dashed;
border-color:grey;
}
.LTI a {
position:absolute; margin-top:-15px; margin-left:-203px;
width:15px; height:15px; padding:5px; border-radius:100%; font-size:11px;
background:grey; color:white;
}
.LTI p {
padding:0px 10px;
text-align:left; font-size:10px; font-family:Arial;
}
.LTII div {
border:5px solid;
border-color:#191919;
}
.LTII a {
position:absolute; margin-top:-15px; margin-left:185px;
width:15px; height:15px; padding:5px; border-radius:100%; font-size:11px;
background:#191919; color:white;
}
.LTII p {
padding:0px 10px;
text-align:right; font-size:10px; font-family:Arial;
}
</style>
<div class="ABC"><!-- CREDIT : CODAGE PAR SKAEMP, CCCRUSH / ПЕРЕВОД: FORUMD.RU --><a class="cdtABIC" href="http://crushcrushcrush.actifforum.com/" target="_blank"></a>
<!-- БУКВЫ В ОГЛАВЛЕНИИ --><a class="LTRS" href="#A">A</a><a class="LTRS IIND" href="#B">Б</a><a class="LTRS" href="#V">В</a><a class="LTRS IIND" href="#G">Г</a><a class="LTRS" href="#D">Д</a><a class="LTRS IIND" href="#EH">E</a><a class="LTRS" href="#YOR">Ё</a><a class="LTRS IIND" href="#ZH">Ж</a><a class="LTRS" href="#Z">З</a><a class="LTRS IIND" href="#I">И</a><a class="LTRS" href="#J">Й</a><a class="LTRS IIND" href="#K">K</a><a class="LTRS" href="#L">Л</a><br/><a class="LTRS IIND" href="#Μ">Μ</a><a class="LTRS" href="#N">Н</a><a class="LTRS IIND" href="#O">O</a><a class="LTRS" href="#P">П</a><a class="LTRS IIND" href="#R">Р</a><a class="LTRS" href="#S">С</a><a class="LTRS IIND" href="#T">T</a><a class="LTRS" href="#U">У</a><a class="LTRS IIND" href="#F">Ф</a><a class="LTRS" href="#H">Х</a><a class="LTRS IIND" href="#TS">Ц</a><a class="LTRS" href="#CH">Ч</a><a class="LTRS IIND" href="#SH">Ш</a><a class="LTRS" href="#SHCH">Щ</a><a class="LTRS IIND" href="#Y">Ы</a><a class="LTRS" href="#E">Э</a><a class="LTRS IIND" href="#YU">Ю</a><a class="LTRS" href="#YA">Я</a>

<!-- СПИСОК --><div class="listABC"><!-- A --><div class="LTI"><div><a id="A">A</a></div><!-- Список A --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- Б --><div class="LTII"><div><a id="B">Б</a></div><!-- СПИСОК Б --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- В --><div class="LTI"><div><a id="V">В</a></div><!-- СПИСОК В --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- Г --><div class="LTII"><div><a id="G">Г</a></div><!-- СПИСОК Г --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- Д --><div class="LTI"><div><a id="D">Д</a></div><!-- СПИСОК Д --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- Е --><div class="LTII"><div><a id="EH">Е</a></div><!-- СПИСОК Е --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- Ё --><div class="LTI"><div><a id="YOR">Ё</a></div><!-- СПИСОК Ё --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- Ж --><div class="LTII"><div><a id="ZH">Ж</a></div><!-- СПИСОК Ж --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- З --><div class="LTI"><div><a id="Z">З</a></div><!-- СПИСОК З --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- И --><div class="LTII"><div><a id="I">И</a></div><!-- СПИСОК И --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- J --><div class="LTI"><div><a id="J">Й</a></div><!-- СПИСОК К --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- K --><div class="LTII"><div><a id="K">K</a></div><!-- СПИСОК К --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- Л --><div class="LTI"><div><a id="L">Л</a></div><!-- СПИСОК Л --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- Μ --><div class="LTII"><div><a id="Μ">Μ</a></div><!-- СПИСОК М --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- Н --><div class="LTI"><div><a id="N">Н</a></div><!-- СПИСОК Н --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- O --><div class="LTII"><div><a id="O">O</a></div><!-- СПИСОК О --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- П --><div class="LTI"><div><a id="P">П</a></div><!-- СПИСОК П --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- Р --><div class="LTII"><div><a id="R">Р</a></div><!-- СПИСОК Р --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- С --><div class="LTI"><div><a id="S">С</a></div><!-- СПИСОК С --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- T --><div class="LTII"><div><a id="T">T</a></div><!-- СПИСОК T --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- У --><div class="LTI"><div><a id="U">У</a></div><!-- СПИСОК У --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- Ф --><div class="LTII"><div><a id="F">Ф</a></div><!-- СПИСОК Ф --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- Х --><div class="LTI"><div><a id="H">Х</a></div><!-- СПИСОК Х --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- Ц --><div class="LTII"><div><a id="TS">Ц</a></div><!-- СПИСОК Ц --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- Ч --><div class="LTI"><div><a id="CH">Ч</a></div><!-- СПИСОК Ч --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- Ш --><div class="LTII"><div><a id="SH">Ш</a></div><!-- СПИСОК Ш --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- Щ --><div class="LTI"><div><a id="SHCH">Щ</a></div><!-- СПИСОК Щ --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- Ы --><div class="LTII"><div><a id="Y">Ы</a></div><!-- СПИСОК Ы --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- Э --><div class="LTI"><div><a id="E">Э</a></div><!-- СПИСОК Э --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- Ю --><div class="LTII"><div><a id="YU">Ю</a></div><!-- СПИСОК Ю --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- Я --><div class="LTI"><div><a id="YA">Я</a></div><!-- СПИСОК Я --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

</div></div>[/html]

[html]<style>
*, ::after, ::before {
box-sizing:content-box; -moz-box-sizing:initial; -webkit-box-sizing:initial;
}
.ABC {
margin:auto; width:460px;
text-align:center; font-family:Arial; line-height:16px;
}
.ABC a {
text-decoration:none !important;
}
.cdtABIC {
display:none;
}
.listABC {
margin:30px auto 0;
width:450px;
}
.LTRS {
display:inline-block; vertical-align:top; margin:0 5px 10px;
width:15px; height:15px; padding:5px; border-radius:100%;
text-align:center; font-size:11px; line-height:15px;
background:grey; color:white;
}
.IIND {
background:#191919; color:white;
}
.LTI div {
border:5px dashed;
border-color:grey;
}
.LTI a {
position:absolute; margin-top:-15px; margin-left:-203px;
width:15px; height:15px; padding:5px; border-radius:100%; font-size:11px;
background:grey; color:white;
}
.LTI p {
padding:0px 10px;
text-align:left; font-size:10px; font-family:Arial;
}
.LTII div {
border:5px solid;
border-color:#191919;
}
.LTII a {
position:absolute; margin-top:-15px; margin-left:185px;
width:15px; height:15px; padding:5px; border-radius:100%; font-size:11px;
background:#191919; color:white;
}
.LTII p {
padding:0px 10px;
text-align:right; font-size:10px; font-family:Arial;
}
</style>
<div class="ABC"><!-- CREDIT : CODAGE PAR SKAEMP, CCCRUSH / ПЕРЕВОД: FORUMD.RU --><a class="cdtABIC" href="http://crushcrushcrush.actifforum.com/" target="_blank"></a>
<!-- БУКВЫ В ОГЛАВЛЕНИИ --><a class="LTRS" href="#A">A</a><a class="LTRS IIND" href="#B">B</a><a class="LTRS" href="#C">C</a><a class="LTRS IIND" href="#D">D</a><a class="LTRS" href="#E">E</a><a class="LTRS IIND" href="#F">F</a><a class="LTRS" href="#G">G</a><a class="LTRS IIND" href="#H">H</a><a class="LTRS" href="#I">I</a><a class="LTRS IIND" href="#J">J</a><a class="LTRS" href="#K">K</a><a class="LTRS IIND" href="#L">L</a><a class="LTRS" href="#M">M</a><br/><a class="LTRS IIND" href="#N">N</a><a class="LTRS" href="#O">O</a><a class="LTRS IIND" href="#P">P</a><a class="LTRS" href="#Q">Q</a><a class="LTRS IIND" href="#R">R</a><a class="LTRS" href="#S">S</a><a class="LTRS IIND" href="#T">T</a><a class="LTRS" href="#U">U</a><a class="LTRS IIND" href="#V">V</a><a class="LTRS" href="#W">W</a><a class="LTRS IIND" href="#X">X</a><a class="LTRS" href="#Y">Y</a><a class="LTRS IIND" href="#Z">Z</a>

<!-- СПИСОК --><div class="listABC"><!-- A --><div class="LTI"><div><a id="A">A</a></div><!-- Список A --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- B --><div class="LTII"><div><a id="B">B</a></div><!-- СПИСОК B --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- C --><div class="LTI"><div><a id="C">C</a></div><!-- СПИСОК C --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- D --><div class="LTII"><div><a id="D">D</a></div><!-- СПИСОК D --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- E --><div class="LTI"><div><a id="E">E</a></div><!-- СПИСОК E --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- F --><div class="LTII"><div><a id="F">F</a></div><!-- СПИСОК F --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- G --><div class="LTI"><div><a id="G">G</a></div><!-- СПИСОК G --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- H --><div class="LTII"><div><a id="H">H</a></div><!-- СПИСОК H --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- I --><div class="LTI"><div><a id="I">I</a></div><!-- СПИСОК I --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- J --><div class="LTII"><div><a id="J">J</a></div><!-- СПИСОК J --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- K --><div class="LTI"><div><a id="K">K</a></div><!-- СПИСОК K --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- L --><div class="LTII"><div><a id="L">L</a></div><!-- СПИСОК L --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- M --><div class="LTI"><div><a id="M">M</a></div><!-- СПИСОК M --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- N --><div class="LTII"><div><a id="N">N</a></div><!-- СПИСОК N --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- O --><div class="LTI"><div><a id="O">O</a></div><!-- СПИСОК O --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- P --><div class="LTII"><div><a id="P">P</a></div><!-- СПИСОК P --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- Q --><div class="LTI"><div><a id="Q">Q</a></div><!-- СПИСОК Q --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- R --><div class="LTII"><div><a id="R">R</a></div><!-- СПИСОК R --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- S --><div class="LTI"><div><a id="S">S</a></div><!-- СПИСОК S --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- T --><div class="LTII"><div><a id="T">T</a></div><!-- СПИСОК T --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- U --><div class="LTI"><div><a id="U">U</a></div><!-- СПИСОК U --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- V --><div class="LTII"><div><a id="V">V</a></div><!-- СПИСОК V --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- W --><div class="LTI"><div><a id="W">W</a></div><!-- СПИСОК W --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- X --><div class="LTII"><div><a id="X">X</a></div><!-- СПИСОК X --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- Y --><div class="LTI"><div><a id="Y">Y</a></div><!-- СПИСОК Y --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- Z --><div class="LTII"><div><a id="Z">Z</a></div><!-- СПИСОК Z --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div></div></div>[/html]

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

© CODAGE PAR SKAEMP / CCCRUSH
Переведено специально для FD

Внимание! Клик по буквам через html будет работать только если отключить безопасный HTML в постах (Администрирование - Скрипты - HTML в постах - Нет - Сохранить) и установить "небезопасный" html в постах: HTML в постах с допуском по группам

Подпись автора

"You don't need to be protected,
Because nothing shocks you any more."
© Mesh
https://forumstatic.ru/files/0015/1e/ae/69675.gif https://forumstatic.ru/files/0018/3d/6c/77729.jpg

0

5

Ссылка-кнопка

Css-код ссылки-кнопки, которая используется на ФД. Как это выглядит:

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

CSS код
Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

Ксс-код ставим в Свой стиль, в хтмл-верх в тегах <style> или отдельным файлом:

Код:
<style>
тут коды
<style>
Код:
     <!-- Ссылка-кнопка -->
<link rel="stylesheet" type="text/css" href="https://ссылка на файл с ксс-кодом.css" />
<!-- Конец -->

В постах можно применять через бб-коды:

Код:
[block=superlink][url=https://forumd.ru/]Пример ссылки-кнопки[/url][/block]

Или через хтмл:

Код:
<div class="superlink"><a href="https://forumd.ru/" class="superlink a">Пример ссылки-кнопки</a></div>

Таким же образом можно создать сразу несколько кнопок-ссылок, различающихся по форме, цвету, размеру и так далее.

Подпись автора

"You don't need to be protected,
Because nothing shocks you any more."
© Mesh
https://forumstatic.ru/files/0015/1e/ae/69675.gif https://forumstatic.ru/files/0018/3d/6c/77729.jpg

0

6

HTML-ШАБЛОН АНКЕТЫ "SET"

[html]<style>*, ::after, ::before {
box-sizing:content-box; -moz-box-sizing:initial; -webkit-box-sizing:initial;
}

.boxSET {
display:inline-block; vertical-align:top; margin-left:10px;
}

.tIISET {
padding:5px 10px;
text-align:right; font-weight:bold; text-transform:uppercase; font-size:14px; letter-spacing:3px;
}

.SET:hover .cdtSET {
opacity:1;
}

/* АНКЕТА */
.SET {
box-shadow:0px 0px 5px rgba(0,0,0,0.2); background:grey;
border-color:#191919 !important; /* НИЖНЯЯ ПОЛОСА */
}

.SET {
margin:auto; width:545px; padding-top:20px; border-bottom:20px solid;
text-align:center; line-height:normal; font-family:Arial;
}

/* ИМЯ И ФАМИЛИЯ */
.npSET div {
background:#191919; color:white; text-shadow:0px 1px 2px rgba(255,255,255,0.5);
max-width:500px; padding:10px 0 10px 20px;
font-family:Arial; font-size:18px; font-style:italic; text-transform:uppercase; text-align:left; letter-spacing:3px;
}

.npSET {
margin:0 auto -10px; position:relative; z-index:5;
width:545px; text-align:left;
}

/* ИНФОРМАЦИЯ */
.abtSET {
display:inline-block; vertical-align:top;
width:200px; height:320px; overflow:hidden;
}
.abtSET div {
position:absolute;
width:180px; height:300px; padding:10px; overflow-y:auto;
text-align:justify; font-size:11px; font-family:Arial;
opacity:0; transition:all 0.5s ease-in; -webkit-transition:all 0.5s ease-in;
background:rgba(255,255,255,0.9); color:black;
}
.abtSET:hover div {
opacity:1;
}
.abtSET img {
width:200px; min-height:320px;
}

/* НАЗВАНИЕ ПУНТКТОВ "ВНЕШНОСТЬ" и "ХАРАКТЕР" */
.tSET {
margin:auto;
width:75%; padding:5px 0; border-radius:0px 0px 15px 15px;
letter-spacing:3px; text-align:center; text-transform:uppercase; font-size:12px;
background:#191919; color:white;
}

/* ХАРАКТЕР */
.caraSET {
margin-bottom:10px;
width:300px; height:155px; padding:0 5px; border-left:5px solid;
border-color:#191919 !important; box-shadow:inset 0px 0px 5px rgba(0,0,0,0.3);
background:rgba(250,250,250,0.3); color:black;
}
.caraSET p {
margin-top:5px;
height:115px; padding:0 5px 5px; overflow:hidden;
text-align:justify; font-size:11px; font-family:Arial; line-height:15px;
}
.caraSET:hover p {
overflow-y:auto;
}
/* ВНЕШНОСТЬ */
.phyzSET {
width:300px; height:155px; padding:0 5px; border-left:5px solid;
border-color:#191919 !important; box-shadow:inset 0px 0px 5px rgba(0,0,0,0.3);
background:rgba(250,250,250,0.3); color:black;
}
.phyzSET p {
margin-top:5px;
height:115px; padding:0 5px 5px; overflow:hidden;
text-align:justify; font-size:11px; font-family:Arial; line-height:15px;
}
.phyzSET:hover p {
overflow-y:auto;
}
/* НАЗВАНИЕ ПУНКТОВ "БИО" И "ОБ ИГРОКЕ" */
.tIISET {
background:#191919; color:white;
}
/* БИО */
.storySET {
margin:15px auto 0; width:525px;
background:rgba(0,0,0,0.3); color:white;
}
.storySET p {
margin:0; padding:10px;
text-align:justify; font-size:11px; font-family:Arial; line-height:15px;
}

/* ОБ ИГРОКЕ */
.USET {background:rgba(0,0,0,0.3); color:white;
margin:10px auto; width:525px;
}
.USET p {
margin:0; padding:10px;
text-align:justify; font-size:11px; font-family:Arial; line-height:16px;
}
}
/* КОПИРАЙТ. ПЕРЕВОД ОТ forumd.ru */
.cdtSET {
position:absolute; margin-top:3px; width:545px;
font-size:10px; font-family:Arial; text-align:center;
opacity:0 !important; transition:opacity 0.55s ease !important; -webkit-transition:opacity 0.55s ease !important;
}
.cdtSET a {
display:block; margin:auto;
text-decoration:none !important;
color:#CCC !important;
position: absolute;
    margin-top: 3px;
    width: 545px;
    font-size: 10px;
    font-family: Arial;
    text-align: center;
}
.cdtSET a::before {content:'Ʃkaemp はは ™'; }

.SET:hover .cdtSET {opacity:1;}</style>
<!-- ИМЯ И ФАМИЛИЯ --><div class="npSET"><div>Имя Фамилия</div></div><div class="SET"><div class="abtSET">

<!-- КРАТКАЯ ИНФОРМАЦИЯ О ПЕРСОНАЖЕ --><div><center><b>Имя прототипа для персонажа</b></center><br/>

<b>Возраст</b> : ...<br/>

<b>Национальность</b> : ...<br/>

<b>Профессия / род занятий</b> : ...<br/>

<b>Семейный статус</b> : <i>Женат, холост, состоит в отношениях, разведен, вдовец</i><br/>

<b>Коротко о семье:</b> : ...<br/>
<b>Коротко о финансах</b> : ...</div>

<!-- КАРТИНКА 200*320 - АВТОМАТИЧЕСКО СЖАТИЕ --><img src="https://www.aht.li/3138179/200320BW.png" /></div>

<!-- ХАРАКТЕР И ВНЕШНОСТЬ --><div class="boxSET">

<!-- ХАРАКТЕР --><div class="caraSET"><div class="tSET">Характер</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dictum placerat suscipit. Aenean placerat nunc egestas interdum luctus. Proin tincidunt tempus dui id lacinia. Nullam quis interdum ligula. Pellentesque hendrerit feugiat gravida. Duis faucibus elementum elementum. Morbi at nisi vitae urna vulputate eleifend. Praesent id ante ac mi sollicitudin fringilla. Mauris consequat quis libero id lobortis. Proin a libero non lorem porttitor tempus.</p></div>

<!-- ВНЕШНОСТЬ --><div class="phyzSET"><div class="tSET">Внешность</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dictum placerat suscipit. Aenean placerat nunc egestas interdum luctus. Proin tincidunt tempus dui id lacinia. Nullam quis interdum ligula. Pellentesque hendrerit feugiat gravida. Duis faucibus elementum elementum. Morbi at nisi vitae urna vulputate eleifend. Praesent id ante ac mi sollicitudin fringilla. Mauris consequat quis libero id lobortis. Proin a libero non lorem porttitor tempus.</p></div></div>

<!-- БИОГРАФИЯ --><div class="storySET">
<div class="tIISET">БИО</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dictum placerat suscipit. Aenean placerat nunc egestas interdum luctus. Proin tincidunt tempus dui id lacinia. Nullam quis interdum ligula. Pellentesque hendrerit feugiat gravida. Duis faucibus elementum elementum. Morbi at nisi vitae urna vulputate eleifend. Praesent id ante ac mi sollicitudin fringilla. Mauris consequat quis libero id lobortis. Proin a libero non lorem porttitor tempus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dictum placerat suscipit. Aenean placerat nunc egestas interdum luctus. Proin tincidunt tempus dui id lacinia. Nullam quis interdum ligula. Pellentesque hendrerit feugiat gravida. Duis faucibus elementum elementum. Morbi at nisi vitae urna vulputate eleifend. Praesent id ante ac mi sollicitudin fringilla. Mauris consequat quis libero id lobortis. Proin a libero non lorem porttitor tempus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dictum placerat suscipit. Aenean placerat nunc egestas interdum luctus. Proin tincidunt tempus dui id lacinia. Nullam quis interdum ligula. Pellentesque hendrerit feugiat gravida. Duis faucibus elementum elementum. Morbi at nisi vitae urna vulputate eleifend. Praesent id ante ac mi sollicitudin fringilla. Mauris consequat quis libero id lobortis. Proin a libero non lorem porttitor tempus.</p></div>

<!-- ОБ ИГРОКЕ --><div class="USET">
<div class="tIISET">О вас</div>
<p><b>Ник</b> : ...<br/><b>Имя</b> : ...<br/><b>Возраст</b> : ...<br/><b>Комментарий</b> : ...</p></div>

<!-- КОПИРАЙТ (ПРОСЬБА НЕ УБИРАТЬ) --><div class="cdtSET"><a href="https://crushcrushcrush.actifforum.com/" target="_blank"></a></div></div>[/html]

CSS
Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

HTML
Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

© CODAGE PAR SKAEMP / CCCRUSH
Переведено специально для FD

Подпись автора

"You don't need to be protected,
Because nothing shocks you any more."
© Mesh
https://forumstatic.ru/files/0015/1e/ae/69675.gif https://forumstatic.ru/files/0018/3d/6c/77729.jpg

+3

7

Оформление поста 'AZA'

Красивое оформление поста с цветочками. К сожалению, шрифт в заголовке поддерживает только латиницу, но можно заменить его на тот что поддерживает русский.

[html]
<style>
/* ШРИФТ */
@font-face {
  font-family: 'Finger Paint';
  font-style: normal;
  font-weight: 400;
  src: url(//fonts.gstatic.com/s/fingerpaint/v10/0QInMXVJ-o-oRn_7dron8YW-9JzT.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* НАЗВАНИЕ */
.AZA {
margin:auto; width:560px; height:568px;
background:url(//www.aht.li/2910691/RPAZA.png); line-height:16px;
}

/* ЗАГОЛОВОК */
.tleAZA {
position:absolute; margin-top:105px; margin-left:75px;
width:455px; font-family:Finger Paint; font-size:24px; color:white;
transform:rotate(-7deg); -webkit-transform:rotate(-7deg);
}

/* СООБЩЕНИЕ */
.msgAZA {
position:absolute; margin-top:185px; margin-left:120px;
width:380px; height:185px; padding:5px; overflow:hidden;
font-size:12px; text-align:justify; font-family:Arial; color:black;
}

/* СООБЩЕНИЕ ПРИ НАВЕДЕНИИ */
.msgAZA:hover {
overflow:auto;
}

/* ПОДПИСЬ */
.ftAZA {
position:absolute; margin-top:440px; margin-left:260px;
width:250px; font-family:Finger paint; font-size:14px; color:white;
transform:rotate(-18deg); -webkit-transform:rotate(-18deg);
}

/* КОПИРАЙТ */
.cdtAZA {
position:absolute; margin-left:48px; margin-top:250px;
transform:scale(0); -webkit-transform:scale(0); transition:transform ease-in-out 0.55s; -webkit-transition:-webkit-transform ease-in-out 0.55s;
}

/* АНИМАЦИЯ ПРИ НАВЕДЕНИИ НА КОПИРАЙТ И ЗАГОЛОВОК */
.AZA:hover .cdtAZA {
transform:scale(1); -webkit-transform:scale(1);
}

/* КАРТИНКИ И ОФОРМЛЕНИЕ */
.AZAII {
margin:auto; width:560px; line-height:16px; text-align:left;
}
.topAZA {
position:relative; z-index:2; margin-bottom:-100px; margin-left:-10px;
width:570px; height:206px; background:url(https://forumupload.ru/uploads/0007/e3/ … 236189.png); /* Картинка в заголовок */
}
.msgIIAZA {
margin:auto; width:450px; min-height:100px; padding-top:70px; padding-bottom:75px;
background:url(https://forumupload.ru/uploads/0007/e3/ … 330498.png); /*  Фон сообщения */
}
.msgIIAZA p{
position:relative; z-index:3;
margin-left:70px; width:360px;
font-size:12px; text-align:justify; font-family:Arial; color:black;
}
.ftIIAZA {
position:absolute; z-index:3; margin-top:122px; margin-left:260px;
width:250px; font-family:Finger paint; font-size:14px; color:white;
transform:rotate(-18deg); -webkit-transform:rotate(-18deg);
}
.cdtAZAII {
position:absolute; z-index:5; margin-left:43px; margin-top:150px;
transform:scale(0); -webkit-transform:scale(0); transition:transform ease-in-out 0.55s; -webkit-transition:-webkit-transform ease-in-out 0.55s;
}
.AZAII:hover .cdtAZAII {
transform:scale(1); -webkit-transform:scale(1);
}
.btmAZA {
position:relative; z-index:2; margin-top:-155px; margin-left:-5px;
width:555px; height:250px; background:url(https://forumupload.ru/uploads/0007/e3/ … 495731.png); /* Картинка в подпись */
}</style>[/html]

TITLE

https://www.aht.li/2456212/PUF.png

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

Signature

CSS

Ксс-код ставим в Свой стиль, в хтмл-верх в тегах <style>:

Код:
<style>
тут коды
<style>

Или отдельным файлом:

Код:
     <!-- Оформление поста AZA -->
<link rel="stylesheet" type="text/css" href="https://ссылка на файл с ксс-кодом.css" />
<!-- Конец -->
Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

HTML
Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

ББ-КОД
Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

© CODAGE PAR SKAEMP / CCCRUSH
Переведено специально для FD

Подпись автора

"You don't need to be protected,
Because nothing shocks you any more."
© Mesh
https://forumstatic.ru/files/0015/1e/ae/69675.gif https://forumstatic.ru/files/0018/3d/6c/77729.jpg

+2

8

Простая таблица "9 блоков по 3 в ряд"

Простенькая таблица для 9 равных по размеру блоков, сгруппированных по 3 в ряд. Ширина указана в процентах, а значит таблица адаптивная, однако, вы можете указать и фиксированную ширину в пикселях.

Настройки из кода:

  • table width="100%" - ширина таблицы;

  • border="1" - толщина рамки, чтобы границ не было видно, надо поставить 0;

  • tbody align="center" - контент таблицы будет расположен по центру.

Эскиз:

# увеличивается по клику

HTML
Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

Подпись автора

"You don't need to be protected,
Because nothing shocks you any more."
© Mesh
https://forumstatic.ru/files/0015/1e/ae/69675.gif https://forumstatic.ru/files/0018/3d/6c/77729.jpg

0

9

Простая таблица "2 колонки и строки"

Простенькая таблица для 7 блоков с 2 колонками, между которыми расположены строчки.

# увеличивается по клику

Настройки из кода:

  • table width="100%" - ширина таблицы;

  • border="1" - толщина рамки, чтобы границ не было видно, надо поставить 0;

  • tbody align="center" - контент таблицы будет расположен по центру;

  • td rowspan="3" - объединение строк;

  • td colspan="3" - объединение столбцов;

HTML
Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

Подпись автора

"You don't need to be protected,
Because nothing shocks you any more."
© Mesh
https://forumstatic.ru/files/0015/1e/ae/69675.gif https://forumstatic.ru/files/0018/3d/6c/77729.jpg

0

10

Простая таблица "Колонка по центру"

Простенькая таблица для 6 блоков с 2 столбцами строк, между которыми, по центру таблицы, расположена одна колонка.

# увеличивается по клику

Настройки из кода:

  • table width="100%" - ширина таблицы;

  • border="1" - толщина рамки, чтобы границ не было видно, надо поставить 0;

  • tbody align="center" - контент таблицы будет расположен по центру;

  • td rowspan="3" - объединение строк;

  • td colspan="3" - объединение столбцов;

HTML
Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

Подпись автора

"You don't need to be protected,
Because nothing shocks you any more."
© Mesh
https://forumstatic.ru/files/0015/1e/ae/69675.gif https://forumstatic.ru/files/0018/3d/6c/77729.jpg

0