4 Måder at producere en hurtig CSS3 Layout - dummies

En designer skal kende alle detaljerne i de forskellige layouter og opretter derefter CSS3, der kræves for at implementere et bestemt layout bestemt af kundens behov og indholdstype. De fleste udviklere har ikke tid til at fastslå alle disse detaljer og oprette et brugerdefineret layout.

Disse fire tips hjælper dig med at komme forbi disse detaljer og oprette et layout hurtigt, der simpelthen ser godt ud - at alle føler sig i overensstemmelse med indholdsformat, forbrugernes behov og forventninger fra seerne.

Grundlæggende om CSS3-layoutegenskaber

Uanset hvordan du interagerer med CSS layouts, skal du til sidst vide, hvad egenskaberne er, og hvordan du kan interagere med dem.

Selv når du arbejder med en generator, producerer generatoren kode, der er afhængig af disse egenskaber; hvis du ikke ved hvad ejendommene gør, vil du ikke kunne foretage krævede tweaks til den genererede kode. Du kan bruge en tutorial, som den på W3Schools-webstedet, men en artikel tjener ofte formålet bedre.

Artiklen med titlen "Master the New CSS Layout Properties" giver præcis det, du har brug for på kort tid. Denne artikel dækker så forskellige emner som leverandørpræfikser og brugen af ​​de forskellige søjleegenskaber. Det får dig til at gå hurtigt, selvom du bruger en generator til at producere din kode.

Hvis du senere finder ud af, at du ikke helt kender alle nødvendige ejendomme, kan du altid falde tilbage på W3Schools websted (eller et alternativ, der giver lignende oplysninger).

Sådan oprettes grundlæggende layouter med CSS3 Layout Generator

CSS Layout Generator hjælper dig med at oprette faste eller flydende layouter ved at udfylde spørgsmål i en formular. Du fortæller guiden, hvilken version af HTML der skal bruges, hvilken slags layout du ønsker, indholdet af indholdsområdet og nogle æstetik, såsom baggrundsfarven.

Når du er færdig med at udfylde formularen, klikker du på Opret layout. Guiden genererer det layout, du har anmodet om, og viser det på skærmen. Her er et eksempel layout; Dine kan variere afhængigt af de indstillinger, du definerer.

På dette tidspunkt skal du afgøre, om layoutet vil fungere. Prøv at ændre størrelsen på din browser for at se, hvordan layoutet fungerer sammen med forskellige enhedstyper. Hvis du kan lide layoutet, skal du klikke på Download Layout - ellers klikker du på knappen Tilbage i din browser og foretager yderligere ændringer.

Hvad du modtager er en. ZIP-fil, der indeholder HTML og CSS, der er nødvendige for at oprette dit layout. Du kan bruge disse filer som skabeloner til at tilpasse indholdet.

Sådan forstår du CSS3-layouter med Lær CSS Layout

Denne bog indeholder alt, hvad de fleste udviklere har brug for at arbejde igennem vagaries om sidelayout og design ved hjælp af CSS.Der er dog tidspunkter, hvor du er en del af et større team, og det kan være nødvendigt at interagere med designere og kunstnere, der virkelig elsker at designe alt lige fra bunden.

I disse situationer skal du undertiden slå op på din CSS layoutterminologi, så du kan tale med disse andre grupper intelligent. En af de bedre hurtige vejledninger er Learn CSS Layout. Det giver dig de væsentligste ting, du skal vide uden at belaste dig med alle detaljer.

Der er flere funktioner, der anbefaler denne vejledning. For det første kommer det på flere sprog, herunder engelsk, tysk, fransk, spansk, portugisisk og flere orientalske sprog. Du er heller ikke fast i at udføre tutorialet et trin ad gangen. Klik på Indholdsfortegnelse, og du kan se en liste over emner, som vejledningen dækker, så du kan springe til bare de oplysninger, du virkelig behøver at vide.

Denne særlige vejledning er god til at fortælle, hvad der sker, hvorfor det skal ske, og hvordan man laver en effekt på et grundlæggende niveau. Det giver ikke forretningsmæssige nødvendigheder eller anbefalinger om, hvornår man skal bruge en bestemt teknik. Du finder ikke en liste over bedste praksis i denne vejledning. Fordelen med denne vejledning er, at det er både enkelt og hurtigt - du får vigtige oplysninger hurtigt.

Sådan bruges en CSS3-nulstilling til at overvinde fejl

En af de værste scenarier, du kan støde på, er, når den fantastiske side du har arbejdet over, viser sig at fungere kun i nogle få browsere, og du skal lytte til en vært af brugerne klager over de resulterende problemer med webstedskompatibilitet. Heldigvis er der nulstilles derude for at hjælpe med at løse dette problem.

A nulstil er en speciel slags stilark, der hjælper med at reducere eller fjerne forskellene mellem browsere. Med en nulstilling, selvom du ikke kan få dit websted til at se ud på alle browsere, ser du præcis det samme, du kan gøre forskellene så små, at ingen vil se nogen fejl. Der er en række gode nulstillinger online. Her er et par til at gennemgå for potentiel integration i dit projekt:

• CSS: resetr

• CSS Reset

• CSS-værktøjer: Reset CSS

• Eric Meyers CSS Reset

• HTML5 Reset Stylesheet

• normalisere. css

• Yahoo! Developer Reset

• YUI Reset

Det er muligt at rulle din egen nulstilling. Du skal dog sørge for at forstå vigtigheden af ​​at udføre opgaven. Du kan finde vejledningen til at udvikle din egen nulstilling.