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