/ Журнал / Скрипты для uCoz / Стили переключателей страниц для uCoz
1808.

Стили переключателей страниц для uCoz

Скрипты для uCoz, где представлен набор переключателей страниц для uCoz, которые отличаются функциональностью и красотой. Данные CSS переключатели разные и отличаются внешностью и удобством использования.

Переключатель страниц должен удобным для пользователя, а также иметь индивидуальный вид, чтобы привлекать внимание посетителей. Система uCoz, представляет разнообразный вариант создания переключателей. Вы легко можете использовать готовый вариант, ниже представлены скриншоты и CSS коды переключателей.

Данный код необходимо скопировать в начало страницы CSS сайта.

Стили переключателей страниц для uCoz

Код
.catPages1,   
.catPages2,   
.pagesBlock1,   
.pagesBlock2,   
.pagesBlockuz1,   
.pagesBlockuz2 {padding:35px 0px 10px 0px;}   
span.catPages1,   
span.catPages2,   
span.pagesBlock1,   
span.pagesBlock2,   
span.pagesBlockuz1,   
span.pagesBlockuz2 {   
   display: inline-block;   
}   
.catPages1 a,   
.catPages2 a,   
.pagesBlock1 a,   
.pagesBlock2 a,   
.pagesBlockuz1 a,   
.pagesBlockuz2 a,   
.catPages1 b,   
.catPages2 b,   
.pagesBlock1 b,   
.pagesBlock2 b,   
.pagesBlockuz1 b,   
.pagesBlockuz2 b {   
   padding:8px 12px;   
   -webkit-border-radius: 50px;   
   -moz-border-radius: 50px;   
   border-radius: 50px;   
   color:#777;   
   background:#f5f8fa;   
   font-size:11px;   
}   
.catPages1 b,   
.catPages2 b,   
.pagesBlock1 b,   
.pagesBlock2 b,   
.pagesBlockuz1 b,   
.pagesBlockuz2 b {   
   color:#f2f2f2;   
   background:#236999;   
}   
.catPages1 a:hover,   
.catPages2 a:hover,   
.pagesBlock1 a:hover,   
.pagesBlock2 a:hover,   
.pagesBlockuz1 a:hover,   
.pagesBlockuz2 a:hover {   
   color:#000;   
   background:#ecf2f6;   
}   
.swchItemDots {   
   letter-spacing:1px;   
   color:#828e96;   
   font-size:11px;   
}


Стили переключателей страниц для uCoz

Код
.catPages1,   
.catPages2,   
.pagesBlock1,   
.pagesBlock2,   
.pagesBlockuz1,   
.pagesBlockuz2 {padding:35px 0px 10px 0px;}   
span.catPages1,   
span.catPages2,   
span.pagesBlock1,   
span.pagesBlock2,   
span.pagesBlockuz1,   
span.pagesBlockuz2 {   
   display: inline-block;   
}   
.catPages1 a,   
.catPages2 a,   
.pagesBlock1 a,   
.pagesBlock2 a,   
.pagesBlockuz1 a,   
.pagesBlockuz2 a,   
.catPages1 b,   
.catPages2 b,   
.pagesBlock1 b,   
.pagesBlock2 b,   
.pagesBlockuz1 b,   
.pagesBlockuz2 b {   
   padding:6px 12px;   
   -webkit-border-radius: 3px;   
   -moz-border-radius: 3px;   
   border-radius: 3px;   
   color:#7badec;   
   background:#f1f4f9;   
   border:1px solid #d3dceb;   
   font-size:13px;   
}   
.catPages1 b,   
.catPages2 b,   
.pagesBlock1 b,   
.pagesBlock2 b,   
.pagesBlockuz1 b,   
.pagesBlockuz2 b {   
   color:#fff;   
   background:#78aaff;   
   border-color:#337bf4;   
}   
.catPages1 a:hover,   
.catPages2 a:hover,   
.pagesBlock1 a:hover,   
.pagesBlock2 a:hover,   
.pagesBlockuz1 a:hover,   
.pagesBlockuz2 a:hover {   
   color:#2b83ef;   
   background:#ecf2f6;   
   border-color:#2c82ef;   
}   
.swchItemDots {   
   letter-spacing:1px;   
   color:#828e96;   
   font-size:11px;   
}


Стили переключателей страниц для uCoz

Код
.catPages1,  
.catPages2,  
.pagesBlock1,  
.pagesBlock2,  
.pagesBlockuz1,  
.pagesBlockuz2 {padding:35px 0px 0px 0px;border-bottom:1px solid #dedede}  
span.catPages1,  
span.catPages2,  
span.pagesBlock1,  
span.pagesBlock2,  
span.pagesBlockuz1,  
span.pagesBlockuz2 {  
  display: inline-block;  
}  
.catPages1 a,  
.catPages2 a,  
.pagesBlock1 a,  
.pagesBlock2 a,  
.pagesBlockuz1 a,  
.pagesBlockuz2 a,  
.catPages1 b,  
.catPages2 b,  
.pagesBlock1 b,  
.pagesBlock2 b,  
.pagesBlockuz1 b,  
.pagesBlockuz2 b {  
  font-weight:bold;  
  padding:12px 12px;  
  color:#b7bac7;  
  background:none;  
  font-size:11px;  
  position:relative;  
}  
.catPages1 b,  
.catPages2 b,  
.pagesBlock1 b,  
.pagesBlock2 b,  
.pagesBlockuz1 b,  
.pagesBlockuz2 b {  
  color:#000;  
}  

.catPages1 b:after,  
.catPages2 b:after,  
.pagesBlock1 b:after,  
.pagesBlock2 b:after,  
.pagesBlockuz1 b:after,  
.pagesBlockuz2 b:after {  
  content:'';  
  width:100%;  
  height:1px;  
  position:absolute;  
  background:#000;  
  bottom:-1px;  
  left:0px;  
}  

.catPages1 a:hover,  
.catPages2 a:hover,  
.pagesBlock1 a:hover,  
.pagesBlock2 a:hover,  
.pagesBlockuz1 a:hover,  
.pagesBlockuz2 a:hover {  
  color:#000;  
  background:none;  
}  
.swchItemDots {  
  letter-spacing:1px;  
  color:#828e96;  
  font-size:11px;  
}
Поделитесь в социальных сетях

Комментарии 0

avatar
Поиск
Вход на сайт
Статистика
Яндекс.Метрика Анализ сайта kaisar.su
Всего
Пользователей
Гостей
Онлайн всего: 1
Гостей: 1
Пользователей: 0
Наверх