Mobillimalli Konspekt

Selle ülesande töö oli et teha mobiilisõbralik veebileht, antud juhul tegin Näideleht millel on väike tunniplaan ning Anekdoodi leht millel on naljad, Kasutasin php ja CSS-i mõlemal ülesandel ning näitan koodinäiteid mis kasutasin Anekdoodi tegemisel

Anekdoodid

Antud juhul iga leht kasutab sarnast kujundust, nimelt selline: (lõikasin välja kõik kohad kus php mainin, näitan täieliku koodilõiget ka)

require("anekdootpais.php");
   < h2 > Anekdootide pealeht </h2>
    <p>
        require("anekdoot.txt");
    </p>
 require("jalus.php");

Täiendatud Leht

Kõik require-id laevad osa lehest et ei peaks igal lehel olema kopeeritud kujundus.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width; initial-scale=1.0;
maximum-scale=1.0;">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Anekdoodid</title>
    <link rel="stylesheet" href="anekdootkujundus.css">
</head>
<body>
<h1>Kauri Anekdoodid</h1>
<div id="header">
    <div class="nav">
        <ul>
            <li><a href="../../../index.php">Tagasi</a></li>
            <li><a href="anekdoot.php">Pealeht</a></li>
            <li><a href="anekdootA.php">Josephi Tsitaat</a></li>
            <li><a href="anekdootB.php">Pinali nali</a></li>
            <li><a href="anekdootC.php">Programmeri nali</a></li>
        </ul>
    </div>
</div>
<div class="clear"></div>
   < h2 > Anekdootide pealeht </h2>
    <p>
        Kaks blondiini saavad kokku. Üks ütleb teisele:

        "Kuule, tegin täna rasedustesti."
        Teine vastu:
        "Kas olid ka rasked küsimused?"
    </p>
<div class="nav2">
    <p>Design by <a
            href="http://www.mobifreaks.com">Mobifreaks.com</a></p>
</div>
</body>
</html>

CSS Kujundus

CSS teeb nii et navigatsioon peab olema väike ning töötama korralikult mobiilis, nimelt margin:0 5px aitab lehel olla väike mobiilis kui vaja.

.nav{
    font-size:14px;
    background: #beffc9;
    border-radius:6px;

    margin:0 5px;

}

Näite pildid

Näide arvutis:
Arvuti Pilt

Näide mobiilis:
Arvuti Pilt