• Новые сообщения
  • Участники
  • Правила форума
  • Поиск
  • RSS
  • Страница 1 из 1
  • 1
Форум » Веб-разработка » HTML + CSS — коды » Делаем информационные блоки
Делаем информационные блоки
workman
 		Пятница, 03 Октября 2014, 16:48 | Сообщение 1
Оффлайн
Проверенные
Сообщений:1716
Награды: 9
« 155 »
Ну так как же нам замутить на странице своего сайта например информационный то блок???
А все просто, особенно для тех кто шарит в стилях и кодах цветов html/

Значит так.
Это ставим в свой css или делаем отдельным файлом.

Код
#ugol{color:#000;background:#5ec2e4;border:1px #219cc5 solid;-moz-border-radius:8px;-webkit-border-radius:8px;-khtml-border-radius:8px;border-radius:8px;box-shadow:1px 1px 1px 1px #999;margin:5px 5px 5px 0;}
.ugol-text{margin:5px 5px 5px 15px;}
.ugol-content{background:#fff;border:1px #219cc5 solid;border-radius:5px;margin:5px 5px 5px 15px;padding:4px;}


Этот код HTML ставим там где вы хотите о чем-то сообщить пользователям или просто поставить новость
Код
<div id="ugol">
<div class="ugol-text"><b>Здесь заголовок блока</b></div>
<div class="ugol-content">Тра-ля-ля</div>
</div>

Выглядеть этот код будет так



Сделал workman
Прикрепления: 7640038.png (4.6 Kb)


Сообщение отредактировал
workman - Пятница, 03 Октября 2014, 17:03
Страна: (RU)
Dimstrik
 		Пятница, 03 Октября 2014, 16:57 | Сообщение 2
Оффлайн
Vip
Сообщений:621
Награды: 6
« 143 »
Молодца на сайте красяво смотрится
Страна: (RU)
workman
 		Пятница, 03 Октября 2014, 17:00 | Сообщение 3
Оффлайн
Проверенные
Сообщений:1716
Награды: 9
« 155 »
Dimstrik, На каком именно? Ссылку дай biggrin
Страна: (RU)
Dimstrik
 		Пятница, 03 Октября 2014, 17:04 | Сообщение 4
Оффлайн
Vip
Сообщений:621
Награды: 6
« 143 »
workman, Не это секрет пока smile
Страна: (RU)
Kosten
 		Пятница, 03 Октября 2014, 20:17 | Сообщение 5
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
« 557 »
Можно под описание сайта смело ставить на главную. Если по дизайну подходит, если нет то поиграйтесь со стилями. cool
Страна: (RU)
workman
 		Пятница, 03 Октября 2014, 20:37 | Сообщение 6
Оффлайн
Проверенные
Сообщений:1716
Награды: 9
« 155 »
Цитата Kosten ()
если нет то поиграйтесь со стилями
Не все могут так сказать играться с стилями. Нодумаю что если кому что-то будет не понятно что и куда будут тут задавать вопросы
Страна: (RU)
Slavik
 		Пятница, 03 Октября 2014, 20:42 | Сообщение 7
Оффлайн
Vip
Сообщений:1767
Награды: 4
« 101 »
Красиво)). Dimstrik что за секреты появились?)))).
Kentos311.uCoz.com - Добро пожаловать в мир читов!
Страна: (RU)
Kosten
 		Пятница, 03 Октября 2014, 20:46 | Сообщение 8
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
« 557 »
Slavik, блог идет со стилями.. где можно изменить цветовую гамму.. на том же хроме не заходя в CSS biggrin
Страна: (RU)
workman
 		Пятница, 03 Октября 2014, 20:54 | Сообщение 9
Оффлайн
Проверенные
Сообщений:1716
Награды: 9
« 155 »
Цитата Kosten ()
где можно изменить цветовую гамму

Ну это только тогда, когда пытаешься его подстроить по себя... А если CSS файл спрятан в скрипте? Не все же поймут что он находится под ним

Пример его же:

Код
var undefined="";
undefined += "#ugol{color:#000;background:#5ec2e4;border:1px #219cc5 solid;-moz-border-radius:8px;-webkit-border-radius:8px;-khtml-border-radius:8px;border-radius:8px;box-shadow:1px 1px 1px 1px #999;margin:5px 5px 5px 0;} ";
undefined += ".ugol-text{margin:5px 5px 5px 15px;} ";
undefined += ".ugol-content{background:#fff;border:1px #219cc5 solid;border-radius:5px;margin:5px 5px 5px 15px;padding:4px;} ";


Если он будет лежать именно так
Код
<script type="text/javascript" src="ссылка"></script>

Сообщение отредактировал
workman - Пятница, 03 Октября 2014, 20:56
Страна: (RU)
FeStemBer
 		Пятница, 29 Апреля 2016, 18:56 | Сообщение 10
Оффлайн
Проверенные
Сообщений:355
Награды: 1
« 13 »
workman, а так вы очень даже не чего блок сделали, явно от других отличается. Так еще саму расцветку ему изменить и в путь.
Страна: (RU)
csretven
 		Суббота, 30 Апреля 2016, 01:29 | Сообщение 11
Оффлайн
Пользователи
Сообщений:54
Награды: 0
« 0 »
Нормально подойдет под описание категорий.
Страна: (RU)
Форум » Веб-разработка » HTML + CSS — коды » Делаем информационные блоки
  • Страница 1 из 1
  • 1
Поиск: