Как сделать адаптивный графический фрейм для H2 Elements?
Во-первых, я прошу прощения, если этот вопрос покажется невероятно глупым некоторым более опытным программистам. У меня нет профессионального обучения программированию и очень мало опыта.
Итак, в настоящее время я работаю над таблицей CSS на веб-сайте, над которым работаю, и пытаюсь создать графические акценты, которые инкапсулируют первый заголовок h2 на моей первой странице. Я попытался сделать это с помощью html, просто вставив изображение вокруг тега H2, но мне не удалось объединить его с сумасшедшим разрывом строки.
Вот быстрый макет того, что я пытаюсь сделать Вот быстрый макет того, что я пытаюсь сделать
Вот изображение ближайшего результата, который я получил ...
Я добился этого с помощью этого HTML-кода:
<img src = "https://www.bookacookie.com/files/theme/border1.png"
alt = "Decorative Border" style = "text-align:center;" width = "24"
height = "39"><h2 class = "wsite-content-title" style = "text-
align:center;">Welcome</h2><img
src = "https://www.bookacookie.com/files/theme/border2.png"
alt = "Decorative Border" style = "text-align:center;" width = "24" height = "39">
Теперь мне удалось изолировать часть CSS-листа моих веб-сайтов, которая, кажется, контролирует поле, над которым я работаю, и который я перечислю ниже:
}.wsite-content-title, #banner h2, .blog-title, h2#wsite-com-title {
font-size: 1.5em;
font-family: 'Montserrat', Arial, sans-serif;
margin: 0 auto 1em;
font-weight: bold;
color: #000000;
}
Может кто-нибудь указать мне правильный и / или самый простой способ расставить акценты такого типа? Меня как бы интересует процесс, а не только одно исправление, потому что это метод, который, по моему мнению, нужно использовать во многих разных местах.
Спасибо за ваше время!
Ответы 2
Вы можете прочитать о гибкая коробка, это очень гибкий способ решения этой задачи.
Посмотрите пример скрипки, который я сделал для вас, это может быть то, что вы ищете
https://jsfiddle.net/42mjvzL3/
HTML
<div class = "container" style = "background-color: yellow"></div>
<div class = "item" style = "background-color: blue"></div>
<div class = "item" style = "background-color: grey"></div>
<div class = "item" style = "background-color: red"></div>
CSS:
.container {
width: 200px;
height: 100px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
.item{
flex-grow: 1;
}
Лучше, если вы сохраните укладку в одном месте. Поскольку у вас явно есть таблица стилей, вы должны просто сохранить ее там. При этом я смог получить желаемые результаты, разместив как первый img, так и h2, и изменив некоторые другие свойства h2.
Добавьте класс приветствия как к первому img, так и к h2:
<img class = "welcome" src = "https://www.bookacookie.com/files/theme/border1.png"
alt = "Decorative Border" style = "text-align:center;" width = "24" height = "39">
<h2 class = "wsite-content-title welcome" style = "text-
align:center;">Welcome</h2>
Затем в своей таблице стилей добавьте это:
.welcome {float: left;}
И настройте свой существующий класс на это:
.wsite-content-title, #banner h2, .blog-title, h2#wsite-com-title {
font-size: 1.5em;
font-family: 'Montserrat', Arial, sans-serif;
font-weight: bold;
color: #000000;
line-height: 0;
padding: 0 10px;}
(Извините, я еще не знаю, как опубликовать фрагмент)
Надеюсь, это поможет!
Ничего не сделано. Учитывая, что я очень неопытный веб-разработчик, для меня это не такой здравый смысл, как для некоторых других людей здесь. Я обязательно сохраню все это в своей таблице стилей, пока продолжу играть с разными вещами. Большое спасибо за Вашу помощь!
Кстати, я не пытаюсь придирчиво хранить стиль в одном месте, это просто лучшая практика.