21. HTML reagoiva ulkoasuhttps://peda.net/id/2bae27be20d2016-05-25T07:53:14+03:00https://peda.net/:static/533/peda.net.logo.bg.svg<div class="license">Tämän sivun lisenssi <a rel="license" href="https://peda.net/info">Peda.net-yleislisenssi</a></div>
W3.CSS:än käyttöhttps://peda.net/id/67ab5be420d2016-05-24T07:46:32+03:00<p>Toinen tapa tehdä reagoivia nettisivuja, on tehdä reagoiva tyyli taso, kuten W3.CSS</p>
<p>W3.CSS tekee helpoksi luoda sivuja jotka näyttää hyvältä joka koossa; tietokoneella, tabletilla, puhelimella jne:</p>
<div class="w3-container w3-orange">
<h1>W3.CSS Demo</h1>
<p>Uusi koko tälle reagoivalle sivulle!</p>
</div>
<div class="w3-row-padding w3-light-grey">
<div class="w3-third">
<h2>Lontoo</h2>
<p>Lontoo on Englannin pääkaupunki.</p>
<p> </p>
</div>
<div class="w3-third">
<h2>Pariisi</h2>
<p>Pariisi on Ranskan pääkaupunki.</p>
<p> </p>
</div>
<div class="w3-third">
<h2>Tokio</h2>
<p>Tokio on Japanin pääkaupunki.</p>
<p> </p>
</div>
</div>
<div class="w3-example">
<h3>Example</h3>
<div class="w3-code notranslate htmlHigh"><span><span><</span>!DOCTYPE<span> html</span><span>></span></span><br/>
<span><span><</span>html<span>></span></span><br/>
<span><span><</span>meta<span> name<span>="viewport"</span> content<span>="width=device-width, initial-scale=1"</span></span><span>></span></span><br/>
<span><span><</span>link<span> rel<span>="stylesheet"</span> href<span>="vhttp:// www. konnevesi .fi/lib /w3.css"</span></span><span>></span></span><br/>
<span><span><</span>body<span>></span></span><br/>
<br/>
<span><span><</span>div<span> class<span>="w3-container w3-orange"</span></span><span>></span></span><br/>
<span><span><</span>h1<span>></span></span>W3.CSS Demo<span><span><</span>/h1<span>></span></span> <br/>
<span><span><</span>p<span>>Uusi koko tälle reagoivalle sivulle</span></span>!<span><span><</span>/p<span>></span></span> <br/>
<span><span><</span>/div<span>></span></span><br/>
<br/>
<span><span><</span>div<span> class<span>="w3-row-padding"</span></span><span>></span></span><br/>
<br/>
<span><span><</span>div<span> class<span>="w3-third"</span></span><span>></span></span><br/>
<span><span><</span>h2<span>></span></span>Lontoo<span><span><</span>/h2<span>></span></span><br/>
<span><span><</span>p<span>></span></span>Lontoo on Englannin pääkaupunki.<span><span><</span>/p<span>></span></span><br/>
<br/>
<span><span><</span>/div<span>></span></span><br/>
<br/>
<span><span><</span>div<span> class<span>="w3-third"</span></span><span>></span></span><br/>
<span><span><</span>h2<span>></span></span>Pariisi<span><span><</span>/h2<span>></span></span><br/>
<span><span><</span>p<span>></span></span>Pariisi on Ranskan pääkaupunki.<span><span><</span>/p<span>></span></span> <br/>
<br/>
<span><span><</span>/div<span>></span></span><br/>
<br/>
<span><span><</span>div<span> class<span>="w3-third"</span></span><span>></span></span><br/>
<span><span><</span>h2<span>></span></span>Tokio<span><span><</span>/h2<span>></span></span><br/>
<span><span><</span>p<span>></span></span>Tokio on Japanin pääkaupunki.<span><span><</span>/p<span>></span></span><br/>
<br/>
<span><span><</span>/div<span>></span></span><br/>
<br/>
<span><span><</span>/div<span>></span></span><br/>
<br/>
<span><span><</span>/body<span>></span></span><br/>
<span><span><</span>/html<span>></span></span></div>
</div>
2016-05-23T14:06:31+03:00Reagoivan HTML ulkoasun tekohttps://peda.net/id/f679a3b020d2016-05-24T07:45:06+03:00<p>Nettisivusi tulisi näyttää hyvältä, ja olla helppokäyttöinen riippumatta millä laitteella sitä katsot.</p>
<h2>Mikä on reagoiva web sivun ulkoasu?</h2>
<p>Reagoiva web sivun ulkoasu tekee sinun nettisivustasi hyvän millä laitteella tahansa.(pöytäkoneet, tabletit, läppärit, kännykät).</p>
<p>Reagoiva web sivun ulkoasu on osaltaan CSS koodia ja HTML koodia kokoon, leveyteen ja pituuteen vaikuttavissa riveissä, sekä että saat sivustosi näyttämään hyvältä millä tahansa laitteella:<br/>
<br/>
</p>
<h2>Tee oma reagoiva web sivusi</h2>
<p>Yksi tapa toteuttaa tämä, on tehdä se alusta asti itse:</p>
<div class="w3-example">
<h3>Esimerkki</h3>
<div class="w3-code notranslate htmlHigh"><span><span><</span>!DOCTYPE<span> html</span><span>></span></span><br/>
<span><span><</span>html<span> lang<span>="en-us"</span></span><span>></span></span><br/>
<span><span><</span>head<span>></span></span><br/>
<span><span><</span>style<span>></span></span><span><br/>
.city <span><span>{</span><br/>
float<span><span>:</span> left<span>;</span></span><br/>
margin<span><span>:</span> 5px<span>;</span></span><br/>
padding<span><span>:</span> 15px<span>;</span></span><br/>
width<span><span>:</span> 300px<span>;</span></span><br/>
height<span><span>:</span> 300px<span>;</span></span><br/>
border<span><span>:</span> 1px solid black<span>;</span></span><br/>
<span>}</span></span> <br/>
</span><span><span><</span>/style<span>></span></span><br/>
<span><span><</span>/head<span>></span></span><br/>
<span><span><</span>body<span>></span></span><br/>
<br/>
<span><span><</span>h1<span>>Reagoivan web sivun demo</span></span><span><span><</span>/h1<span>></span></span><br/>
<br/>
<span><span><</span>div<span> class<span>="city"</span></span><span>></span></span><br/>
<span><span><</span>h2<span>></span></span>Lontoo<span><span><</span>/h2<span>></span></span><br/>
<span><span><</span>p<span>></span></span>Lontoo on Englannin pääkaupunki.<span><span><</span>/p<span>></span></span><br/>
<span><span><</span>/div<span>></span></span><br/>
<br/>
<span><span><</span>div<span> class<span>="city"</span></span><span>></span></span><br/>
<span><span><</span>h2<span>></span></span>Pariisi<span><span><</span>/h2<span>></span></span><br/>
<span><span><</span>p<span>></span></span>Pariisi on Ranskan pääkaupunki.<span><span><</span>/p<span>></span></span> <br/>
<br/>
<span><span><</span>/div<span>></span></span><br/>
<br/>
<span><span><</span>div<span> class<span>="city"</span></span><span>></span></span><br/>
<span><span><</span>h2<span>></span></span>Tokio<span><span><</span>/h2<span>></span></span><br/>
<span><span><</span>p<span>></span></span>Tokio on Japanin pääkaupunki.<span><span><</span>/p<span>></span></span><br/>
<br/>
<span><span><</span>/div<span>></span></span><br/>
<br/>
<span><span><</span>/body<span>></span></span><br/>
<span><span><</span>/html<span>></span></span></div>
</div>
<p><br/>
<br/>
</p>
2016-05-23T13:49:02+03:00