Latest web development tutorials

Примеры вкладки 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


Попробуйте »

панировочные сухари

Еще одна навигация в качестве сухарях, примеры являются следующие:

Примеры CSS

ul.breadcrumb {
обивка: 8px 16px;
список-стиль: нет;
цвет фона: #eee;
}

ul.breadcrumb Li {дисплей: встроенный;}

ul.breadcrumb Li + Li: перед тем {
обивка: 8px;
цвет: черный;
Содержание: "/ \ 00A0";
}

Попробуйте »