CSS
- 12 ответов
- 0 вопросов
9
Вклад в тег
style, изображения сконвертировать в base64 и заменить в соответствующих атрибутах src и значениях свойств background-*<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>example</title>
<style>
.bg-img{
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==");
background-repeat: no-repeat;
padding-top: 10px;
}
</style>
</head>
<body>
<div>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />
<p>Изображение красной точки в base64 (img src)</p>
</div>
<div class="bg-img">Изображение красной точки в base64 (background-image)</div>
</body>
</html><h1 class="title">
<span class="title__w1">корм</span>
<span class="title__w2">для</span>
<span class="title__w3">домашних</span>
<span class="title__w4">кроликов</span>
</h1>.title {
display: grid;
grid-template-areas:
"w1 w2"
"w1 w3"
"w4 w4";
grid-template-columns: auto 1fr;
&__w1{
grid-area: w1;
font-size: 2.5em;
}
&__w2{
grid-area: w2;
}
&__w3{
grid-area: w3;
}
&__w4{
grid-area: w4;
font-size: 2em;
}
}padding-left: 16px; padding-right: 17px и соответственно следовать пиксель в пиксель - делать некачественную верстку, которая займет больше времени.let itemsStr = "";
list.forEach(function(text, indx) {
if( text.textContent.toUpperCase().includes(query) ) {
itemsStr += '<li>'+text.textContent+'</li>';
}
});
$('#result').append(itemsStr);
Простой
