Cascading Style Sheets (CSS) bewerken de stijl en het ontwerp van een website. De bar van de navigatie van een Web-pagina is gebouwd met behulp van UL- en LI-tags, HTML-codes die worden gebruikt om lijsten te maken op het Web. Hoewel dergelijke labels als lijsten met opsommingstekens webbrowsers standaard renderen, kunt u overschrijven de opmaak met behulp van CSS te geven uw site een professionele afwerking. Met een beetje aanpassen, je kunt ook het verwerken van uw navigatie met de rest van uw pagina.
Wat die u nodig hebt
- Teksteditor
Open een teksteditor, zoals Kladblok, EditPad of TextPad. Klik op "Bestand" en "New" om een nieuwe CSS-document te maken.
De volgende CSS-code in je pagina invoegen. Het wordt ingesteld aan de boven- en ondermarges op nul op uw webpagina:
lichaam {}
marge: 0;
padding: 0;
}Voeg de volgende code onder de vorige coderegel. Het creëert een stijl voor de navigatiebalk, over de volledige breedte van de bovenliggende container of sectie. Het ook links uitgelijnd in de bar (zo ver links mogelijk van de container) en geeft het een zwarte achtergrond. U wijzigt de achtergrondkleur voor de navigatie, "zwart" omzetten in een andere kleur, maar de puntkomma intact laten.
NAV {}breedte: 100%;
float: links;
achtergrond: zwart;
}Voeg de volgende code onder de vorige coderegel. Deze Hiermee verwijdert u opsommingstekens uit de UL-tag en verwijdert u de marges en opvulling:
NAV ul {}marge: 0;
padding: 0;
list-style-type: none;
}Voeg de volgende CSS code onder de voorgaande code. Het maakt de inhoud van de weergave Navigatie op dezelfde regel:
NAV li {}display: inline;
}Voeg de volgende code onder de vorige coderegels. Het wordt opgemaakt van de links in de navigatie en als tabbladen weergegeven. Het voegt een verticale bekleding van 2 pixels en horizontale opvulling van 15 pixels op elke koppeling. Het onderstreept verwijderd de koppelingen, maakt de tekst wit en geldt een zwarte achtergrond. Het voegt ook een dunne, witte rand aan de rechterkant van elke koppeling. Voor het aanpassen van de navigatiebalk, de kleuren in de code te wijzigen.
NAV ul een {}display: block;
float: left;
padding: 2px 15px;
text-decoration: none;
achtergrond: zwart;
kleur: wit;
rechts rand: 1px solid wit;
}Voeg de volgende coderegel wijzigen van de achtergrondkleur van de tabbladen wanneer u ze selecteert:
NAV ul een: Beweeg {}achtergrond: blauw;
}Klik "File" en "Save" van het menu. Geef het bestand "nav.css" in het dialoogvenster "Opslaan als". Plaats het bestand in dezelfde map als het HTML-bestand waar de navigatiebalk zal gaan. Klik op "Opslaan".
Gebruik Kladblok of een vergelijkbare tekst-editor te openen het HTML-bestand waar de navigatiebalk zal worden geplaatst.
Ga naar de sectie "head", gelegen aan de bovenkant van uw pagina, net onder de ""code. Om te identificeren van de juiste sectie, klikt u op tussen"
"en""en voeg de volgende code:Scroll hieronder de opening "body" tag en klik waar u de navigatiebalk wilt weergeven. Voeg de volgende code, maar "#" vervangen door het adres van de website dat u koppelt. Vervang "Link 1," "Link 2," en "Link 3" met de tekst die u weergeven in de navigatie wilt.
Klik "File" en "Save" van het menu de wijzigingen op te slaan.
