Домой / Сайтостроение / Рамки HTML — Как сделать самому? Узнать прямо сейчас!

Рамки HTML — Как сделать самому? Узнать прямо сейчас!

рамки html
рамки html

Делаем рамки 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. Поставьте «лайк».
  1. Сделайте ретвит.
  1. Поделитесь этим постом с друзьями в социальных сетях.
  1. И конечно же, оставьте свой комментарий ниже 🙂

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

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



Про Валерий Бородин

Проверьте также

создание лендинг

Создание Лендинг Пейдж или лучшие плагины WordPress!

Создание Лендинг Пейдж (Landing Page) какие плагины использовать на WordPress? Узнай сейчас! Здравствуйте, уважаемые друзья …

  • http://dvryaboff.ru Дмитрий

    Полезная информация. Поставил в закладки. Сегодня же сделаю такую рамку.

    • https://pribylwm.ru/ Валерий Бородин

      ОК Дмитрий! Заходите в гости!

Блог Валерия Бородина: LiveInternet число посетителей за сегодня Блог Валерия Бородина: данные за сегодня (Yandex.Metrika) Блог Валерия Бородина: рейтинг МайлРу