• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Как сделать рамку под описание или картинку на сайте
Как сделать рамку под описание или картинку на сайте
Kosten
Среда, 04 Февраля 2015 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44356
Награды: 70
Иногда сайту требуется рамка под полное или краткое описание ресурса. И тогда мы начинаем искать в интернете скрипт для нее, но все проще, когда ты можешь ее создать сам. Она может быть с углами а также с округлением, я вам предоставлю небольшую информацию и потом дам ссылку на полную.



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

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

Код
<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 (31.9 Kb) · 1041677.jpg (44.7 Kb)
Страна: (RU)
Kosten
Среда, 04 Февраля 2015 | Сообщение 2
Оффлайн
Администраторы
Сообщений:44356
Награды: 70
Но скажу больше, сами рамки можно сделать очень оригинальными. Где реально есть небольшой выбор.



Теперь о самой ссылке, где все подробно написано, не думаю что нужно выдергивать от туда весь материал и ЗДЕСЬ \найдете остальное. Просто, если будет непонятно, то спрашиваем, что знаем то подскажем.
Прикрепления: 1928109.jpg (21.2 Kb)
Страна: (RU)
Kosten
Четверг, 05 Февраля 2015 | Сообщение 3
Оффлайн
Администраторы
Сообщений:44356
Награды: 70
Хочется еще одну рамку представить или можно назвать каркас под описание. Это будет как заголовок или что вы решите написать на модуле. Это без углов, но с оттенками цвета, на темном сайте, вообще шикарно смотрится и подходит под дизайн. А точней вы сами его по цветовой гамме можете сделать, как вам видней.



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

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


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

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

Код
.brd {
     border: 4px double black; /* Параметры границы */
     background: #fc3; /* Цвет фона */
     padding: 10px; /* Поля вокруг текста */
    }
Прикрепления: 7566828.jpg (23.9 Kb)
Страна: (RU)
kredit-oformi
Понедельник, 23 Февраля 2015 | Сообщение 4
Оффлайн
Vip
Сообщений:1975
Награды: 5
smile Спасибо взял на заметку
Страна: (RU)
Kosten
Вторник, 24 Февраля 2015 | Сообщение 5
Оффлайн
Администраторы
Сообщений:44356
Награды: 70
kredit-oformi, скрипт вообще легкий и стили под него идут и под любой дизайн можно настроить. wink
Страна: (RU)
STORM5711
Суббота, 14 Марта 2015 | Сообщение 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 (66.4 Kb)


Сообщение отредактировал
STORM5711 - Суббота, 14 Марта 2015, 07:24
Страна: (RU)
Kosten
Суббота, 14 Марта 2015 | Сообщение 7
Оффлайн
Администраторы
Сообщений:44356
Награды: 70
STORM5711, отличное решение для описание сайта и разделов. Добавить стиль, чтоб закруглить углы. Хотя на браузере Осле это не работает.
Страна: (RU)
Alkapone
Суббота, 14 Марта 2015 | Сообщение 8
Оффлайн
Vip
Сообщений:325
Награды: 5
Kosten, В ио 11 работает , но опять же как то так wacko biggrin

Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Как сделать рамку под описание или картинку на сайте
  • Страница 1 из 1
  • 1
Поиск: