logó WEBFEJLESZTÉS, WEBÁRUHÁZ KÉSZÍTÉS
Ingyenes elektronikus tananyag interaktív weboldalak készítéséhez.
menüMENÜ   

Fejlécvariáció 1



Webáruházunk logóját egy div-be ágyazva helyezzük el az fejlécben, balra úsztatva.

Az áruház nevét Google font felhasználásával dobjuk fel.

Árnyék segítségével tesszük egy kicsit érdekesebbé a hátteret.

1. Példa:

Forráskód


...<style type="text/css"> 
  • {margin:0; padding:0;}
#tarolo {position:relative; display:block; min-height:100%; width:100% } #fejlec {position:absolute; display:block; top:0; left:0; height:50px; width: 100%; background-color:#662210; color:#ffddcc;} #menu {position:absolute; display:block; top: 50px; left: 0; height:30px; width: 100%; text-align:center; background-color:#aa2210; color:#ffddcc;} #balmenu {position:absolute; display:block; top:80px; left:0; height:290px; width:100px; ...} #tartalom {position:absolute; display:block; top:80px; left:100px; background-color:#ffddcc; color:#662210; padding-bottom:40px; } </style> .... <body> <div id="tarolo"> <header id="fejlec"> Webáruház neve és lógója </header> <nav id="menu">Termkek | Vásárlás... </nav> <div id="tartalom"><p> Az oldal tartalma ... </p> </div> <div id="balmenu"> <br> <b>Kínálat</b> ... </div> </div> </body>

Eredmény*

2. Példa:

Forráskód


... 
<link href='https://fonts.googleapis.com/css?family=Finger+Paint' rel='stylesheet' type='text/css'> 
<style type="text/css">
  #fejlec {position:absolute; display:block; top: 0;  left: 0;  
     height:50px; width: 100%; background-color:#662210; color:#ffddcc; 
     box-shadow: 0px 2px 5px 0px #441108, 0px 12px 15px 0px #441108 inset; 
     font:20px/34px 'Finger Paint', cursive;}
  #logo { float:left; margin: 5px 15px 5px 5px; } 
</style>   ....
<body>
....
  <header id="fejlec"> 
    <div id="logo"> 
      <img src="kosar_40.png" alt="Demo webáruház logó" height="40" width="40" />
    </div>Demó webáruház  
  </header>
....
</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ő: webshop_fejlec_2.html

Ahogy a legtöbb honlap, ez a webhely is használ sütiket a weboldalain.