Innholdsfortegnelse:
Video: Building Dynamic Web Apps with Laravel by Eric Ouyang 2024
Det lønner seg å prøve noen av CSS3-layoutene for å se hva du vil gjøre med dem før du begynner å lage et produksjonsprosjekt. Kopier kildekoden fra eksemplet på Dynamic Drive-siden og legg den inn i filer som du forventer å bruke den.
I dette eksemplet oppretter du en HTML5-fil med følgende innhold hentet fra HTML-koden som er vist med eksempelet. (Du finner fullstendig kode for dette eksemplet i kapittel 07-mappen for den nedlastbare koden som TwoColumnLayout. HTML.)
CSS Fast Layout # 2. 1- (Fast-Fixed)CSS Fast Layout # 2. 1- (Fast-Fixed)
840px
Innholdskolonne: 640px
Venstre kolonne: 200px
Footer
Eksemplet legger til hvitt mellomrom til koden som er gitt på Dynamic Drive-siden, for å gjøre det enklere å lese og også vise hvordan strukturen er opprettet ved hjelp av kodene. Du bør gjøre det samme med noen kode du får fra nettstedet. Du vil være sikker på at du forstår hvordan layoutet fungerer før du begynner å utføre eventuelle nødvendige endringer.
Eksemplet fjerner skriptene Dynamic Drive fordi du ikke trenger dem til å fylle delene med tilfeldig innhold. Det legger imidlertid til notater som viser antall piksler som brukes som standard for hver av seksjonene (eksemplet Dynamisk stasjon viser bare størrelsen på den faste venstre kolonnen).
Hvis du endrer CSS for dette nettstedet, bør du også endre notatene du lager om de faste kolonnestørrelsene.
Eksemplet bruker også en ekstern CSS-fil. Legg merke til tilsetning av en tag i. CSS for den eksterne filen er uendret fra taggen til eksempelsiden som vist her.
kropp {margin: 0; polstring: 0; linjehøyde: 1. 5em;} b {font-size: 110%;} em {color: red;} #maincontainer {width: 840px; / * Bredde av hovedbeholderen * / margin: 0 auto; / * Senterbeholder på side * /} #topsection {background: #EAEAEA; høyde: 90px; / * Høyde på øverste delen * /} #topsection h1 {margin: 0; polstring: 15px;} #contentwrapper {float: left; bredde: 100%;} #contentcolumn {margin-left: 200px; / * Sett venstre margen til venstre kolonnebredde * /} #leftcolumn {float: left; bredde: 200px; / * Bredde på venstre kolonne * / margin-venstre: -840px; / * Angi venstre margin til - (MainContainerWidth) * / background: # C8FC98;} #footer {clear: left; bredde: 100%; bakgrunn: svart; farge: #FFF; tekst-align: center; polstring: 4px 0;} #footer a {color: # FFFF80;}. innertube {margin: 10px; / * Marginer for indre DIV i hver kolonne (for å gi utfylling) * / margin-top: 0;}
På dette tidspunktet kan du laste siden for å begynne å tenke på hva du vil endre.Her er siden som det ser ut uten endring etter å ha kopiert det fra nettstedet og skilt HTML fra CSS.
Det første alternativet du vil endre, er fargene som brukes for de forskjellige objektene. Selvfølgelig må fargene samsvare med fargeskjemaet for nettstedet ditt. Malerne bruker heksadesimale fargepresentasjoner. Du bør endre dem for å matche de som brukes av andre maler på nettstedet ditt (om nødvendig).
Maler som er avhengige av faste kolonnebredder, kan kreve tweaking for å jobbe med resten av nettstedet ditt. Hvis du vil endre den totale bredden på siden, endrer du breddeegenskapen til #maincontainer-stilen. Den venstre rutenes bredde styres av breddeegenskapen til #left-kolonne-stilen.
Innholdspanelstørrelsen er forskjellen mellom #maincontainer stil bredden og #leftcolumn stil bredden. Dynamisk stasjon har en tendens til å bruke konsekvent navngivning, slik at et oppsett som bruker den høyre kolonnen for koblinger, ville ha en #rightcolumn-stil som du endrer for å endre bredden til den kolonnen.
Hvis du endrer størrelsen på #leftcolumn eller #rightcolumn-stilene, må du også endre marginal-venstre egenskapen i #contentcolumn-stilen for å matche.
Høyden på toppseksjonen er kun 90px. Dette kan føre til et problem når du arbeider med en større overskrift. Endre høydeegenskapen til #topsection-stilen for å gjøre den kompatibel med andre overskrifter på nettstedet ditt.
På samme måte mangler footer en faktisk høyde, så du må kanskje endre den ved å legge til en høydeegenskap til #footer-stilen for å sikre at hver side på nettstedet ditt ser det samme ut.
Disse maler er også avhengige av både (fet) og (vekt) merkene. Selv om begge kodene fortsatt støttes av HTML5, er det en sterk advarsel med -koden for å bruke den bare som en siste utvei.
Hvis du planlegger langsiktig bruk av disse malene, vil det være en god ide å erstatte -oppføringene med eller koder, eller bedre ennå, unngå å bruke og koder helt til fordel for CSS-formatering.
Disse kodene er rester fra dagene før CSS gjorde det mulig å legge til ulike former for vekt og fet skrift ved hjelp av skrifttypestil og skriftvektegenskaper. Eksemplet viser kodene intakt, men anbefalingen er å fjerne dem og bruke andre former for formatering i stedet.
