Hoe maak je meerdere rijen van Tabs

Plaatsen van tabbladen op uw web-pagina's geeft uw bezoekers een manier om te navigeren door de site die is interessanter dan een lijst met koppelingen op de bovenkant of zijkant van de pagina. Wanneer u een groot aantal koppelingen hebt, kunt u Cascading Style Sheets (CSS) te maken van twee of meer rijen met tabbladen, elke enigszins wordt verschoven ten opzichte van de rij boven rij. De stylesheet kan worden opgenomen in elke pagina op uw site, waardoor het een samenhangende look en feel.

• Open een leeg document in een willekeurige teksteditor. Dit is waar u het opmaakmodel waarin uw tabbladen zal maken.

• Maken van een \"menu\"-id voor elke rij met tabs:
  
  #menu {opvulling links: 20px;}
  #menu2 {opvulling links: 30px;}
  
  De \"padding-left\" eigenschap maakt de offset voor elke rij, zodat ze elkaar niet direct elkaar overlappen.

• Maak een klasse voor de koppelingseigenschappen met de volgende code:
  
  .NAV een
  {
  kleur: #fff
  GAAN
  achtergrond: #996699
  GAAN
  randstijl: groove
  GAAN
  text-decoration: none
  GAAN
  padding: 10px
  GAAN
  }

• De regel maken die wat er gebeurt bepaalt als de muis zich boven de tab met de volgende code:
  
  .NAV een: Beweeg {}
  kleur: #fff
  GAAN
  achtergrond: #999999
  GAAN
  padding: 10px
  GAAN
  }

• De regel voor de niet-geordende lijst maken:
  
  .NAV ul
  {
  padding: 10px
  GAAN
  list-style-type: geen
  GAAN
  }
  
  Elke rij met tabs wordt gemaakt als een aparte ongeordende lijst.

• De regel die definieert elk item in de lijst en plaatst u de items in een horizontale rij maken:
  
  .nav li
  {
  weergeven: blok
  GAAN
  float: left
  GAAN
  marge: 0
  GAAN
  }

• De CSS-document opslaat met de \".css\" bestandsextensie.

• Plaats de volgende code in een HTML-document waar u wilt uw lusjes te verschijnen:
  
  

  
  
  • Tabblad 1
  
  
  • Tabblad 2
  
  
  • Tab 3
  
  
  
  
  
  
  
  
  • Tab 4
  
  
  • Tabblad 5
  
  
  • Tabblad 6