4 Måter å lage en rask CSS3-layout - dummies

En designer trenger å vite alle detaljene i de forskjellige layoutene og oppretter deretter CSS3 som kreves for å implementere et bestemt layout bestemt av kundens behov og innholdstype. De fleste utviklere har ikke tid til å finne ut alle disse detaljene og lage en tilpasset layout.

Disse fire tipsene hjelper deg med å komme forbi disse detaljene og lage en layout raskt som bare ser bra ut - at alle føler seg i samsvar med innholdsformatet, forbruksbehovet og forventningene til seerne.

Grunnleggende om CSS3-layoutegenskaper

Uansett hvordan du kommuniserer med CSS-layouter, må du til slutt vite hva egenskapene er og hvordan du kan interagere med dem.

Selv når du arbeider med en generator, genererer generatoren kode som er avhengig av disse egenskapene; hvis du ikke vet hva egenskapene gjør, vil du ikke kunne foreta nødvendige tilpasninger til den genererte koden. Du kan bruke en opplæring, for eksempel den på W3Schools-siden, men en artikkel tjener ofte formålet bedre.

Artikkelen med tittelen "Mastre New CSS Layout Properties" gir akkurat det du trenger på kort tid. Denne artikkelen dekker så forskjellige emner som leverandørprefikser og bruken av de ulike kolonneegenskapene. Det går raskt, selv om du bruker en generator for å produsere koden din.

Hvis du senere finner ut at du ikke kjenner alle nødvendige eiendommer, kan du alltid falle tilbake på W3Schools nettsted (eller et alternativ som gir lignende informasjon).

Hvordan lage grunnleggende layouter med CSS3 Layout Generator

CSS Layout Generator hjelper deg med å lage faste eller flytende layouter ved å fylle ut spørsmål i et skjema. Du forteller veiviseren hvilken versjon av HTML du vil bruke, hvilken type layout du vil ha, spesifikkene i innholdsområdet og noen estetikk, for eksempel bakgrunnsfargen.

Når du er ferdig med å fylle ut skjemaet, klikker du på Opprett layout. Veiviseren genererer oppsettet du ba om, og viser det på skjermen. Her er et eksempel layout; Dine kan variere, avhengig av innstillingene du definerer.

På dette tidspunktet må du avgjøre om layoutet vil fungere. Prøv å endre størrelsen på nettleseren din for å se hvordan utformingen vil fungere med ulike typer enheter. Hvis du liker oppsettet, klikker du på Last ned layout - ellers klikker du på Tilbake-knappen i nettleseren din og gjør ytterligere endringer.

Det du mottar er a. ZIP-fil som inneholder HTML og CSS som trengs for å lage oppsettet ditt. Du kan bruke disse filene som maler for å tilpasse innholdet.

Slik forstår du CSS3-oppsett med Lær CSS Layout

Denne boken inneholder alt de fleste utviklere trenger for å jobbe gjennom vagaries av sidelayout og design ved hjelp av CSS.Det er imidlertid tider når du er en del av et større lag, og det kan hende at du må samhandle med designere og kunstnere som virkelig elsker å designe alt fra grunnen av.

I slike situasjoner trenger du noen ganger å slå opp på CSS-layoutterminologien din slik at du kan snakke med disse andre gruppene intelligent. En av de bedre raske opplæringsprogrammene er Lær CSS Layout. Det gir deg de viktigste elementene du trenger å vite uten å belaste deg med alle detaljer.

Det er flere funksjoner som anbefaler denne opplæringen. For det første kommer det på flere språk, inkludert engelsk, tysk, fransk, spansk, portugisisk og flere orientalske språk. Du er heller ikke fast i å utføre opplæringen ett trinn av gangen. Klikk Innholdsfortegnelse og du ser en liste over emner som opplæringen dekker, slik at du kan hoppe over til bare den informasjonen du virkelig trenger å vite.

Denne spesielle opplæringen er god til å fortelle hva som skjer, hvorfor det må skje, og hvordan å skape en effekt på et grunnnivå. Det gir ikke forretningsinformasjon eller anbefalinger om når du skal bruke en bestemt teknikk. Du finner ikke en liste over beste praksis i denne opplæringen. Fordelen med denne opplæringen er at den er både enkel og rask - du får viktig informasjon raskt.

Slik bruker du en CSS3-tilbakestilling for å overvinne feil

En av de verste scenariene du kan støte på er at den fantastiske siden du har arbeidet over, viser seg å fungere bare i noen nettlesere, og du må lytte til en vert av brukerne klager over de resulterende nettstedskompatibilitetsproblemer. Heldigvis er det tilbakestilt der ute for å hjelpe deg med å løse dette problemet.

A reset er en spesiell type stilark som bidrar til å redusere eller eliminere forskjellene mellom nettlesere. Med en tilbakestilling, selv om du ikke kan gjøre nettstedets utseende på hver nettleser, ser du nøyaktig det samme, kan du gjøre forskjellene så små at ingen vil legge merke til noen feil. Det er en rekke gode tilbakestillinger på nettet. Her er noen for å vurdere om mulig inkludering i prosjektet ditt:

• CSS: resetr

• CSS Reset

• CSS Verktøy: Tilbakestill CSS

• Eric Meyers CSS Reset

• HTML5 Reset Stylesheet

• normalisere. css

• Yahoo! Developer Reset

• YUI Reset

Det er mulig å rulle din egen tilbakestilling. Men du må sørge for at du forstår viktigheten av å utføre oppgaven. Du finner instruksjonene for å utvikle din egen tilbakestilling.