forretnings- og arbeidsplassforskrifter

Advance Tableless CSS Layout Tutorial

Lag dine egne CSS-faste eller flytende layouter for nettsteder, blogger og programvare. Det grunnleggende formatet for et CSS-layout begynner med containerinnstillingene, deretter toppteksten, en horisontal navigasjonsseksjon, hovedinnholdsdelen, et sidebjelke og bunnteksten. DIV-beholdere brukes til å plassere de forskjellige seksjonene, og hver del er tilpasset med attributter som farger og skrifter. Bruk Notisblokk eller annen tekstredigerer til å lage CSS-layoutteksten.

DIV-beholderen

1.

Åpne en ny Notisblokk eller et annet tekstredigeringsdokument. Lagre det som en TXT-fil med et navn som "csslayout.txt."

2.

Opprett det grunnleggende DIV-beholderoppsettet ved å skrive følgende HTML-koding:

3.

Skriv overskriftstittelen og eventuelle overskriftskoder mellom "" og "" kodene. Kodingen skal se slik ut:

Nettstedshovedet mitt

4.

Legg til uordnet liste "

    og "
"koder mellom" "og" "kodene. Stil hver"
  • "i den uordnede listen med navnene på elementene i navlinjen. Kodingen ser slik ut:

    • Element 1
    • Punkt to

        • 5.

        Legg til overskriftene og avsnittetikelementene i "" og "" -tegnene. Dette er hovedinnholdet. Kodningen ser slik ut:

        Hovedinnholdsoverskrift

        Her er innholdet mitt for den store hoveddelen.

        Legg til samme innholdsoverskrift og innholdskoding i "og" "-kodene.

        6.

        Legg til bunntekstteksten i "og" "kodene. Kodingen ser slik ut:

        Opphavsrett til nettstedet mitt. Alle rettigheter reservert.

        DIV-beholderens HTML-innhold er gjort.

        CSS Attributter

        1.

        Skriv inn et mellomrom under den endelige "" taggen til DIV-beholderen. Skriv navnet på hver "" fra DIV-beholderen etterfulgt av to CSS-parenteser. Hvert navn skal ha en "#" foran. Kodningen ligner dette:

        kropp { }

        pakke inn {

        }

        Overskrift {

        }

        2.

        Angi bredde og posisjon for hvert CSS-element. Bredden "#wrap" er hele bredden på nettstedet, og breddene for "#sidebar" og "#main" legges sammen tilsvarer hele bredden. Bruk "float: left / right;" Tilordne å flyte hovedinnhold og sidebjelke til venstre eller høyre. Et eksempel ser slik ut:

        main {

        bredde: 600px; flyte: høyre; }

        3.

        Angi margene, polstring, bakgrunnsfarge og tekstfarge for hvert CSS-element. Bruk "marginer: Xpx Xpx Xpx Xpx;" og "polstring: Xpx Xpx Xpx Xpx;" koding. Legg til "bakgrunn: #XXXXXX;" og "farge: #XXXXXX;" også. Et eksempel ser slik ut:

        Overskrift { 

        width: 900px; float: left; margins: 0px 5px 15px 20px; padding: 0px 0px 5px 5px; color: #eeeeee; background: #FFFFFF;

        }

        4.

        Fjern "float" -koden fra bunnteksten og bruk "clear: both;" å skyve bunnteksten ned til bunnen av nettsiden. Det ser ut som dette:

        footer {

        bredde: 900px; klare: begge; bakgrunn: #eeeeee}

        5.

        Del elementet "#nav {" i to separate elementer: "#nav ul {" og "#nav li {" for å stile hver. Legg til "listestil: none;" til "#nav ul" elementkoding og "display: none;" til #nav li "-kodningen. Det ser slik ut:

        nav ul {

        listestil: none; }

        nav li {

        skjerm: ingen; }

        Denne løsningen gjør navlinjen horisontal og viser ikke navlinjen som en bestilt liste.

        Advance CSS

        1.

        Skille ut overskriftselementet og stil det med CSS-attributter. For eksempel, for å endre tittel tittelen ser kodingen slik ut:

        header h2 {

        farge: # 000000; font-familie: Arial, Trebuchet, sans-serif; }

        2.

        Stil lenker i teksten med en annen farge og gjør dem understreke. Attributtet "tekst-transform" kan være understreket, store eller små bokstaver. For eksempel ser kodingen slik ut:

        main a {

        farge: # 000000; tekst-dekorasjon: understreke; }

        3.

        Legg til en ramme for et element ved å bruke "grense: Xpx #XXXXXX;" Egenskap. Grensen kan være på toppen som "border-top" eller bunn som "border-bottom".

        4.

        Angi en skrift ved å bruke "font-family: font;" Egenskap. Endre skriftstørrelsen ved å bruke "fontstørrelse: Xpx; attributt. Endre til fet eller kursiv ved å bruke" font-weight: bold / italics; "attributten. For eksempel:

        main p { 

         font-family: Times New Roman, serif; font-size: 12px; font-weight: italics;

        }

        Ting som trengs

        • Notisblokk eller annen tekstredigerer

        Tips

        • Skiss ønsket layout før du oppretter kode som en nyttig visuell.

    • none

    Anbefalt