Als je wilde iets in uw lay-out te veranderen, zeggen verandering van verticale navigatie aan de zijkant van de pagina om nav horizontale balk onder de header, moest u elke pagina te veranderen van uw site.
Hoe kunnen we het ontwerp van de dezelfde lay-out met CSS? Met behulp van het attribuut vlotter. Met behulp van CSS je eigenlijk verdelen de inhoud van uw pagina in blokken, afgebakend door de /... /labels.
Het attribuut float kunt u plaatsen (float) een deel van uw inhoud aan de rechter of linker marge van uw blok. De rest van de inhoud van dat blok zal rond uw drijvende gedeelte stromen. Laten we het doen. We zullen een HTML-pagina en een CSS-stylesheet nodig. Laten we eens kijken naar de HTML eerste.
Zoals u kunt zien, hebben we elke logische deel van onze pagina verdeeld in blokken. Zoals u kunt zien, alle elementen van onze pagina (koptekst, voettekst, navigatie en inhoud) zijn opgenomen in een blok genaamd container, die in feite is de hele pagina.
We zullen onze elementen plaatsen in de "container" ruimte. Zoals u zich kunt voorstellen, we gaan naar de navigatie-blok drijven aan de linkerkant van onze "container" blok.
Hier is de code om de magie te werken.
Als Ik zei, ik zal niet ingaan op details hier te gaan, uit te leggen wat elke opdracht betekent. Maar laten we beoordelen het snel, te wijzen op wat ons interesseert. Allereerst hebben we het lettertype toegewezen voor de pagina's, met vermelding van het kenmerk. We hebben ook een opmaak voor de H1 en H2 labels toegewezen.
De "div # iets" gesprekken waarin we een opmaak en een specifiek gedrag van elk van de blokken definieerden we in onze html wijzen. Let op de oproepen voor navigatie en content. We toegewezen aan de navigatie de "links" eigenschap, waardoor het aan de linkerkant van onze pagina. Dan gedefinieerd we de kolom breedte en de belangrijkste inhoud marge uit de kolom. Let op de "clear: left" attribuut we toegewezen aan de voettekst. Een veelgemaakte fout is het vergeten dit attribuut om de voettekst.
Als u het vergeet, zal uw voettekst niet worden geplaatst op de bodem van de pagina, maar aan de onderkant van de belangrijkste content gebied en aan de linkerkant van uw navigatiesysteem omgeving. Als het navigatiegebied langer is dan uw belangrijkste inhoud, zal het uit te breiden onder de voettekst. Met behulp van de: attribuut "duidelijke links" we voorkomen dat deze gemeenscha