Een menu op een webpagina is eigenlijk niets meer dan een lijst met links. De meest toegankelijke type menu bestaat uit tekst, afbeeldingen niet. Bij sommige CSS kan een tekstlink uitzien als een afgeschuinde knop. Hier zijn de stappen om dit te bereiken.
instructies
1 
Begin met een duidelijke oude ongeordende lijst in de HTML van uw webpagina. Geef de lijst met een id.
2 In uw CSS stylesheet moet je een aantal dingen aan de lijst eruit afgeschuinde knoppen te maken. Begin met het stylen van de lijst zelf. Verwijder de kogels en pas de marges en opvulling aan uw ontwerp aan te passen. nav ul {
list-style: none;
margin: 0;
padding: 0;
padding-top: 1em;
}
3 Als u wilt dat de lijst horizontaal weer te geven over de bovenkant van uw webpagina, voeg deze CSS-regel aan de stylesheet:
nav li {
weergave: inline;
}
4 Wijs een aantal CSS-stijlregels voor de kleur, de achtergrondkleur en de grens eigenschappen van de een: koppeling en een: bezocht elementen. De achtergrondkleur en de grens zal een verschijning als een afgeschuind knop te maken uit de tekst link.
Iets zoals dit:
nav a: link #nav a: visited {
color: # 000;
background-color: # D6AE00;
border-top: 1px solid #CCC;
border-right: 1px solid # 666;
border-bottom: 1px solid # 666;
border-left: 1px solid #CCC;
}
5 Ze geven een weergave van de knop wordt ingedrukt wanneer in de hover staat, gewoon de grens kleuren te keren.
Iets zoals dit:
nav een: hover {
border-top: 1px solid # 666;
border-right: 1px solid #CCC;
border-bottom: 1px solid #CCC;
border-left: 1px solid # 666;
}
6 U kunt experimenteren met de kleuren, gebruik dan een achtergrondafbeelding in plaats van simpelweg een achtergrond kleur en doen veel dingen met de opvulling en plaatsing van dit menu, maar je moet de grondbeginselen van het creëren van de afgeschuinde knop illusie in CSS met alleen deze veel code.