Добро пожаловать на форум!
Новые сообщения Участники Правила форума Поиск RSS
Статистика Форума
Последние обновленные темы Самые популярные темы Самые активные пользователи Новые участники
Болт (3758)
XemorDio (2727)
Skyline (2698)
Strelok41 (2177)
SpraVkina [16.11.2017]
Renko9719 [15.11.2017]
dhole [11.11.2017]
Yury21071945 [05.11.2017]
кабестан [04.11.2017]
Страница 1 из 11
Форум » Web-раздел » Скрипты uCoz » Таблицы с информацией [CSS]
Таблицы с информацией [CSS]
trem200 Дата: Суббота, 11.02.2017, 16:24 | Сообщение # 1
Группа: Легенды зоны
Сообщений: 177
Награды: 2 Репутация: 51
Статус: Offline


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

Приступаем к установке:

Нужно стили на них поставить в CSS:

Код
.update-nag{ display: inline-block; font-size: 14px; text-align: left; background-color: #fff; height: 100%; width:100%; margin-bottom: 10px; border-radius: 3px;  
} .update-nag > .update-text{ line-height: 19px;  
padding: 6px;  
} .redtable { background-color: rgba(192, 57, 43,0.4); color:#c0392b;  
} .bluetable{ background-color: rgba(52, 152, 219,0.4); color:#3498db; } .greentable{ background-color: rgba(39, 174, 96,0.4); color:#27ae60; } .orangetable{ background-color: rgba(243, 156, 18,0.4); color:#f39c12; } .whitetable{ background-color: rgba(255,255,255,0.4); color:#000; }


Ставим там где вы считаете нужным их появление.

Оранжевая

Код
<div class="update-nag orangetable"> <div class="update-text"><i class="fa fa-lock" aria-hidden="true"></i> Для <b>скачивания</b> материала нужно зарегистрироваться.</div> </div>


Синяя

Код
<div class="update-nag bluetable"> <div class="update-text"><i class="fa fa-table" aria-hidden="true"></i> Информационные таблички от <b>zornet.ru</b> .</div> </div>


Зеленая

Код
<div class="update-nag greentable "> <div class="update-text"><i class="fa fa-font-awesome" aria-hidden="true"></i> С использованием шрифта <b>FontAwesome</b>. </div> </div>


Красная

Код
<div class="update-nag redtable"> <div class="update-text"> <b><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> Важно!</b> При копировании материала нужно указывать источник.</div> </div>


Белая

Код
<div class="update-nag whitetable"> <div class="update-text"> <i class="fa fa-window-restore" aria-hidden="true"></i> Простая белая табличка</div> </div>


PS - перед каждым описанием будет стоять оригинальная кнопка, которую вы сможете сменить, как все сделать, вас ссылка дана в самой статье.

Источник: uon.ucoz.com
XemorDio Дата: Суббота, 11.02.2017, 17:53 | Сообщение # 2
「 Рипер, техник сайта 」
Группа: Модераторы
Сообщений: 2727
Награды: 13 Репутация: 295
Статус: Offline
Суупер, спасибо, красивые!)
57


Я ушёл, ищите здесь vk.com/xemordio
trem200 Дата: Суббота, 11.02.2017, 18:04 | Сообщение # 3
Группа: Легенды зоны
Сообщений: 177
Награды: 2 Репутация: 51
Статус: Offline
Цитата XemorDio ()
Суупер, спасибо, красивые!)


На просторе интернета можно найти множество интересного контента
Форум » Web-раздел » Скрипты uCoz » Таблицы с информацией [CSS]
Страница 1 из 11
Поиск:
02:53
Обновить

Хостинг от uCoz | Design by XemorDio | MODSTALKER © 2009-2017