Ćwiczenie 2
Praca domowa
Utwórz plik obraz.html i podepnij pod niego zewnętrzny arkusz stylu o
nazwie styl5.css. Otwórz folder obrazy i z dowolnie wybranych przez siebie
zdjęć (folder obrazy) stwórz obraz. Każdy z obrazków osadź
w osobnym pudełku (div) i za pomocą CSS właściwości: position i z-index
ustaw ich pozycję w taki sposób by utworzyć ciekawą kompozycję.
Rozwiązanie zapisz na swoim dysku OneDrive w folderze Zadanie 5
zrobcie to w kodzie żebym mógł przekopiować
Praca domowa
Utwórz plik obraz.html i podepnij pod niego zewnętrzny arkusz stylu o
nazwie styl5.css. Otwórz folder obrazy i z dowolnie wybranych przez siebie
zdjęć (folder obrazy) stwórz obraz. Każdy z obrazków osadź
w osobnym pudełku (div) i za pomocą CSS właściwości: position i z-index
ustaw ich pozycję w taki sposób by utworzyć ciekawą kompozycję.
Rozwiązanie zapisz na swoim dysku OneDrive w folderze Zadanie 5
zrobcie to w kodzie żebym mógł przekopiować
Wystarczy podać odpowiednie ścieżki a atrybutach img i powinno działać.
obraz.html
<head>
<link rel="stylesheet" href="styl5.css">
</head>
<div id="image1">
<img src="zdjecia/zdjecie1.png">
</div>
<div id="image2">
<img src="zdjecia/zdjecie2.png">
</div>
<div id="image3">
<img src="zdjecia/zdjecie3.png">
</div>
<div id="image4">
<img src="zdjecia/zdjecie4.png">
</div>
styl5.css
#image1 {
position: absolute;
left: 200px;
top: 0px;
z-index: -1;
}
#image2 {
position: absolute;
left: 500px;
top: 300px;
z-index: -1;
}
#image3 {
position: absolute;
left: 1000px;
top: 150px;
z-index: -1;
}
#image4 {
position: absolute;
right: 300px;
top: 110px;
z-index: -1;
}