10 Sites met Great Example CSS Layouts - dummies

Een van de beste manieren om te leren hoe u CSS kunt gebruiken om verschillende taken uit te voeren, is om te zien hoe andere mensen hun sites configureren. De volgende lijst bevat verschillende lay-outs die u kunt gebruiken om uw eigen site te maken. Het bespreekt ook het lay-outtype en speciale functies over elke site die u moet noteren.

• Astronomie Afbeelding van de dag : De astronomie-afbeelding van de dag (APOD) is een uitstekend voorbeeld van een vloeiend ontwerp. Probeer het formaat van de pagina aan te passen en u zult versteld staan ​​hoe de pagina-inhoud reageert. (De afbeelding in het midden werkt niet goed op een mobiel, maar de tekst doet dat zeker.) Het biedt een goede combinatie van lettertypen en laat zien hoe u links goed kunt gebruiken om inhoud te verbeteren.

• USA Today : Dit is een goed voorbeeld van een adaptief ontwerp met twee of drie kolommen. Merk op dat wanneer u de grootte van de pagina wijzigt, de derde kolom aan de rechterkant verdwijnt wanneer de pagina te klein wordt. Let op de pijlen aan elke kant van de presentatie. Je kunt ze gebruiken om te schakelen tussen krantensecties, wat een uitstekend gebruik van dit speciale effect is.

• Yahoo! Kaarten : Kaartenwebsites kunnen notoir moeilijk te gebruiken zijn omdat ze afhankelijk zijn van een complexe interface of omdat de informatie niet in een vorm is die gebruikers gemakkelijk kunnen invoeren. Yahoo! Kaarten lost dit probleem op door drie eenvoudige velden te bieden. Het grootste deel van de interface is eigenlijk gewijd aan het weergeven van de kaart. Het controlesysteem voor de kaart is gemakkelijk te begrijpen en vereist geen formulering. Dit is een geweldig voorbeeld van een grafische toepassing. Dit is ook een van de weinige voorbeelden van een responsief ontwerp dat u correct geïmplementeerd vindt.

• Thesaurus. com : Deze fixed with layout-site biedt een goed voorbeeld van hoe u tabbladen op een unieke manier gebruikt. Er zijn eigenlijk meerdere sites gekoppeld aan deze enkele site. Als u op een van de tabbladen bovenaan klikt, wordt u naar andere sites zoals het woordenboek vervoerd. com en woordenboek. com Vertaler. Let op het gebruik van een complexe lay-out voor deze site. De lay-out met drie kolommen wordt opgesplitst in subsecties indien nodig om extra informatie over te brengen.

• Go Convert : Dit is een goed voorbeeld van een elastisch ontwerp met drie kolommen. De implementatie is niet perfect, maar let op hoe de inhoud de hele pagina opslaat, ongeacht hoe groot u de pagina maakt. U kunt de pagina ook relatief klein maken voordat u een teken van een schuifbalk ziet omdat de inhoud krimpt om in de beschikbare ruimte te passen. Deze pagina bevat ook een systeem met twee menu's (een aan de linkerkant voor toegang tot conversiefuncties en een aan de rechterkant voor toegang tot sitefuncties).

• JC Penney : Veel verkoopsites bieden lagen met inhoud. In dit geval ziet u bovenaan een leverancierskop, een leuk interactief menu naast, de nieuwste verkoop daarna, het huidige sitepad en ten slotte de verkoopinformatie over twee kolommen. Dit is een presentatie met een vaste breedte, dus het schaalt niet goed wanneer de grootte van de browser verandert. De nadruk ligt op het op de best mogelijke manier presenteren van de afbeeldingen op de pagina.

• Petter Hesselberg. com : In tegenstelling tot de meeste sites van vandaag, gebruikt deze de absolute positionering effectief (het breekt ook de regels door tabellen te gebruiken om inhoud te bewaren - de site zou beter zijn als deze uitsluitend CSS gebruikte). Presentatie van tabelgegevens kan moeilijk zijn. Deze site toont een effectieve manier om tabelgegevens weer te geven die niet te druk of moeilijk te zien zijn. Het is niet altijd nodig om randen te gebruiken bij het weergeven van tabelgegevens - soms is subtiele kleuren alles wat u echt nodig hebt.

• Sourceforge : In sommige gevallen moet u een installatie maken voor het verspreiden van informatie in een ander formaat, zoals. ZIP-bestanden. Dit is een voorbeeld van een strategie voor informatiedistributie die HTML5-technieken en functies gebruikt, zoals ongeordende lijsten voor menu's. De lay-out met vaste breedte wordt niet goed aangepast, maar de site zelf is vrij flexibel. Merk op hoe deze site effectief een lay-out met twee kolommen met kop- en voettekst gebruikt.

• GetHuman : Databases worden vaker doorzocht dan dat ze worden gewijzigd. Wanneer de database groot is, wordt het proberen te vinden van een specifiek stuk informatie ongelooflijk moeilijk en frustrerend. Deze site met een vaste breedte toont een zoektechniek in de telefoongids die kan worden toegepast op andere soorten sites die de neiging hebben om te vertrouwen op slechts één of twee toetsen om een ​​reeks informatie weer te geven. Let op het gebruik van speciale effecten om aan te geven welke lijn is geselecteerd. De site presenteert ook een tabelvorm zonder tabellen te gebruiken (bekijk de broncode om zelf te zien).

• De willekeurige gedachten en discussies van John : Deze site biedt u een perfect voorbeeld van de indeling met twee kolommen die wordt gebruikt in een blogomgeving. U ziet hoe de items in de kolom aan de linkerzijde het gemakkelijker maken om gemakkelijker toegang te krijgen tot de inhoudsitems in het rechterdeelvenster. Bovendien helpt deze site u de voor- en nadelen van de klassieke lay-out met vaste breedte te begrijpen.