Читайте ниже или посетите оригинал статьи
Привет, друзья, сегодня мы увидим, как сделать это супер интересное приложение-словарь. Демонстрационное видео находится внизу страницы.
Теперь сначала давайте посмотрим на общий метод использования этого проекта. Когда страница загружается, вы можете ввести любое слово, и если оно доступно, всплывет определение. Иногда приходил пример предложения.
Теперь давайте посмотрим исходные коды:
HTML-коды
‹класс div="обертка"›
‹header›Английский словарь‹/header›
‹класс div="поиск"›
‹тип ввода=”текст” заполнитель=”Поиск слова” требуется проверка орфографии=”ложь”›
‹i class="fas fa-search"›‹/i›
‹span class="material-icons"›закрыть‹/span›
‹/дел›
‹p class="info-text"›Введите любое существующее слово и нажмите Enter, чтобы получить значение, пример, синонимы и т. д.‹/p›
<ul>
‹класс=”слово”›
‹класс div="детали"›
<p>__</p>
‹span›_ _‹/span›
‹/дел›
‹i class="fas fa-volume-up"›‹/i›
</li>
‹класс div=”контент”›
‹класс li="значение"›
‹класс div="детали"›
‹p›Значение‹/p›
‹span›___‹/span›
‹/дел›
</li>
‹класс li="пример"›
‹класс div="детали"›
‹p›Пример‹/p›
‹span›___‹/span›
‹/дел›
</li>
‹класс li="синонимы"›
‹класс div="детали"›
‹p›Синонимы‹/p›
‹класс div="список"›‹/div›
‹/дел›
</li>
‹/дел›
</ul>
‹/дел›
CSS-коды
@import URL(‘https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap’);
*{
маржа: 0;
заполнение: 0;
box-sizing: граница-коробка;
семейство шрифтов: «Поппинс», без засечек;
}
тело{
дисплей: гибкий;
выравнивание элементов: по центру;
выравнивание содержимого: по центру;
мин-высота: 100вх;
фон: голубой;
}
::выбор{
цвет: #fff;
фон: голубой;
}
.обертка{
ширина: 420 пикселей;
радиус границы: 7px;
фон: #fff;
отступ: 25px 28px 45px;
box-shadow: 7px 7px 20px rgba (0, 0, 0, 0,05);
}
.заголовок обертки{
размер шрифта: 28px;
вес шрифта: 500;
выравнивание текста: по центру;
}
.обертка .поиск{
положение: родственник;
поля: 35px 0 18px;
}
.поиск ввода{
высота: 53 пикселя;
ширина: 100%;
контур: нет;
размер шрифта: 16px;
радиус границы: 5px;
отступ: 0 42px;
граница: 1px сплошная #999;
}
.поиск ввода:фокус{
отступ: 0 41px;
граница: 2 пикселя сплошной голубой;
}
.search input::placeholder{
цвет: #B8B8B8;
}
.search :где(я, диапазон){
положение: абсолютное;
верх: 50%;
цвет: #999;
трансформировать: перевестиY(-50%);
}
.поиск я {
слева: 18 пикселей;
события-указатели: нет;
размер шрифта: 16px;
}
.search ввод: фокус ~ я {
цвет: голубой;
}
.диапазон поиска{
справа: 15 пикселей;
курсор: указатель;
размер шрифта: 18 пикселей;
дисплей: нет;
}
.search input: действителен ~ span {
дисплей: блок;
}
.wrapper .info-текст{
размер шрифта: 13px;
цвет: #9A9A9A;
поле: -3px 0 -10px;
}
.wrapper.active .info-текст{
дисплей: нет;
}
.info-текстовый диапазон{
вес шрифта: 500;
}
.обертка ул{
высота: 0;
непрозрачность: 0;
отступ справа: 1px;
переполнение-y: скрыто;
переход: все 0,2 с легкости;
}
.wrapper.active ул {
непрозрачность: 1;
высота: 303 пикселя;
}
.обертка уль ли {
дисплей: гибкий;
стиль списка: нет;
нижняя граница: 14px;
выравнивание элементов: по центру;
нижний отступ: 17px;
нижняя граница: 1px сплошная #D9D9D9;
выравнивание содержимого: пробел между;
}
уль ли: последний ребенок {
нижняя граница: 0;
нижняя граница: 0;
заполнение снизу: 0;
}
ул .слово р {
размер шрифта: 22px;
вес шрифта: 500;
}
ul .word span{
размер шрифта: 12px;
цвет: #989898;
}
ул .слово я {
цвет: #999;
размер шрифта: 15px;
курсор: указатель;
}
ул .content{
максимальная высота: 215 пикселей;
переполнение-у: авто;
}
ul .content::-webkit-scrollbar{
ширина: 0 пикселей;
}
.content ли .details{
отступ слева: 10px;
радиус границы: 4px 0 0 4px;
граница слева: 3 пикселя сплошной голубой;
}
.content ли п{
размер шрифта: 17px;
вес шрифта: 500;
}
.content li span{
размер шрифта: 15px;
цвет: #7E7E7E;
}
.content .synonyms .list{
дисплей: гибкий;
flex-wrap: обернуть;
}
.content .synonyms span{
курсор: указатель;
поле справа: 5px;
оформление текста: подчеркивание;
}
"читать далее"
