Anekdootide kogumik - Konspekt

Minu ülesanne oli teha mobiilisõbralik veebileht, mis kuvaks anekdoote.

Töö jaoks kasutasin veebist juhendit ja PhpStorm'i.

Kood

Esileht anekdootideLeht.html

Esileht, peab kuvama päise, kus on navigeerimismenüü, kuvatud järjestamata loeteluna <ul> koos linkidega <a> teistele anekdootidele:

    
    <div id="header">
        <div class="nav">
            <ul>
                <li><a href="anekdoot.php">1. Eluline anekdoot</a></li>
                <li><a href="anekdoot2.php">2. Tavaline juhtum Valga Jakobi  tänaval</a></li>
                <li><a href="anekdoot3.php">3. L - Loogika</a></li>
            </ul>
        </div>
    </div>
    

Samas peab esileht kuvama ka esimese anekdooti:

    
    <div class="clear"></div>
        <h2>Eluline anekdoot</h2>
            <pre>
                "Kuidas elu on?"
                "Nagu mausoleumis. Elus ei ole, aga maha ka ei maeta."
            </pre>
    

Ja ei tohi unustada ka jalust:

    
    <div class="nav2">
        <p>Design by Ervin Püsijainen</p>
    </div>
    

Siis ma jagasin päise ja jalust eraldi failidesse, ning tegin eraldi .php failid iga anekdooti jaoks

    
        <?php
        require("p2is.php"); /* kuvab päise, failist "p2is.php"
        echo '<h2>(anekdooti nimi)</h2>';

        /* sisu (anekdoot) */

        require("jalus.php"); /* kuvab jalust, failist "jalus.php"
        ?>
    

Veebilehe kujunuds - CSS

Veebilehe kujunduse jaoks lisasin kausta faili "kujundus.css"

failis kujundasin pealkirju, tavateksti, päise ja jaluse

Kehatekst

    
    body{
        background: greenyellow;
        font-family:"Segoe Script MT", cursive;
    }
    

Päis

    
    #header{
        color: orangered;
        background-color: limegreen;
        border-radius: 20px;
        border: solid 3px black;
        padding: 10px;
    }
    

Navigatsioonimenüü

    
    ul li{
        padding: 10px;
    }

    ul li a{
        border: solid 2px black;
        padding: 4px;
        border-radius: 20px;
        text-decoration: none;

    }

    ul li a:hover{
        font-weight: bold;
        background-color: grey;
    }
    

Jalus

    
    .nav2{
        position: relative;
        bottom: 0;
        left: 0;
        width: 100%;

        padding: 1%;

        background-color: limegreen;
        border: solid black 2px;
        border-radius: 30px;
    }
    

Koodilõigud

    
    pre{
    font-family:"Segoe Script MT", cursive;
    }
    

Veebilehe mobiilivaade