Unelte utilizator
module:11-basic-web-dev:lectie-04
Diferențe
Aici sunt prezentate diferențele dintre versiunile selectate și versiunea curentă a paginii.
| Both sides previous revision Previous revision Next revision | Previous revision | ||
|
module:11-basic-web-dev:lectie-04 [2014/10/03 19:20] gchelu |
module:11-basic-web-dev:lectie-04 [2015/10/17 23:02] (curent) fbratiloveanu [Rezolvare task-uri] |
||
|---|---|---|---|
| Linia 54: | Linia 54: | ||
| <html> | <html> | ||
| - | <p data-height="268" data-theme-id="0" data-slug-hash="lkDeC" data-default-tab="result" data-user="giac" class='codepen'>See the Pen <a href='http://codepen.io/giac/pen/lkDeC/'>lkDeC</a> by Gia (<a href='http://codepen.io/giac'>@giac</a>) on <a href='http://codepen.io'>CodePen</a>.</p> | + | <p data-height="268" data-theme-id="0" data-slug-hash="ByjQab" data-default-tab="result" data-user="andreeas" class='codepen'>See the Pen <a href='http://codepen.io/andreeas/pen/ByjQab/'>ByjQab</a> by andreea (<a href='http://codepen.io/andreeas'>@andreeas</a>) on <a href='http://codepen.io'>CodePen</a>.</p> |
| + | <script async src="//assets.codepen.io/assets/embed/ei.js"></script> | ||
| + | </html> | ||
| + | |||
| + | |||
| + | Prima imagine plutește la dreapta, a doua imagine plutește la stanga, iar pragraful are valoarea //none// pt **float**. | ||
| + | |||
| + | Iată cum arată o structură generală | ||
| + | <html> | ||
| + | <p data-height="268" data-theme-id="0" data-slug-hash="yInmw" data-default-tab="result" data-user="giac" class='codepen'>See the Pen <a href='http://codepen.io/giac/pen/yInmw/'>yInmw</a> by Gia (<a href='http://codepen.io/giac'>@giac</a>) on <a href='http://codepen.io'>CodePen</a>.</p> | ||
| <script async src="//codepen.io/assets/embed/ei.js"></script> | <script async src="//codepen.io/assets/embed/ei.js"></script> | ||
| </html> | </html> | ||
| Linia 60: | Linia 69: | ||
| + | ==== Task-uri ==== | ||
| - | - <div> | + | Pornind de la structura din [[http://codepen.io/anon/pen/HKhya|Codepen]] trebuie să ajungeți la următorul rezultat |
| - | - <div> + CSS => flow (de exemplu dreptunghiuri aranjate in diverse moduri http://css-tricks.com/all-about-floats/ ) | + | {{:module:11-basic-web-dev:batman-2.png?800|}} |
| + | |||
| + | Pentru a realiza acest lucru urmăriți pașii de mai jos: | ||
| + | *Modificați lățimea paginii (acum este de 700px care trebuie modificată în 900px). | ||
| + | *Mutați conținutul din dreapta în stânga după care adăugați alte 2 content-uri ca în imagine. | ||
| + | *Modificati fundalul content-urilor. Ce se întâmplă dacă alegeți culoarea neagră pentru fundal? | ||
| + | *Adăugați un text mai mare în contentul din centru după care adăugați și o imagine ca în imaginea de mai sus. | ||
| + | *Modificați textul din celelalte content-uri astfel încât să arate ca în imaginea de mai sus. | ||
| - | === Task-uri === | ||
| - | - mai multe task-uri mai micute de aranjare in pagina a unor figuri sau texte puse in div. | ||
| - | === Tema === | ||
| - | - ceva asemanator cu task-urile | ||
| - | === Recapitulare === | ||
| - | - tot un task, pornind de la un schelet | ||
module/11-basic-web-dev/lectie-04.1412353212.txt.gz · Ultima modificare: 2014/10/03 19:20 de către gchelu
Exceptând locurile unde este altfel specificat, conținutul acestui wiki este licențiat sub următoarea licență: CC Attribution 3.0 Unported
