Так как многим верстка для битвы представляется чем-то сложным и непонятным, я хочу показать, что на самом деле html-верстка — это просто и совсем не страшно.
Для начала, давайте посмотрим как должна выглядеть минимальная выкладка, чтобы отвечать всем
техническим требованиям на примере работ для Визуала.
- Вся выкладка должна быть закрыта катом-заглушкой. Нам нужно подготовить картинку, которая будет обложкой
нашей книги для всех наших работ. На картинке должно фигурировать название команды и название текущего раунда, чтобы зритель знал, что ему предстоит увидеть. Вставляем url картинки в тэг MORE, чтобы по клику на нее, открылась вся выкладка:
- Для каждой работы нужно заполнить шапку по форме. Копируем код из этого поста: bjdcombat2016.diary.ru/p209212554.htm и заполняем все необходимые поля.
- Добавляем непосредственно саму работу. Все изображения, кроме первого, должны быть убраны под кат.
Вот такой незамысловатый код у нас должен получится в итоге:
А вот так всё это будет выглядеть:
Название*:Мои куклы на прогулке
Автор*: BJD_Combat Random_2016
Форма*:фотосессия
Куклы\Персонажи*: Вася (Random Mold 1), Маша (Random Mold 2)
Категория*: м+ж (гет)
Жанр*: романтика
Рейтинг*: PG-13
Размер*: 2 изображения
читать дальше
Это всё! Больше для оформления выкладки ничего не требуется, остальное — необязательные рюшечки.
Если вы всё же зачем-то хотите добавить рюшечек, то читайте дальше.
Речь пойдет о нескольких несложных приемах, которые помогут вам украсить выкладку. Не стоит воспринимать ниже написанное, как учебник по html/css, потому что я расскажу лишь малую часть возможностей (я не ставлю себе цель рассказать вам про все тэги на свете) и не буду рассказывать теорию. Для реализации большинства описанных эффектов существует не один способ, но, конечно, мне проще показать те способы, которые мне привычней. Если вы что-то делаете иначе — ваше право. Поехали!
Большинство украшений реализуется через так называемые css-свойства, которые мы будем прописывать через стили, используя следующий код:
- Фон.
Установим в качестве фона бесшовный паттерн. Обычно я ищу их на Девианарте по запросу seamless pattern. Очень много картинок можно свободно использовать для некоммерческих проектов. Выбранную картинку нужно обязательно загрузить в свою библиотеку изображений на дайри www.diary.ru/photolib/. Это должна быть библиотека того пользователя, от имени которого будет публиковаться выкладка. Устанавливаем загруженное изображение в качестве фона:
Обратите внимание, что путь до изображения указан относительный, а не абсолютный static.diary.ru/userdir/...
Данный фон размножится по всей площади страницы. Мне больше нравится, когда фон-подложка идет узкой лентой, поэтому я ставлю ; после свойства background и прописываю еще одно свойство width:800px, устанавливая ширину фона. Заодно выровняем контент по центру.
- Шрифт.
В разных сообществах по умолчанию установлены разные шрифты. Чтобы ваша выкладка выглядела так, как вы задумали, и ничего не поехало, я рекомендую сразу выбрать и установить свой шрифт. Размер шрифта - свойство font-size, название - font-family, цвет - color.
Описанные выше свойства логично применить ко всей выкладке. То есть все эти свойства мы запишем в один стиль и закроем этот стиль div style только в самом конце.
- Шапка.
Чтобы шапка нашей работы не потерялась на фоне, оформим её отдельно, поместив в следующий div style.
Пусть она будет на белом фоне background-color: #ffffff;,
вокруг нарисуем сплошную (какие еще бывают можно посмотреть здесь: htmlbook.ru/css/border) рамку шириной 5 пикслей серого цвета border: 5px solid #E0E1E9;,
закруглим углы у получившегося прямоугольника на 15 пикселей: border-radius: 15px;
и установим ширину для всей шапки width:500px;.
Для красоты добавим тень box-shadow: 0 0 20px rgba(0,0,0,0.8);
и небольшую прозрачность opacity: 0.7;.
Текст выровняем по левой стороне align="left".
И чтобы текст не примыкал вплотную к границе рамки добавим отступы в 20 пикселей padding: 20px;. И сложим все это вместе:
- Напоследок вместо скучного моря "читать дальше" будем использовать какую-нибудь милую картинку:
И добавим сверху красивую эмблему нашей команды.
Вот что у нас получилось:
Совсем немного кода, правда?
Мало рюшечек? Ещё больше вы найдете здесь: htmlbook.ru/css. Так же вам могут пригодиться коды html-цветов, их можно посмотреть здесь: ru.wikipedia.org/wiki/%D0%92%D0%B8%D0%BA%D0%B8%...
И помните, что содержание, важнее формы 
