etru_RU

Valeria Allik Õpimapp | portfolio

Mobiilimalli järgi veebilehestik

—

by

admin
in

Millest see kood räägib?

See HTML-kood esindab veebilehte, mis kasutab päise(header) ja jaluse(footer) dünaamiliseks lisamiseks PHP-d. See sisaldab põhilist HTML-i struktuuri koos metamärgenditega reageerimise tagamiseks, linki välise CSS-faili kujundamiseks ja navigeerimismenüüd mitmete linkidega teistele lehtedele (anekdoodid).

Kood PHP : 

<!DOCTYPE html>
<html>
<head>
    <title>Anekdoodid</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8">
    <link href="style/Anekdod.css" rel="stylesheet" type="text/css" />
</head>
<body>

<?php
include('header.php');
?>

<!--navigeerimesmenuu-->
<nav>
    <ul>
        <li><a href="anekdoodid/a1.html">Anekdood N1</a></li>
        <li><a href="anekdoodid/a2.html">Anekdood N2</a></li>
        <li><a href="anekdoodid/a3.html">Anekdood N3</a></li>
        <li><a href="anekdoodid/a4.html">Anekdood N4</a></li>
        <li><a href="anekdoodid/a5.html">Anekdood N5</a></li>
    </ul>
</nav>

<div class="astyle">
    <p>Valige oma maitsele vastav anekdood</p>

</div>

<?php
include('footer.php');
?>



</body>
</html>

Kood CSS :

h1{
    text-align: center;
}

h2{
    text-align: center;
}

header {
    color: #11120D;
    background: linear-gradient(90deg, #565449, #D8CFBC);
    left: 0;
    width: 45%;
    text-align: center;
    border: solid 3pt white;
    border-radius: 100px;
    padding: 1%;
    margin: 0 auto;
    position: relative;
}
footer{
    color: #11120D;
    background: linear-gradient(90deg, #565449, #D8CFBC);
    left: 0;
    width: 45%;
    text-align: center;
    border: solid 3pt white;
    border-radius: 100px;
    padding: 1%;
    margin: 0 auto;
    position: relative;
}

nav ul {
    list-style-type: none; /* Remove bullet points */
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: black;
}

nav li {
    float: left;
}

nav li a {
    display: block;
    color: white;
    text-align: center;
    padding: 10px 12px;
    text-decoration: none;
}

nav li a:hover {
    background-color: #E6DDDA;
    color: black;
}

div#A1{
    padding: 2%;
    border: solid 1pt black;
    margin: 10px;
    text-align: center;
}

.astyle{
    padding: 2%;
    border: solid 1pt black;
    margin: 10px;
    text-align: center;

}

div#A2{
    padding: 2%;
    border: solid 1pt black;
    margin: 10px;
    text-align: center;
}

div#A3{
    padding: 2%;
    border: solid 1pt black;
    margin: 10px;
    text-align: center;
}

div#A4{
    padding: 2%;
    border: solid 1pt black;
    margin: 10px;
    text-align: center;
}

div#A5{
    padding: 2%;
    border: solid 1pt black;
    margin: 10px;
    text-align: center;
}

Tulemus :

Allikad :

Zone

Disain

Anekdoodid