Van nekünk egy félkész oldalunk:
A lecke végére az oldalunk is így fog kinézni:
De ehhez CSS-re lesz szükségünk.
Kezdjük a "globális" formázásokkal. Megbeszéltük, hogy az egész ablak háttere (ami itt fehér), színátmenetes. Elég, ha egy 10 pixel széles, 600 px magas képet hozunk létre, ami sötétkékből pirosba megy át. Íme a kép:
Miért elég? Ha ismétlem vízszintesen, akkor olyan, mintha egy nagy színátmenetes képet csináltam volna. Függőlegesen viszont nem akarom ismételni. A háttérszínnek beállítom az alsó színt (itt a red lesz).
body{
background-color:red;
background-image:url('gyakorlat.jpg');
background-repeat:repeat-x;
}
A képen nem látszik, de legyen MINDEN betű Calibri.
body{
background-color:red;
background-image:url('gyakorlat.jpg');
font-family:Calibri;
background-repeat:repeat-x;
}
A bodyval egyelőre megvagyunk. A következő lépés, hogy megcsináljuk a konténert, ami itt a narancssárga. A terv szerint 900px széles, középre igazított, fehér színű (50% átlátszó). A kód a következő:
#konténer{
width:900px; /*szélesség 900px-re állítása*/
margin: 0 auto; /*alsó és felső margó 0, a bal és a jobb autó -->középre "igazul"*/
background-color:rgba(255,255,255,0.5); /*az alap rgb kódhoz egy Alfa csatornát adok ami 0.5*/
}
Megbeszéltük, hogy a menü, a tartalom, a fejléc és a lábléc mint 880px széles, fehér színű. Ezek is középre igazítottak. A kód így néz ki:
#menü, #tartalom, #fejléc, #lábléc{
width:880px;
margin:0 auto;
background-color:white;
}
A fejléc 300px magas. Adjunk neki 10 px alsó és felső margót.
#fejléc{
height:300px;
}
A menü és a lábléc 20px, a tartalom automatikus magasságú
#menü,#lábléc{
height:20px;
}
$tartalom{
height:auto;
}
Az oldal jelenleg így néz ki. A következő leckében "elintézzük" a fejlécet :D.
Nincsenek megjegyzések:
Megjegyzés küldése