Справочник верстальщика

Слайдер

• 
• <ul class="aaccordion"> <li class="ttab_1"> <div> <h2>Вкладка 1</h2> </div> </li> <li class="ttab_2"> <div> <h2>Вкладка 2</h2> </div> </li> <li class="ttab_3"> <div> <h2>Вкладка 3</h2> </div> </li> <li class="ttab_4"> <div> <h2>Вкладка 4</h2> </div> </li> </ul>

• 					
  .aaccordion{width:80%;margin:0 auto;overflow:hidden;list-style:none;}
  .aaccordion li{	float:left;	width:20%;overflow:hidden;height:360px;transition:0.2s;}
  .aaccordion div{padding:10px;}
  .aaccordion:hover li{width:10%;}
  .aaccordion li:hover{width:60%;}
  .ttab_1{ background:red; }
  .ttab_2{ background:orange; }	
  .ttab_3{ background:yellow; }
  .ttab_4{ background:green; }