html 邮政滑块猫头鹰

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了html 邮政滑块猫头鹰相关的知识,希望对你有一定的参考价值。

.cas-block {
    text-align: center;
}
h3.pname{
    font-size: 20px;
    font-weight: bold;
}
.cas-block a{
    font-size: 15px;
    text-transform: capitalize;
    font-weight: bold;
    color:#2e9aed;
        
}
p.postdate {
    font-size: 16px;
    color: #a6a4a4;
    font-weight: bold;
    margin: 0;
}
<section class="sec2 sectionpadd">

	<div class="row sect">
	<h2>Looking for more information?</h2>
<div class="section-title-bottom-line"></div>

	
<br>
	<!-- Set up your HTML -->

</div>

<div class="row">
	<div class="grrid">

	<?php
	$query = new WP_Query( array( 'post_type' => 'post' ) );

if ( $query->have_posts() ) : ?>
<div id="carousel03"  class="owl-carousel owl-theme">
    <?php while ( $query->have_posts() ) : $query->the_post(); ?>


     <div class="cas-block">
        
            <div class="boxpadd">
              <p class="postdate"><?php the_time('F j, Y') ?></p>
           <h3 class="pname"><?php the_title(); ?></h3>
           <?php 
 // Final Codes
$content = get_the_content();
$trimmed_content = wp_trim_words( $content, 25, '...' );

echo '<p>'.$trimmed_content.'</p>';
            ?>

            <a href="<?php the_permalink(); ?>">Read more</a>

           </div>
           <div class="clear"></div>
        </div>


    <?php endwhile; wp_reset_postdata(); ?>
    </div> <!-- owl -->
<!-- show pagination here -->
<?php else : ?>
    <!-- show 404 error here -->
<?php endif; ?>

</div>
</div>

</section>

以上是关于html 邮政滑块猫头鹰的主要内容,如果未能解决你的问题,请参考以下文章

我想与滑块一起滑动/移动猫头鹰点

2 行猫头鹰旋转木马或 BX 滑块

text 猫头鹰滑块

javascript 猫头鹰滑块

html 样品猫头鹰转盘/滑块

css 猫头鹰横幅(滑块)