A mai nap elérkeztünk az utolsó előtti CSS leckéhez :D Jee, most mindenki boldog. Miről is fogunk ma beszélni? A W3-as tananyag egyetlen (igazából 2) olyan leckéje, amivel gyakorlatban is CSS-ezhetünk (:D). Egy menüsávot és egy nagyon kezdetleges képgalériát fogunk ma elkészíteni.
Egyelőre még ne a kódot nézzétek. Erről a menüsorról beszélek :D
Először is nézzük meg, hogy hogyan csinálnánk meg.
Menüket általában listával, felsorolással készítünk el. Minden listaelem egy link. A listánk vízszintes, a többi pedig formázás. Neki is állhatunk az elkészítésnek.
Tehát létrehozunk egy listát HTML-ben, ahol minden listaelem egy link.
<ul>
<li><a href="#">Kezdőoldal</a></li>
<li><a href="#">Hírek</a></li>
<li><a href="#">Kapcsolat</a></li>
<li><a href="#">Rólunk</a></li>
</ul>
Ezután pedig vízszintessé alakítjuk a listánkat CSS-ben. Ezt az lebegtetés leckében tanultuk.
li{
float:left
}
Ha ezzel megvagyunk, akkor nézzük meg az eredeti menüsoron a "gombokat". A linkek nem csak a szövegen kattinthatók, tehát a linkeket be kell dobozolnunk, hogy az egész területére kattinthassunk.
ul li a{
display:block;
}
A következő lépésben pedig formázzuk a menüpontokat.
Beállítunk neki egy háttérszínt, középre igazítjuk a szöveget, félkövérré tesszük, a szövegszínt fehérre állítjuk, arial betűtípusúra tesszük, eltüntetjük az aláhúzást:
ul li a{
display:block;
width:100px;
background-color:green;
color:white;
padding:10px 0; /*Így a szöveg függőlegesen is középre lesz igazítva*/
text-align:center;
text-decoration:none;
font-weight:bold;
font-family:arial;
font-size:18px;
}
A menüsor magassága a következő lesz: 18px a betű + alul, felül 10px eltartás --> 38px.
Tök más mint az eredeti, de színek, betűtípusok "másolásával" hasonlóvá tehető, de nem az volt a cél, hogy egyformát készítsünk.
A másik feladatunk egy képgaléria elkészítése. Pontosan erről beszélek :D
Nem valami látványos, de a célnak megfelel.
Nézzük meg, hogyan épül fel a galéria. Először is áll 4 részből, mindegyik ugyan az, csak a kép más. Tehát elemezzünk most csak egyet.
Van egy terület kék kerettel, benne egy kép, ami ha ki van választva, ugyan olyan keretet produkál, mint a terület. Meg persze van egy képleírásunk.
Készítsük el a HTML kódot. Egy terület kell, benne egy "linkképpel" és egy leírással.
<div id="terület">
<a href="#"><img src="kep"/></a>
<div id="felirat">Képaláírás HTML kezdőknek módra :D</div>
</div>
Formázzuk a "terület"-et 1px-es kék kerettel, automata szélességgel és magassággal (a kép szélességéhez és a kép+leírás magasságához igazodik). Lebegtessük balra, mert több kép lesz egymás mellett. A szöveg (és kép :D) legyen középre igazítva. Adjunk neki 10px margót is, hogy legyen köz a képek között.
#terület{
border:1px solid blue;
width:auto;
height:auto;
float:left;
text-align:center;
}
A "feliratnak" adjunk 130px szélességet, hogy elférjen a kép alatt. A kép meg legyen 110 px széles és 90px magas. A keret színe a képnek fehér és 1px-es.
img{
width:110px;
height:90px;
margin:3px;
border:1px solid #fff;
}
#felirat{
width:130px;
}
Ha ráviszem az egeret a képre, akkor a keret színe legyen kék.
img:hover{
border-color:blue;
}
A link helyének bármit megadhatunk.
A mai leckének ennyi :], holnap befejezzük CSS tanulmányainkat egy talán hosszabb leckével, a további tennivalókat majd akkor ismertetem :D
Nincsenek megjegyzések:
Megjegyzés küldése