HTML5 + CSS3 logó
  WEBFEJLESZTÉS, WEBÁRUHÁZ KÉSZÍTÉS   Ingyenes elektronikus tananyag interaktív
weboldalak készítéséhez.
Custom Search
 
vissza VISSZA    
menü MENÜ    
ismét ISMÉT    
tovább TOVÁBB    

Átlátható kétoszlopos elrendezés



Nézzük meg a korábban tárgyalt kétoszlopos HTML5 elrendezést külső CSS használata esetén.

A stílusdefiníciók nélkül már könnyen áttekinthető HTML kódhoz jutunk.

A stíluslapok használatának előnyei:

  1. Több oldalas webhelyen csak egyszer kell megadni a stílusdefiníciókat.
  2. A több oldalas webhely esetén csak egy helyen kell módosítani egy jellemző értékét, és a változás minden oldalon megjelenik. (Egyébként minden oldalon külön, külön kellene a módosítást végrehajtani.)
  3. A CSS fájl cseréjével egy teljesen új külsőt adhatunk a webhely összes oldalának.
A style jellemzők elhagyásával a kétoszlopos HTML elrendezés is hasonló képen néz ki.

Példa:

Forráskód



<body>
  <div id="tarolo">        
    <header id="fejlec"> 
       Webáruház neve és lógója 
    </header>
    <nav id="menu"> 
       Termkek | Vásárlás | Kapcsolatok 
    </nav>
    <div id="balmenu">  
        <b>Kínálat</b><br>-PC<br>-Laptop<br>-Egér 
    </div>  
    <div id="tartalom"> 
        Az olda tarlama
    </div>
    <footer id="lablec"> 
        Céginfó, jogi információk
    </footer>
  </div>  
</body>

 

Eredmény*


* Az eredmény megjelenítése az Ön által használt böngészőtől függ.
A példakód külön ablakban is megtekinthető: html5_div4.html