Share
Under tidligere screencasts i denne serien har vi dekket mye bakken, og bygger vår responsive (eller adaptive) layout med Skeleton boilerplate. Det er nå på tide å fullføre alle de endelige detaljene; uten tvil den mest tidkrevende delen av et nettsted bygger!
I løpet av disse tre skjermbildene ser vi på nesting kolonner, fleksible videoinnstillinger, skjelettets formelementer og faner. Vi kaster ut noen manglende oppslag og fullfører den medfølgende CSS. Det er mye å snakke om; godt over en time med opptak for å absorbere, så du må kanskje forberede deg mentalt ...
Vi har tidligere sett på seksten kolonnestrukturen til skjelettet og hvordan stylingen endrer seg med noen utvalgte medieforespørsler. Vi skal nå se på hva som skjer når vi rede kolonner i hverandre.
Alternativt kan du laste ned videoen eller abonnere på Webdesigntuts + screencasts via iTunes eller YouTube!
Det er på tide å legge til litt kjøtt i vår sidefelt. Vi legger til all nødvendig merking, og deretter begynner du å stylere de ulike delene. Mens vi gjør det, snakker vi raskt om skjelettens form styling, og vi tar noen webfonter til våre ikoner.
Alternativt kan du laste ned videoen eller abonnere på Webdesigntuts + screencasts via iTunes eller YouTube!
Hvis du er seriøs om fleksibelt webdesign, må du vite hvordan du håndterer fleksibelt innebygd innhold. I denne videoen tar vi en titt på å gjøre videoinnholdet elastisk. Det er mer å diskutere om emnet, men denne grunnleggende tilnærmingen er en god start.
Når vi har dekket det, snakker vi raskt om skjelettens faner, pluss vi legger til noen salgsfremmende bannere som endres avhengig av hvilke medieforespørsler som brukes.
Alternativt kan du laste ned videoen eller abonnere på Webdesigntuts + screencasts via iTunes eller YouTube!
Emnet med fleksible embedsmiljøer er ganske interessant. Her, for disseksjonen, er de grunnleggende utdragene du må starte ting av. Først merkingen:
Og så stilene:
/ * For det første handler vi om beholderelementet som gjør det relativt posisjonert og definerer høyden proporsjonalt til bredden, noe som gir oss et 16: 9 forhold * / .embed posisjon: relativ; polstring: 0; polstring bunn: 56,25%; / * 16: 9 forhold * / høyde: 0; overløp: skjult; / * da gjør vi det faktiske innebygde innholdet oppfører seg når det gjelder dimensjoner og posisjon i containeren * / .embed iframe, .embed objekt, .embed embed posisjon: absolutt; topp: 0; venstre: 0; bredde: 100%; høyde: 100%;
Merk: I skjermbildet satte jeg inn høyde av .embedbeholderen på 56,25%, burde jeg ha satt den til null (hei, jeg ble sliten ...) I de fleste tilfeller vil dette ikke ha noen skadelige effekter, men jeg trodde det var verdt å nevne :)
Noen nyttige lenker til å bygge videre på hva som er dekket i disse videoene.
Accentsconagua