Ads Top

Alternate Color Boxes with css

We can create the color box from CSS. Currently, CSS3 is being used for Alternate color boxes. You can feel as given below image:


HTML Code:
<div class="cssBox">

    <ul>

        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
 

CSS Code: 
<style>

    * {

        margin: 0;
        padding: 0;
    }
    ul {
        list-style: none;
    }
    .cssBox {
        margin: 0 auto;
        width: 720px;
    }
    .cssBox li {
        background: #ccc;
        float: left;
        margin: 1px 1px 0 0;
        height: 100px;
        width: 100px;
    }
    .cssBox li:nth-of-type(even) {
        background: #eee;
    }
</style>
 

No comments:

Copyright Reserved to Anything Learn. Powered by Blogger.