Microsoft PowerPoint - Primer VI - Sadrzaj

Транскрипт

1 Visoka škola strukovnih studija za informacione i komunikacione tehnologije Primer VI - Sadržaj Školska 2017/18. Milena Vesić, spec. stuk. inž. Danijela Nikitin, spec. stuk. inž.

2 Izrada responsive dela sadržaja putem CSS-a Cilj ovog primera je da demonstrira kako se izgled dela sadržaja menja smanjivanjem rezolucije browser-a.

3 HTML kod sadržaja <div id="sadrzaj"> <div id="levakolona"> <div class="lkblok"> </div> <div class="ikonice"><i class="fa fa-laptop"></i></div> <div class="tekst"> <h2>responsive design</h2><p>neki tekst.</p> </div><div class="cistac"></div> <div class="lkblok"> </div> <div class="ikonice"><i class="fa fa-tablet"></i></div> <div class="tekst"> <h2>responsive design</h2><p>neki tekst.</p> </div><div class="cistac"></div> <div class="lkblok"> <div class="ikonice"><i class="fa fa-mobile"></i></div> <div class="tekst"> <h2>responsive design</h2><p>neki tekst.</p> </div><div class="cistac"></div> </div> </div> <! Zatvoren div id= levakolona -->

4 HTML kod sadržaja <div id="desnakolona"> <div class="blok"> <form action="" method="post"> <input type="text" name="pretraga" placeholder="pretraži..."/> <button type="submit"><i class="fa fa-search"></i></button> </form> </div> <div class="blok"> <ul> <li><a href="#"><i class="fa fa-facebook"></i></a></li> <li><a href="#"><i class="fa fa-twitter"></i></a></li> <li><a href="#"><i class="fa fa-youtube"></i></a></li> </ul> </div> </div> <div class="cistac"></div> </div><! zatvoren div id= sadrzaj -->

5 CSS početno stanje *{ margin:0px; padding:0px; ul{ list-style:none; a{ text-decoration:none; h1, h2, h3, h4, h5, h6, body, a { color:#252525; #sadrzaj{ width:1024px; margin:20px auto; #levakolona{ float:left; width:65%; border:5px solid #f4a142; padding:10px 5px; border-radius:15px; margin-bottom:10px;.lkblok{ width:29%; margin:10px 2%; float:left;.ikonice{ width:30%; font-size:60px; color:#f4a142; float:left; margin-right:10px; text-align:center;.tekst p{ color:#666; line-height:23px; text-align:justify;.lkblok h2{ font-size:18px; margin-bottom:10px; #desnakolona{ float:right; width:30%;.blok{ border:5px solid #f4a142; padding:10px 5px; border-radius:15px; margin-bottom:10px; background:#f4d2b2; text-align:center;.blok form{ margin:10px auto; text-align:center; padding:7px 3px;.blok input{ padding: 10px; border-radius:10px 0px 0px 10px;.blok input,.blok button{ font-size: 15px; border:none;

6 CSS početno stanje.blok button{ border:none; background:#f4a142; padding: 10px 15px; margin-left:-15px; text-align:center; color:#fff; border-radius:0px 10px 10px 0px;.blok ul li i{ font-size:20px;.blok ul{ width:60%; margin:20px auto;.blok ul li{ display:inline;.blok ul li a{ padding:10px 15px; border-radius:15px; border:1px solid #252525;.cistac{ clear:both;

7 CSS media queries /* za 1000px ili manje screen and (max-width: 1000px) { #sadrzaj{ width: 94%; #levakolona{ width: 60%; #desnakolona{ width: 35%;.lkBlok{ width:45%; min-height:430px;.lkblok:last-child{ width:auto; float:none;.ikonice{ width:auto; float:none;.tekst h2{ text-align:center;.blok ul{ width:auto; /* za 760px ili manje screen and (max-width: 760px) { #sadrzaj, #levakolona, #desnakolona,.lkblok{ width:auto; #levakolona, #desnakolona,.lkblok{ float:none;.lkblok{ min-height:auto;.ikonice{float:left; width:20%;padding:20px 0px; font-size:100px;.tekst{float:right; width:75%;.blok input{ width:70%;

8 CSS media queries /* za 480px ili manje screen and (max-width: 480px) {.tekst{ width:auto; float:none; /* za 320px ili manje screen and (max-width: 320px) {.blok ul{ width:auto;.ikonice{ display:none;.blok:first-child{ display:none;.blok ul li { display:block; padding:15px 0px;

9 Izgled sadržaja 1024px

10 Izgled sadržaja 1000px i manje

11 Izgled sadržaja 760px i manje

12 Izgled sadržaja 480px i manje

13 Izgled sadržaja 320px i manje

14