| Czy odwiedziłeś już te strony? - | |||
|
|||
|
|||
|
|||
|
|||
|
|||
| Inne materiały do artykułu |
|---|
|
|
| Strona z 3kolumnami oparta na DIVach |
|---|
|
no i zaczniemy od początku, bo pewnie spora część nawet podstaw nie umie
No i... podstawowy kod wraz z div'em głównym o nazwie "cialo": <html> <head> </head> <body> <div id="cialo"> </div> </body> <html> Strona miała być oparta na 3kolumnach dlatego w naszym głównym divie tworzymy wszystkie części: <html> <head> </head> <body> <div id="cialo"> <div id="naglowek"> </div> <div id="lewo"> </div> <div id="srodek"> </div> <div id="prawo"> </div> <div id="stopka"> </div> </div> </body> <html> Dobrze jest już na początku tworzenia stronki zamykać starannie wszystkie znaczniki żeby potem zbytniego syfu sobie nie zrobić Poniżej pokazuję powyższy kod wraz z jakąś zawartością: <html> <head> </head> <body> <div id="cialo"> <div id="naglowek"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce nec velit id lacus pharetra interdum. In massa tellus, ultrices ac, luctus sit amet, nonummy sit amet, velit. In posuere. Aenean molestie purus vel massa. Vestibulum risus tellus, tempus ac, consequat et, mattis in, lectus. Vivamus malesuada hendrerit ipsum. Nam at dui eu lectus sollicitudin elementum.</div> <div id="lewo"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce nec velit id lacus pharetra interdum. In massa tellus, ultrices ac, luctus sit amet, nonummy sit amet, velit. In posuere. Aenean molestie purus vel massa. Vestibulum risus tellus, tempus ac, consequat et, mattis in, lectus. Vivamus malesuada hendrerit ipsum. Nam at dui eu lectus sollicitudin elementum.</div> <div id="srodek"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce nec velit id lacus pharetra interdum. In massa tellus, ultrices ac, luctus sit amet, nonummy sit amet, velit. In posuere. Aenean molestie purus vel massa. Vestibulum risus tellus, tempus ac, consequat et, mattis in, lectus. Vivamus malesuada hendrerit ipsum. Nam at dui eu lectus sollicitudin elementum. Nam egestas pede gravida diam. Ut sagittis dolor in tortor. Mauris euismod dictum massa. Nulla facilisi. Mauris magna.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce nec velit id lacus pharetra interdum. In massa tellus, ultrices ac, luctus sit amet, nonummy sit amet, velit. In posuere. Aenean molestie purus vel massa. Vestibulum risus tellus, tempus ac, consequat et, mattis in, lectus. Vivamus malesuada hendrerit ipsum. Nam at dui eu lectus sollicitudin elementum. Nam egestas pede gravida diam. Ut sagittis dolor in tortor. Mauris euismod dictum massa. Nulla facilisi. Mauris magna.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce nec velit id lacus pharetra interdum. In massa tellus, ultrices ac, </div> <div id="prawo">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce nec velit id lacus pharetra interdum. In massa tellus, ultrices ac, luctus sit amet, nonummy sit amet, velit. In posuere. Aenean molestie purus vel massa. Vestibulum risus tellus, tempus ac, consequat et, mattis in, lectus. Vivamus malesuada hendrerit ipsum. Nam at dui eu lectus sollicitudin elementum. </div> <div id="stopka"> Copyright by Jan Kowalski</div> </div> </body> <html> Stronka została już napisana więc teraz trzeba zdefiniować jej wygląd za pomocą arkuszy stylów css <head> <style type="text/css"> body { background-color: #000; margin: 0; padding: 0; text-align:center; } div { font: verdana 12px #000; position:relative; } #cialo { margin:0 auto; padding:0 5px 0 5px; position:relative; width:700px; background-color:#fff; text-align:left; clear: both; } #naglowek { background: #fff url(logo.jpg) no-repeat; width:700px; height:150px; margin-bottom:10px; } #lewo { width:150px; float:left; } #prawo { width:150px; float:right; } #srodek { width:400px; float:left; } #stopka { clear:both; text-align:center; } </style> </head> Jeżeli jest to dla ciebie niezrozumiałe to oczywiście gotowca możesz pobrać stąd: http://www.plikownik.pl/484296 Oczywiście to od ciebie zależy jakimi kolorami i grafiką to wypełnisz |
 | |
| |
 | |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
