I den här layouten, har du huvudpanelen som tar titeln på webbsidan, logotypen och kan ha en banner. Du har sidofältet panelen till vänster, under rubriken, som tar länkarna för navigering av webbplatsen. Du har huvudpanelen under rubriken panelen och till höger om sidofältet. Detta tar huvud sidans innehåll. Förr i tiden här layouten var lätt uppnås med hjälp av HTML ramar. Men på grund av de problem som ramar till sökmotorer, idag kan du ha denna layout med DIV element enkelt utan att använda ramar, tack vare genomförandet av den fasta Positioning med nya webbläsare.
I artikeln, Layout med DIV istället för Ramar för HTML, du inte lyckas att använda DIV element (utan att använda Fast Positioning) lätt. Dock är fördelen med designer i denna artikel att de mönster arbeta med gamla och nya webbläsare. Använda DIV med fast placering, fungerar bara för nya webbläsare, det är vad som beskrivs i den här artikeln.
Jag testade design här med Firefox 2, Netscape 8, Opera 9, och Safari 3Try koden först att inse vad som händer innan vi tittar på förklaringen nedan: body {overflow: hidden} #header {läge: fast; bredd: 100%; höjd: 15%; top: 0; vänster: 0; kant: solid 1px blue; z-index: 2} #sidebar {läge: fast; bredd: 20%; höjd: 85%; top: 15%; vänster: 0; kant: solid 1px blue; z-index: 2} #main {läge: fast; bredd: 80%; höjd: 85%; top: 15%; vänster: 20%; kant: solid 1px blue; overflow: bläddra, z-index: 2} Hearder Sidebar för länkar innehållet går här hereherehereIn design, har jag använt gränser för att avgränsa DIV, men deras närvaro är inte obligatorisk.
Rullningslisterna i BODY ElementWith denna layout, normalt endast huvudpanelen har rullningslister. Så att vi inte behöver rullningslisterna i BODY elementet. Du tar bort BODY elementets rullningslister med "overflow: hidden" i CSS-regel för BODY element.The läget PropertyAll div element har egenskapen position med värde, "fast". Det är främst det som ger DIV den fasta positioneringsfunktionen. bredd, höjd, övre och vänstra prop