ZorNet.Ru — сайт для вебмастера » HTML и CSS » Создать рамки с помощью Fieldset на сайт

Создать рамки с помощью Fieldset на сайт

Создать рамки с помощью Fieldset на сайт
Здесь вы можете создать стандартные рамки при помощи Fieldset на своем сайте. Вам представлено три разных по своему дизайн рамки. Где вы можете их использовать как в материале, это написание статьи в блог или что то важное подчеркнуть. Но а также само описание, которое можно разместить на главной страницу.

Как уже было сказано, рассмотрим разные по стилистике рамки, где можно будет добавить свой оттенок цвета. Но также, если говорить о первой, то она идет по такому принципу. Все зависит от стилей сайта, если ресурс темный, то она безусловно будет светлой, не говоря о других, где сами задаете.

Первая рамка:

Код
<fieldset><legend>Заголовок рамки</legend> Здесь пишем что вам нужно, как пример, это скрипты для uCoz на сайте ZORNET.RU</fieldset>


Вторая:

Здесь мы можем задать цвет рамки Fieldset, что по border, то отвечает за толщину, можно поставить и закругление углов.

Код
<fieldset style="border:1px #00BFFF solid;"><legend>Содержимое сайта ZORNET.RU</legend></fieldset>


Третье:

Здесь мы уже можем изменить основной стиль рамки, также оттенок цвет, размер, поменять шрифт заголовка и само содержимого рамки.

Код
<fieldset style="border: #1874CD ridge thick;">  
<legend> <b><span style="font-family:Monotype Corsiva;color:#104E8B;font-size:25px">Заголовок</b></span></legend><span style="font-family:Comic Sans MS;color:#8B795E;font-size:14px">Содержимое на интернет ресурсе ZORNET.RU </span></fieldset>


PS - не нужно забывать, что основной вид границы рамок border, вы можете изменять как вам нужно, а также добавлять стили для украшение или оригинальности.
17 Января 2017 Просмотров: 2281 Комментариев: (5)

Поделиться в социальных сетях

Материал разместил

Оставь свой отзыв

Комментарии: 5
Sтранник
Sтранник 17 Января 2017 19:251
0
Второй лучше )
FeStemBer
FeStemBer 17 Января 2017 19:292
0
Просто его можно доработать, как написано, поставить border-radius: 5px; и убрать углы.
Сафрон
Сафрон 17 Января 2017 19:343
0
Кому как, что под светлый и под темный третий вариант подойдет.
Kosten
Kosten 17 Января 2017 22:034
0
Третий заголовок ставил на "Похожие материалы" и нормально смотрелось.
Советник
Советник 18 Января 2017 18:095
0
Под описание на сайте эти рамки не нужны, а вот под оформление пригодятся.
avatar