Tytuł: Prosty layout strony zbudowanej z div Wiadomość wysłana przez: admin Wrzesień 08, 2016, 16:09:13 1. Stworzyć stronę zbudowaną na div'ach i formatowaną w css. Strona posiada nagłówek, trzy kolumny i stopkę.
Kod HTML (w kodzie Html jak widac niewiele jest) <html> <html lang="pl"> <head> <meta charset="UTF-8"> <link href="standard.css" type="text/css" rel="stylesheet"> <title> Layout_strony</title> </head> <body> <div id="tlo"> <div class="naglowek"> Nagłówek </div> <div class="lewy"> <p>format lewy</p> </div> <div class="srodek"> Środek strony </div> <div class="prawy"> <p>kolumna prawa</p> </div> <div class="stopka"> <p>Obszar formatowany w css, klasy stopka"</p> </div> </div> <body> <html> 2. Kod CSS (plik nazywa się standard.css i odwołanie do niego musi być umieszczone w kodzie html) #tlo{ width: 700px; height:800px; background: #0000ff; padding: 0px; border:0px solid #000; } .naglowek{ width:700px; height:80px; right:10px; bottom:250px; background-image:url(z1.jpg); background-repeat:no-repeat; margin: 0px; padding:0px; border: 0px solid #FF0000; text-align: center; color: #00ff00; font-size: 40; } .srodek { width:80%; height:80%; float:left; margin: 0px; padding:0px; border: 0px solid #FFAAAA; background: #FFAAAF; text-align: center; color: rgb(0,0,255); font-size:35; } .lewy { width:10%; height:80%; float:left; margin: 0px; padding:0px; border: 0px solid #FFAAAA; background: #11AAAF; color: rgb(0,0,255); font-size:15; } .prawy { width:10%; height:80%; float: right; margin: 0px; padding:0; border: 0px solid #FFAA00; background: #BBBBAF; } .stopka{ width:100%; height:80px; overflow:auto; margin: 0px; padding:0px; border: 0px solid #FF0000; background: #AFFfFF; text-align: right; } Tytuł: Odp: Prosty layout strony zbudowanej z div Wiadomość wysłana przez: admin Wrzesień 09, 2016, 03:37:41 Przykład 3. Strona internetowa, w której pojawia się okienko. Okienko jest nadpisane nad pozostałe div-y. Efekt uzyskano przez wprowadzenie pozycjonowania absolutnego (bezwzględnego) w pliku css (patrz klasa .luzak, polecenie position:absolute;). Dzieki adresowaniu bezwzględnemu można zbudować stronę bez konieczności zagnieżdżania div-ów jeden w drugim. Wymaga to jednak cierpliwości i trochę liczenia. Proszę zwrócić uwagę, w pliku standard1.css, w klasie .stopka umieściłem polecenie overflow:auto;pozwala automatycznie dopasować rozmiar okienka do zawartości i dostępnego obszaru, bardzo ułatwia pracę przy wykończeniu stron, nie widać tła.
Plik HTML <html> <html lang="pl"> <head> <meta charset="UTF-8"> <link href="standard1.css" type="text/css" rel="stylesheet"> <title> Layout_strony</title> </head> <body> <div id="tlo"> <div class="naglowek"> Nagłówek </div> <div class="lewy"> <p>format lewy</p> </div> <div class="srodek"> Środek strony </div> <div class="prawy"> <p>kolumna prawa</p> </div> <div class="stopka"> <p>Obszar formatowany w css, klasy stopka"</p> </div> </div> <div class="luzak"> Okienko umieszczone w dowolnym miejscu </div> <body> <html> Plik standard1.css #tlo{ width: 700px; height:800px; background: #0000ff; padding: 0px; border:0px solid #000; } .luzak{ background: #aaAAAF; position:absolute; top: 120 px; left: 50px; right:550px; bottom:350px; color:ff0000;} .naglowek{ width:700px; background-image:url(z1.jpg); background-repeat:no-repeat; margin: 0px; padding:0px; border: 0px solid #FF0000; text-align: center; color: #00ff00; font-size: 40; } .srodek { width:80%; height:80%; float:left; margin: 0px; padding:0px; border: 0px solid #FFAAAA; background: #FFAAAF; text-align: center; color: rgb(0,0,255); font-size:35; } .lewy { width:10%; height:80%; float:left; margin: 0px; padding:0px; border: 0px solid #FFAAAA; background: #11AAAF; color: rgb(0,0,255); font-size:15; } .prawy { width:10%; height:80%; float: right; margin: 0px; padding:0; border: 0px solid #FFAA00; background: #BBBBAF; } .stopka{ width:100%; height:120px; overflow:auto; margin: 0px; padding:0px; border: 0px solid #FF0000; background: #AFFfFF; text-align: right; } Tytuł: Odp: Prosty layout strony zbudowanej z div Wiadomość wysłana przez: admin Wrzesień 09, 2016, 07:55:45 Zadanie 4. Napisać kod strony składającej się z pól jak poprzednim przykładzie (nagłówek, lewy, środek, prawy i stopka). Ale... środek ma być podzielony na połowę (poziomo). Tło górnej części ma być białe, tło dolnej części ma być czerwone.
|