Страница 1 из 11
Форум про uCoz » Всё для web-мастера » Web мастеру » Как сделать рамку под описание или картинку на сайте
Как сделать рамку под описание или картинку на сайте
Kosten
Дата: Среда, 04.02.2015, 21:20 | Сообщение # 1
Администраторы
Сообщений:12677
Награды: 39


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



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

Для этого нам нудно описание и прописать его в

Код
<fieldset>Здесь ваше описание</fieldset>


И все, больше не чего не надо, вы можете там прописать ключевые слова и поставить H1 - H2 -H2 -H4 - H6


Теперь рамка будет немного по сложней, а точнее сказать, просто со стилями и все. Где главное по цветовой гамме вы можете подогнать под свой дизайн



Здесь нужно, делать все также как на первой квадратной, только уже совершенно другой скрипт и CSS.

Код
<div style="border-radius: 8px;" class="radius"> Здесь пишем, что вам нужно</div>


И небольшой стиль под него:

Код
.radius {
     background: #f0f0f0; /* Цвет фона */
     border: 1px solid black; /* Параметры рамки */
     padding: 15px; /* Поля вокруг текста */
     margin-bottom: 10px; /* Отступ снизу */
    }


Все подробно написано в style wink
Прикрепления: 9359282.jpg(32Kb) · 1041677.jpg(45Kb)


Kosten
Дата: Среда, 04.02.2015, 21:27 | Сообщение # 2
Администраторы
Сообщений:12677
Награды: 39


Но скажу больше, сами рамки можно сделать очень оригинальными. Где реально есть небольшой выбор.



Теперь о самой ссылке, где все подробно написано, не думаю что нужно выдергивать от туда весь материал и ЗДЕСЬ \найдете остальное. Просто, если будет непонятно, то спрашиваем, что знаем то подскажем.
Прикрепления: 1928109.jpg(21Kb)


Kosten
Дата: Четверг, 05.02.2015, 01:48 | Сообщение # 3
Администраторы
Сообщений:12677
Награды: 39


Хочется еще одну рамку представить или можно назвать каркас под описание. Это будет как заголовок или что вы решите написать на модуле. Это без углов, но с оттенками цвета, на темном сайте, вообще шикарно смотрится и подходит под дизайн. А точней вы сами его по цветовой гамме можете сделать, как вам видней.



Ставим там где считаете нужным.

Код
<div class="brd"><center><h1>Скрипты для ucoz</h1>
<p> Увлекаюсь походом по природе, как же спортивной гимнастикой, что связано со спортом и здоровьем. Увлекаюсь созданием сайта, также к нему дизайн. Имею свой сайт На нем и увлекаюсь чем больне нравиться, то есть дизайн сайта. Занимаюсь дизайн сайтов по тематике Сайт для веб-мастеров посвященный конструктору uCoz</p></center></div>


Я прописал h1 так как под заголовок раздела или категорий будет по теме. Но если простое у вас описание, безусловно, лишнее.

Но и сам стиль.

Код
.brd {
     border: 4px double black; /* Параметры границы */
     background: #fc3; /* Цвет фона */
     padding: 10px; /* Поля вокруг текста */
    }
Прикрепления: 7566828.jpg(24Kb)


kredit-oformi
Дата: Понедельник, 23.02.2015, 23:02 | Сообщение # 4
Vip
Сообщений:1953
Награды: 5


smile Спасибо взял на заметку
Kosten
Дата: Вторник, 24.02.2015, 00:07 | Сообщение # 5
Администраторы
Сообщений:12677
Награды: 39


kredit-oformi, скрипт вообще легкий и стили под него идут и под любой дизайн можно настроить. wink

STORM5711
Дата: Суббота, 14.03.2015, 07:23 | Сообщение # 6
Проверенные
Сообщений:61
Награды: 1




Всем привет, раз уже начали разбирать шаблон, решил взять рамку описания. Оригинальная я думаю.

Это там где хотите видеть.

Код
<div class="siteinfo">
<div class="sititle">О сайте</div>
<div class="sicont">Ваш текст<br> Приятного просмотра.</div></div>
<div class="clr"></div></div>


Это стили

Код
/* siteinfo Start */
.siteinfo {margin:10px 0 0 0; padding:0;overflow:hidden;}
.siteinfo .sititle {margin:0;padding:15px 20px;border-top:1px solid #d7d7d7;}
.siteinfo .sititle {font-size:15px;font-family:"calibrii"; font-weight:bold;}    
.siteinfo .sicont {margin:0; padding:20px;overflow:hidden;background:#1c6ea4;}
.siteinfo .sicont {color:#fff;text-shadow:0 1px 0 rgba(0,0,0,0.7);font-size:13px;font-family:"calibrii";}


У меня всё работает, сильно не бейте, если что не так biggrin
Прикрепления: 0486539.jpg(66Kb)


Сообщение отредактировал STORM5711 - Суббота, 14.03.2015, 07:24
Kosten
Дата: Суббота, 14.03.2015, 20:21 | Сообщение # 7
Администраторы
Сообщений:12677
Награды: 39


STORM5711, отличное решение для описание сайта и разделов. Добавить стиль, чтоб закруглить углы. Хотя на браузере Осле это не работает.

Alkapone
Дата: Суббота, 14.03.2015, 21:08 | Сообщение # 8
Vip
Сообщений:263
Награды: 0


Kosten, В ио 11 работает , но опять же как то так wacko biggrin

Форум про uCoz » Всё для web-мастера » Web мастеру » Как сделать рамку под описание или картинку на сайте
Страница 1 из 11
Поиск: