Делаем рамки html для страниц своего сайта!

Здравствуйте, уважаемые друзья и гости блога! Сегодня я вам расскажу и покажу примеры, как можно сделать красивые рамки html для оформления на своем сайте. И Вы конечно же сможете создать свои, уникальные рамки html после того, как прочтете данный материал. Это я вам обещаю!

Так как рамки html являются одним из важных и наиболее популярных моментов в оформлении контента на сайтах, поэтому и очень часто, особенно у блоггеров-новичков возникают вопросы по данной теме.

Вот сейчас мы с вами и разберемся в этом вопросе подробно!

Начнем …

Как самому сделать рамки html?

Все до банальности просто!

По скольку это у нас с вами практическое занятие, то давайте и перейдем сразу к изготовлению рамки html. Рамку можно создать для любого из перечисленных далее html элементов: <p>, <h1>, <img>, <span>, <blockquote>, <marquee> и так далее.

Давайте на пример создадим рамку для тега <p>:

Ваш любой текст

Чтобы у Вас получилась такая же рамка, вам нужен вот этот код:

<p style="border: 3px solid #ffa500; width: 160px; text-align: center;">Ваш любой текст</p>

Теперь давайте сделаем несколько видоизменений нашей рамки. И для этого нам с вами нужно всего лишь изменить одно значение «solid». А изменения будут такими:
«dotted» — точечная рамка

<p style="border: 3px dotted #ffa500; width: 160px; text-align: center;">Ваш любой текст</p>

Ваш любой текст

«dashed» — пунктирная рамка

<p style="border: 3px dashed #ffa500; width: 160px; text-align: center;">Ваш любой текст</p>

Ваш любой текст

«solid» — сплошная рамка

<p style="border: 3px solid #ffa500; width: 160px; text-align: center;">Ваш любой текст</p>

Ваш любой текст

«double» — двойная рамка

<p style="border: 3px double #ffa500; width: 160px; text-align: center;">Ваш любой текст</p>

Ваш любой текст

«ridge» — рельефная рамка

<p style="border: 3px ridge #ffa500; width: 160px; text-align: center;">Ваш любой текст</p>

Ваш любой текст

Ширина нашей рамки задается значением «width», просто измените цифирные значения подобрав их под свои нужды. А значением «padding» можно равнять текст:

<p style="border:3px #ffa500  ridge; width: 160px; padding: 5px 0 5px 15px;" > Ваш любой текст</p>

Ваш любой текст

А если добавить значение «margin», то можно выравнять саму рамку по наружним краям от окружающих ее “предметов”, где первая цифра – отступ сверху, вторая – отступ справа, третья – отступ снизу, четвёртая – отступ слева:

<p style="border:3px #ffa500  ridge; width: 160px; padding: 5px 0 5px 15px; margin:20px 0 0 20px;" > Ваш любой текст</p>

Ваш любой текст

Еще можно создавать более красивые рамки css, но это будет в другом моем материале, который Вы не должны пропустить!

Вот здесь появился материал про рамки css. Смотрите и делайте сами!

Если вам понравился материал пожалуйста сделайте следующее…

1. Поставьте «лайк».

2. Сделайте ретвит.

3. Поделитесь этим постом с друзьями в социальных сетях.

4. И конечно же, оставьте свой комментарий ниже

Спасибо за внимание!

Всегда ваш Валерий Бородин