Szerintem ezt nagyon könnyű elsajátítani ha megértitek a módját és nagyon-nagyon hasznos is, mert sokféleképpen feldobhatjátok vele az oldalatokat 
Szóval elsősorban készítsetek el egy felsorolást.
Amit csinálunk következőnek az-az, hogy bemegyünk a kódnézetbe. Ezt fogod látni:
<ul>
<li>
Így</li>
<li>
fog</li>
<li>
kinézni</li>
<li>
alapból</li>
</ul>
És erre kell kiegészíteni:
<ul id="FELSOROLAS">
<li>
Így</li>
<li>
fog</li>
<li>
kinézni</li>
<li>
alapból</li>
</ul>
Ez volna a html kód része. Még nem történt semmi ugye, csupán annyi, hogy a felsorolásnak megmondtad, hogy úgy kell kinéznie ahogy azt te megszabod a css-ben felsorolas név alatt.
A css része:
#felsorolas { /* az egész felsorolásra vonatkozik */
margin-left:0px;
text-align:left!important;
padding:0!important;
list-style-type: none!important;
list-style-image: none!important;
list-style: none!important;
}
#felsorolas li { /* a sorokra vonatkozik */
text-align:center!important;
margin-bottom: 0px;
font-weight:600!important;
padding:5!important;
background:#000;
border-bottom:1px solid #ccc;
transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
color:#000;
}
#felsorolas li:hover { */ ilyenre fog változni ha ráviszed az egeret */
color:#ccc;
}
Most mutatok pár példát, hogyan lehet ezt a tudást felhasználni.
1.példa
Itt egy táblázat segítségével tettem extrává, sok helyen látni, hogy így használják a szerkesztők a változatos felsorolást.
itt a nyers verzió, css nélkül!
|
Oldal adatai
|
Szerkesztő adatai
|
-
Létrejött: 2014
-
Téma: Star Wars
-
Közösségi média: facebook
|
-
Email: @
-
Név: Riley
-
Közösségi média: twitter
|
Css-el!
** Mivel nem határoztuk meg a linket a felsoroláson belül, ezért a linkek olyan színt és formát fognak ölteni amit alapból az oldalmoduloknál vagy középső modulnál meghatároztál korábban.
|
Oldal adatai
|
Szerkesztő adatai
|
-
Létrejött: 2014
-
Téma: Star Wars
-
Közösségi média: facebook
|
-
Email: @
-
Név: Riley
-
Közösségi média: twitter
|
Teljes kód:
2.példa
Naptár funkció pl koncertek felsorolása
Nyers verzió:
-
2016. 07. 03. Budapest
-
2016. 07. 04. Eger
-
2016. 07. 22. Szekszárd
-
2017. 02. ???
Css-el:
-
2016. 07. 03. Budapest
-
2016. 07. 04. Eger
-
2016. 07. 22. Szekszárd
-
2017. 02. ???
Teljes kód:
3.példa
Adatlapoknál pl hírességeknél
Nyers táblázat:
|
Katy Perry |
 |
-
Kedvenc száma: xxx
-
Kedvenc étele: xxx
-
Kedvenc üdülőhelye: xxx
-
Kedvenc állata: xxx
-
Kedvenc könyve: xxx
-
Mottója: xxx
|
Css-el:
|
Katy Perry |
|
|
-
Kedvenc száma: xxx
-
Kedvenc étele: xxx
-
Kedvenc üdülőhelye: xxx
-
Kedvenc állata: xxx
-
Kedvenc könyve: xxx
-
Mottója: xxx
|
Teljes kód:
| 
AJÁNLOM AZ OLDALT
"So bring your passport girl, I'm trying to show you the world"
