„Advance Tableless“ CSS išdėstymo mokymas
Sukurkite savo CSS fiksuotus arba skysčių išdėstymus svetainėms, dienoraščiams ir programinei įrangai. Pagrindinis CSS išdėstymo formatas pradedamas nuo konteinerio nustatymų, tada antraštės, horizontaliosios navigacijos dalies, pagrindinio turinio skyriaus, šoninės juostos ir poraštės. DIV konteineriai naudojami skirtingoms sekcijoms nustatyti, tada kiekvienas skyrius yra pritaikytas atributams, pvz., Spalvoms ir šriftams. Norėdami sukurti CSS išdėstymo tekstą, naudokite Notepad arba kitą teksto redaktorių.
DIV konteineris
1.
Atidarykite naują Notepad arba kitą teksto redaktoriaus dokumentą. Išsaugokite jį kaip TXT failą su pavadinimu, pvz., „Csslayout.txt“.
2.
Sukurkite pagrindinį DIV konteinerio išdėstymą, įvesdami šį HTML kodavimą:
3.
Įveskite antraštės pavadinimą ir antraštės žymes tarp „“ ir „“ žymų. Kodavimas turėtų atrodyti taip:
Mano svetainės antraštė
4.
Pridėti neregistruotą sąrašą
- ir "
- Vienas elementas
- Antra dalis
5.
Pridėkite antraštės ir pastraipos žymos elementus „“ ir „“ žymėse. Tai yra pagrindinis turinys. Kodavimas atrodo taip:
Pagrindinė turinio antraštė
Čia yra mano turinys, skirtas dideliam pagrindiniam skyriui.
Pridėti tą patį turinio antraštę ir turinio kodavimą „ir“ žymėse.
6.
Pridėti „footer“ tekstą „“ ir „“ žymėse. Kodavimas atrodo taip:
Autorių teisės mano svetainėje. Visos teisės saugomos.
Atliktas DIV konteinerio HTML turinys.
CSS atributai
1.
Po paskutine DIV konteinerio žyma įveskite tarpą. Įrašykite kiekvieno "" pavadinimą iš DIV konteinerio ir po to du CSS skliaustelius. Kiekvienas pavadinimas turi būti „#“. Kodavimas atrodo panašus į:
kūnas { }
apvyniokite {
}
antraštė {
}
2.
Nustatykite kiekvieno CSS elemento plotį ir padėtį. „#Wrap“ plotis yra visas svetainės plotis, o „#sidebar“ ir „#main“ pločiai yra lygūs visam plotiui. Naudokite „float: left / right“; atributas, skirtas pagrindiniam turiniui ir šoninei juostai perkelti į kairę arba į dešinę. Pavyzdys atrodo taip:
pagrindinis {
plotis: 600px; float: right; }
3.
Nustatykite kiekvieno CSS elemento paraštes, užpildymą, fono spalvą ir teksto spalvą. Naudokite „paraštes: Xpx Xpx Xpx Xpx;“ ir "pagalvėlė: Xpx Xpx Xpx Xpx;" kodavimas. Pridėti „foną: #XXXXXX;“ ir „spalva: #XXXXXX;“ taip pat. Pavyzdys atrodo taip:
antraštė {
width: 900px; float: left; margins: 0px 5px 15px 20px; padding: 0px 0px 5px 5px; color: #eeeeee; background: #FFFFFF; }
4.
Pašalinkite „slankiklį“, koduojantį iš poraštės, ir naudokite „aiškus: abu“; nuspauskite apačią į svetainės apačią. Tai panaši į tai:
poraštė {
plotis: 900px; aišku: abu; fonas: #eeeeee}
5.
„#Nav {“ elementą padalinkite į du atskirus elementus: „#nav ul {“ ir „#nav li {“, kad kiekvienas būtų stilius. Pridėti „stiliaus stilių: nėra;“ prie elemento „#nav ul“ kodavimo ir „display: none“; #nav li "kodavimas.
nav ul {
sąrašo stilius: nėra; }
nav li {
ekranas: nėra; }
Šis pataisymas padaro naršymo juostą horizontalią ir nerodo navigacijos juostos kaip užsakyto sąrašo.
Išankstinis CSS
1.
Atskirkite antraštės elementą ir stilius su CSS atributais. Pavyzdžiui, norėdami pakeisti antraštės pavadinimą, kodavimas atrodo taip:
antraštė h2 {
spalva: # 000000; šrifto šeima: Arial, Trebuchet, sans-serif; }
2.
Stiliaus nuorodos tekste su kitokia spalva ir jas pabrėžkite. Atributas „text-transform“ gali būti pabrauktas, didžiosios arba mažosios raidės. Pavyzdžiui, kodavimas atrodo taip:
pagrindinis a {
spalva: # 000000; teksto apdaila: pabraukimas; }
3.
Pridėkite bet kokio elemento kraštą naudodami „rėmelį: Xpx #XXXXXX;“ atributas. Siena gali būti viršuje kaip „pasienio viršus“ arba „apačia“.
4.
Nurodykite šriftą naudodami „šrifto šeimą: šriftą“. atributas. Pakeiskite šrifto dydį naudodami „šrifto dydį: Xpx; atributą. Pakeiskite paryškintu arba kursyvu, naudodami atributą„ šrifto svoris: paryškinti / kursyvu; “Pavyzdžiui:
pagrindinis p {
font-family: Times New Roman, serif; font-size: 12px; font-weight: italics; }
Reikalingi dalykai
- Notepad arba kitas teksto redaktorius
Patarimas
- Prieš kurdami kodą kaip naudingą vaizdą, nuskaitykite norimą išdėstymą.