Как сделать отзывчивую графическую рамку для H2 Elements? - PullRequest
Новая
       9

Как сделать отзывчивую графическую рамку для H2 Elements?

0 голосов
/ 04 мая 2018

Во-первых, я прошу прощения, если этот вопрос кажется невероятно тупым для некоторых из более опытных программистов здесь. У меня нет профессионального обучения программированию и очень мало опыта.

Так что в настоящее время я работаю над созданием листа 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 ]

0 голосов
/ 04 мая 2018

Будет лучше, если вы сохраните свой стиль в одном месте. Поскольку у вас явно есть таблица стилей, вы должны просто сохранить ее там. Тем не менее, я смог получить желаемые результаты, поместив в него оба 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;}

Добро пожаловать

(Извините, я пока не знаю, как опубликовать фрагмент)

Надеюсь, это поможет!

0 голосов
/ 04 мая 2018

Вы можете прочитать о flex-box , это очень гибкий способ решения этой задачи.

Смотрите пример скрипки, который я сделал для вас, это может быть то, что вы ищете

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;
}
...