<div class="container">
<div class="tab">
<label for="tab1">Tab 1</label>
<label for="tab2">Tab 2</label>
<label for="tab3">Tab 3</label>
</div>
<div>
<input type="radio" id="tab1" name="tab" checked>
<div class="tabcontent">
<h3>Content for Tab 1</h3>
</div>
<input type="radio" id="tab2" name="tab">
<div class="tabcontent">
<h3>Content for Tab 2</h3>
</div>
<input type="radio" id="tab3" name="tab">
<div class="tabcontent">
<h3>Content for Tab 3</h3>
</div>
</div>
</div>.container {
width:800px;
margin: 0 auto;
}
.tab {
display:flex;
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
.tab label {
display: block;
float: left;
padding: 14px 16px;
cursor: pointer;
width: 33.3%;
text-align: center;
}
input {
display: none;
}
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
input:checked + .tabcontent {
display: block;
}<div class="container">
<div class="block">
<div class="sub-block">1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi dolor iure unde! Ab error ipsum minima non possimus quia tenetur. Autem eveniet, harum id ipsam labore nostrum sequi similique voluptate!</div>
<div class="sub-block">2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi dolor iure unde! Ab error ipsum minima non possimus quia tenetur. Autem eveniet, harum id ipsam labore nostrum sequi similique voluptate!</div>
</div>
<div class="block">
<div class="sub-block">Блок 3</div>
</div>
</div>.container {
width:800px;
margin:0 auto;
display: flex;
justify-content: space-between;
}
.block {
width: 100%;
border: 1px solid black;
padding: 20px;
box-sizing: border-box;
}
.sub-block {
margin-bottom: 20px;
}
.scroll-container {
width: 300px; /* Ширина вашего контейнера */
height: 200px; /* Высота вашего контейнера */
overflow-x: scroll; /* Добавление горизонтальной прокрутки */
}.scroll-container {
width: 300px; /* Ширина вашего контейнера */
height: 200px; /* Высота вашего контейнера */
overflow-y: scroll; /* Добавление вертикальной прокрутки */
}floatflexboxили gridbody {
display: flex;
margin: 0;
}
aside {
background: #5c8a21fa;
width: 17%;
padding: 2.5%;
height: 100vh;
color: #fff;
border-right: 5px solid #4d4d4d;
}
aside img {
width: 65%;
align-self: center;
margin-bottom: 20px;
}
aside ul {
list-style: none;
padding: 0;
}
aside ul li {
color: #fff;
margin-top: 20px;
transition: all 0.6s ease;
}
aside ul li,
aside ul a {
text-decoration: none;
}
aside ul li:hover,
aside ul a:hover {
color: #eb5959;
text-decoration: none;
transform: scale(1.05);
}
.content {
flex: 1;
background: #a6fa52fa;
padding: 2.5%;
}body {
background: #a6fa52fa;
}
aside {
float: left;
background: #5c8a21fa;
width: 17%;
padding: 2.5%;
height: 100vh;
color: #fff;
border-right: 5px solid #4d4d4d;
}
aside::after {
content: "";
display: table;
clear: both;
}
aside img {
width: 65%;
float: left;
position: relative;
left: -40px;
top: -30px;
}
aside ul {
list-style: none;
}
aside ul li {
color: #fff;
display: block;
margin-top: 20px;
transition: all .6s ease;
}
aside ul li,
aside ul a {
text-decoration: none;
}
aside ul li:hover,
aside ul a:hover {
color: #eb5959;
text-decoration: none;
transform: scale(1.05);
}const add = (a, b) => {
return a + b;
};
const subtract = (a, b) => {
return a - b;
};
module.exports = { add, subtract };const math = require('./math.js');
<select> и <option> с помощью CSS в некоторых аспектах ограничена. Это связано с тем, что рендеринг выпадающего списка и его пунктов (<option>) веб-браузерами в значительной степени зависит от нативного операционной системы интерфейса пользователя (OS UI). В результате многие аспекты этих элементов, такие как ширина выпадающего списка, оформление выпадающего списка, и стилизация пунктов списка, могут оказаться сложными для полного контроля с помощью обычных CSS.
.container {
margin: 0 auto;
max-width: 1200px; /* Измените ширину на максимальную ширину, а не фиксированную */
padding: 0 20px; /* Добавьте небольшие отступы по бокам для контента */
box-sizing: border-box;
}#home_page .section-header .container:nth-child(2) h1 {
font-size: clamp(2rem, 5vw, 9.375rem); /* Замените на ваши значения */
}<div class="container">
<input type="search" placeholder="Поиск товаров" class="search-engine">
<div class="button"></div>
</div>.container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.search-engine{
font-family: Noto;
color: rgba(19,75,92,0.32);
border: 5px solid rgb(92, 195, 255);
border-radius: 20px;
background-color: rgb(234, 245, 255);
width: 300px;
height: 50px;
padding-left: 20px;
padding-right: 20px;
font-size: 15px;
margin-right: 10px;
}
.button{
border: 1px solid rgb(92, 195, 255);
height: 50px;
border-radius: 10px;
background-color: rgb(92, 195, 255);
width: 100px;
}<b> используется для придания тексту полужирного начертания без изменения его семантики. Однако с течением времени рекомендуется использовать более семантически правильные теги для форматирования текста, такие как <strong> для выделения важного текста или <span> с применением CSS для стилизации.<b> предназначен для применения к содержимому внутри других тегов, в том числе к тексту внутри тега <p>. Однако не забывайте, что использование тега <b> не рекомендуется для стилизации текста в документах HTML5, поскольку он не несет никакой семантической нагрузки.<b>:<p>Этот текст <b>полужирный</b>.</p><strong>. Если вам нужно изменить внешний вид текста для целей стилизации, лучше использовать CSS