Er is nog geen CSS3 aanbeveling; zelfs wanneer het zal worden aanbevolen, zal het even duren voordat de browsers CSS3 specificatie rules.In dit artikel, gebruik ik de Sidebar, Header en Content layout, ter illustratie zal omzetten. In deze lay-out, heb je de header paneel dat de titel van de webpagina, het logo neemt en kan een banner hebben. Je hebt de zijbalk paneel aan de linkerkant, onder de header, die de links neemt voor de navigatie van de website. Je hebt het hoofdpaneel onder de header paneel en aan de rechterkant van de zijbalk. Dit neemt de belangrijkste inhoud van webpagina's.
In het verleden werd deze layout eenvoudig bereikt met behulp van HTML-frames. Echter, als gevolg van de problemen in verband met frames voor zoekmachines, vandaag kunt u deze lay-out met DIV elementen eenvoudig zonder gebruik van frames, dankzij de implementatie van de Vaste Positioning functie door nieuwe browsers. In het artikel, lay-out met DIV in plaats van Frames voor HTML, je hoeft niet in slagen gemakkelijk met behulp van de DIV-elementen (zonder gebruik van de Vaste Positioning functie). Echter, het voordeel design in dit artikel is dat de ontwerpen met oude en nieuwe browsers.
Met behulp van DIV met vaste positionering, werkt alleen voor nieuwe browsers; dat is wat wordt uitgelegd in dit artikel. Ik testte het ontwerp hier met Firefox 2, Netscape 8, Opera 9, Safari en 3Probeer de code eerst te waarderen wat er gaande is voordat we kijken naar de uitleg hieronder: body {overflow: hidden} #header {position: fixed; width: 100%; height: 15%; top: 0; left: 0; border: solid 1px blauw; z-index: 2} #sidebar {position: fixed; width: 20%; height: 85%; top: 15%; left: 0; border: solid 1px blauw; z-index: 2} #main {position: fixed; width: 80%; height: 85%; top: 15%; Links: 20%; border: solid 1px blauw; overflow: scroll; z-index: 2} Hearder Sidebar voor koppelingen hoofdmenu gaat hier hereherehereIn het ontwerp, ik heb gebruikt om de grenzen van de DIV af te bakene