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

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



style="display:block"
data-ad-client="ca-pub-5465116698024082"
data-ad-slot="5720849456"
data-ad-format="auto">

рамки 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. И конечно же, оставьте свой комментарий ниже 🙂

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

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



style="display:block"
data-ad-client="ca-pub-5465116698024082"
data-ad-slot="7057981850"
data-ad-format="auto">

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

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

шорткоды

Шорткоды для сайта на ВордПресс лучший выбор!

Шорткоды для WordPress — Лучший и бесплатный плагин Shortcodes Ultimate Здравствуйте, уважаемые друзья и гости блога! Все …

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

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

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

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

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