Display 3 posts with different HTML markup in Word

问题:

I want to be able to display 3 posts from the same category on my index.php page, but due to the way my site's HTML/CSS is coded I'm having some difficulty understanding the correct way to go about doing this using a loop (as the code for the divs being used are not the same for all three sections, it's using different CSS styles to achieve a layered effect/look ).

Here is the HTML code.

<div id="first-story" class="story">
<div class="content">
<h3 class="story-heading">Headline 1</h3>
    <ul>
       <li>Nullam sit amet scelerisque est. </li>   
       <li>Aliquam erat volutpat. Duis sed nisi nunc, faucibus rutrum mauris. </li>
       <li>Nullam iaculis lorem ut tortor ullamco per aliquet. Integer id leo non mauris pulvinar gravida vitae a enim. </li>
       <li>Nullam sit amet scelerisque est.</li>
    </ul>   
        <a class="learnmore" href="#"><img src="img/button-learnmore.png"></a></div>
    <div class="edge"></div>
</div>

<div id="second-story" class="story">
    <div class="content">
       <h3 class="story-heading">Headline 2</h3>
       <p>Paragraph text</p>
       <a class="learnmore" href="#"><img src="img/button-learnmore.png"></a></div>
    </div>
</div>

<div id="third-story" class="story">
    <div class="edge"></div>
    <div class="content">Headline 3</div>
            <ul>
               <li>List item</li>
            </ul>
            <a class="learnmore" href="#"><img src="img/button-learnmore.png"></a></div>
</div>

Any help would be very much appreciated.

回答1:

Quick, nasty and will get the job done (Obviously need to add the_content(); etc)

<?php 

$i = 1;
?>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<?php if ($i == 1) { ?>
    <div id="first-story" class="story">
        <div class="content">  
            <h3 class="story-heading"><?php the_title(); ?></h3>
            <ul>
               <li>Nullam sit amet scelerisque est. </li>   
               <li>Aliquam erat volutpat. Duis sed nisi nunc, faucibus rutrum mauris. </li>
               <li>Nullam iaculis lorem ut tortor ullamco per aliquet. Integer id leo non mauris pulvinar gravida vitae a enim. </li>
               <li>Nullam sit amet scelerisque est.</li>
            </ul>   
            <a class="learnmore" href="<?php the_permalink(); ?></a>"><img src="img/button-learnmore.png"></a></div>
            <div class="edge"></div>
        </div>
<?php } elseif ($i == 2) { ?>

                <div id="second-story" class="story">
                    <div class="content">
                       <h3 class="story-heading"><?php the_title(); ?></h3>
                       <p>Paragraph text</p>
                       <a class="learnmore" href="<?php the_permalink(); ?>"><img src="img/button-learnmore.png"></a></div>
                    </div>
                </div>
<?php } else { ?>
                <div id="third-story" class="story">
                    <div class="edge"></div>
                    <div class="content"><?php the_title(); ?></div>
                            <ul>
                               <li>List item</li>
                            </ul>
                            <a class="learnmore" href="<?php the_permalink(); ?>"><img src="img/button-learnmore.png"></a></div>
                </div>
<?php } ?>
    <?php $i++; ?>
    <?php endwhile; ?>
<?php endif; ?>