Rijen om en om kleuren

Toelichting

Houd je forum, gastenboek of opsomming overzichtelijk door de verschillende entries om en om te kleuren. In dit script heb ik gebruik gemaakt van een <li> element, maar ditzelfde is natuurlijk toe te passen op bijvoorbeeld <tr> elementen.

Voorbeeld

Klik hier voor een voorbeeld

Script

Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<?php
ini_set('display_errors', 1);
error_reporting(E_ALL);
?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Jorendewit.nl - PHP Scripts - Rijen om en om kleuren</title>
    
    <link rel="stylesheet" href="../styles/default.css" type="text/css" media="screen" />
    
    <style type="text/css">
    
        <!--
        ul {
            width: 150px;
        }
        li {
            border: solid 1px #C8C8FF;
            list-style-type: none;
            margin-bottom: 5px;
            padding: 1px;
            color: #333;
        }
        li.bg0 {
            background-color: #99ccff;
        }
        li.bg1 {
            background-color: #3399ff;
        }
        -->
        
    </style>
    
</head>

<body>

    <div id="wrap">
        <p class="none small align-right"><a href="/view/22/">&lt;-- Terug naar Scripts</a></p>
        <h1>Rijen om en om kleuren</h1>
        
        <div id="info">
            <p>PHP versie: alle</p>
        </div>
        
        <?php
        $n = 0;
        echo '<ul>';
        
        // Een loop waaruit de verschillende rijen rollen.
        for($i = 1; $i <= 5; $i++)
        {
            $n ^= 1;
            echo '<li class="bg'.$n.'">Rij '.$i.'</li>'.PHP_EOL;
        }
        echo '</ul>';
        ?>
        
        
    </div>
    
</body>
</html>

Reacties