How To Display LI Posts With Number

I was doing my crazy Research  then i got a simple idea to create posts which are listed as numbers. So i did it and now im making tutorial. It is really cool when ideas work.
Now back to tutorial.

I'm using blogger but i am explaining more about WordPress that's some what weird, even i host WordPress blogs but i love blog spot too so i cant ignore this blogger.

Starting with steps.

Firstly i will explain you about the code which i created for pages and number.

<div class="services">
<h3><span>OUR SERVICES</span></h3>
<ol><?php query_posts('category_name=services&showposts=10'); ?>
<?php $i=1;?>

<?php while (have_posts()) : the_post(); ?>

    <li><div class="numberservices"><?php echo $i; ?></div><div class="servicesolnum"><h2> <?php echo get_the_title(); ?> </h2><?php the_excerpt(); ?></div></li>


<?php $i++?>
<?php endwhile; ?>
  </ol>
</div>

In the above code i have given numbering to each post by echoing it. Now i added background image for each number. It is the time to do some styling.

.services ol{
float:left;
margin:0px;
padding:0px;
list-style-position:inside;
}


.services ol li {
background: url("images/green.png") no-repeat scroll left 10px;
    color: #FFFFFF;
    float: left;
    font-size: 30px;
    font-weight: bold;
    list-style: none outside none;
    margin: 0;
    padding: 12px 0 0 15px;
    width: 425px;

}

Now styling has been completed. i did not explain actual process right? Add the php code in the page.php and css in style.css.