Лучшее руководство по Примеры вкладки CSS в 2024 году. В этом руководстве вы можете изучить
Простые вкладки,Перейдите на вкладку и парения стиль,С помощью вкладки границы,Размер шрифта пейджинга,вкладка Центр,Другие примеры,панировочные сухари,
Примеры вкладки CSS
В этой главе мы представим, как создать экземпляр поискового вызова посредством использования CSS.
Простые вкладки
Если ваш сайт имеет много страниц, вам необходимо использовать вкладку, чтобы сделать навигацию для каждой страницы.
В следующем примере показано, как использовать HTML и CSS для создания страницы:
Примеры CSS
ul.pagination {
Дисплей: встроенный блок;
обивка: 0;
Запас: 0;
}
ul.pagination Li {дисплей: встроенный;}
ul.pagination Ли а {
цвет: черный;
плавать: слева;
обивка: 8px 16px;
текст-отделка: нет;
}
Попробуйте »
Перейдите на вкладку и парения стиль
Если вы нажмете на этой странице, вы можете использовать .active
, чтобы установить текущий стиль страницы, вы можете использовать мышь-над :hover
селекторы изменить стиль:
Примеры CSS
ul.pagination Ли a.active {
цвет фона: # 4CAF50;
цвет: белый;
}
ul.pagination Ли а: зависать: нет ( .active) {фонового цвета: #ddd;}
Попробуйте » Примеры CSS
ul.pagination Ли a.active {
цвет фона: # 4CAF50;
цвет: белый;
}
ul.pagination Ли а: зависать: нет (.active) {фонового цвета: #ddd;}
Попробуйте » Округлые стиль
Вы можете использовать border-radius
свойства для выбранной страницы , чтобы добавить закругленные углы стиль:
Примеры CSS
ul.pagination Ли а {
граница радиуса: 5px;
}
ul.pagination Ли a.active {
граница радиуса: 5px;
}
Попробуйте » эффекты перехода Hover
Мы можем добавить transition
свойство , чтобы переместить курсор на странице , когда вы добавляете эффекты перехода:
Примеры CSS
ul.pagination Ли а {
Переход: цвет фона .3s;
}
Попробуйте »
С помощью вкладки границы
Мы можем использовать border
атрибут для добавления страницы с границей:
Примеры CSS
ul.pagination Ли а {
границы: 1px твердый #ddd; / * Серый * /
}
Попробуйте » Закругленные углы
Совет: В первой и последней страницы постраничной ссылки Ссылка Добавить скругления:
Примеры CSS
.pagination ли: первый ребенок а {
границы верхнего левого радиуса: 5px;
граница-нижний левый-радиус: 5px;
}
.pagination ли: последний ребенок а {
Граница-верхний правый-радиус: 5px;
границы нижнего правого радиуса: 5px;
}
Попробуйте » интервал оповещения по громкой связи
Совет: Вы можете использовать margin
свойство , чтобы добавить пробел непосредственно к каждой странице:
Примеры CSS
ul.pagination Ли а {
Запас :. 0 4px; / * 0 для верхней и нижней Вы можете изменить его * /
}
Попробуйте »
Размер шрифта пейджинга
Мы можем использовать font-size
свойство , чтобы установить размер страницы шрифта:
Примеры CSS
ul.pagination Ли а {
размер шрифта: 22px;
}
Попробуйте »
вкладка Центр
Если вы хотите вкладку центр, вы можете (например, <DIV>) , чтобы добавитьтекст выравнивать на элемент контейнера:стильцентра:
Примеры CSS
div.center {
выравнивания текста: центр;
}
Попробуйте »
Другие примеры
панировочные сухари
Еще одна навигация в качестве сухарях, примеры являются следующие:
Примеры CSS
ul.breadcrumb {
обивка: 8px 16px;
список-стиль: нет;
цвет фона: #eee;
}
ul.breadcrumb Li {дисплей: встроенный;}
ul.breadcrumb Li + Li: перед тем {
обивка: 8px;
цвет: черный;
Содержание: "/ \ 00A0";
}
Попробуйте »