Как сделать заголовок в рамке в HTML?

Пользователь

от kendall_mckenzie , в категории: HTML/CSS , 2 года назад

Как сделать заголовок в рамке в HTML?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от abel , 2 года назад

Заголовок в рамке в  HTML, можно сделать следующим образом:


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<head>
<style>
        .h2{
            border: solid 5px coral;
            text-align: center;
            width: 100px;
            height: 30px;
        }
    </style>
</head>
<body>
    <h2 class="h2">Привет!</h2>
</body>

Пользователь

от violette_robel , год назад

@kendall_mckenzie 

Вы можете использовать элемент fieldset для создания рамки вокруг заголовка в HTML. Для добавления заголовка внутри рамки вы можете использовать элемент legend. Вот пример кода:

1
2
3
4
<fieldset>
  <legend>Заголовок в рамке</legend>
  <p>Содержимое поля ввода здесь</p>
</fieldset>


В результате этого кода вы увидите рамку вокруг содержимого fieldset, с заголовком "Заголовок в рамке" в верхней части рамки. Если вы хотите изменить внешний вид рамки, вы можете добавить стили CSS. Например:

1
2
3
4
5
6
7
8
fieldset {
  border: 1px solid #ccc;
  padding: 10px;
}

legend {
  font-weight: bold;
}


Этот код добавляет серую рамку с толщиной 1 пиксель и отступами 10 пикселей внутри поля fieldset, а также делает текст заголовка жирным шрифтом.