添加一个简单的请求css - Add a simple request css

Add a simple request css

本文关键字：简单请求 css 一个添加 | 更新日期: 2024-01-17

抱歉我的英语不好

我有这个代码php

我想在代码中添加css

<?php
$post_objects = get_field('awncn');
if( $post_objects ): ?>
    <ul>
    <?php foreach( $post_objects as $post): ?>
        <?php setup_postdata($post); ?>
        <li>
            <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
   <?php echo get_the_post_thumbnail( $page->ID, 'thumbnail' ); ?>
            <h1><?php echo apply_filters( 'the_title', $page->post_title, $page->ID ); ?></h1>
        </li>
    <?php endforeach; ?>
    </ul>
    <?php wp_reset_postdata(); ?>
<?php endif;
?>

我想要这么漂亮的形状http://prntscr.com/aqf4ht

您必须稍微重新排列标记以使其具有风格，但除此之外，事情看起来很简单：

html标记：

<div class="awncn">
    <ul>
        <li>
            <figure>
                <img width="150" height="150" 
                     src="http://i1.wp.com/drama-online.tv/wp-content/uploads/2016/03/Screenshot_9.png?resize=150%2C150" 
                     class="attachment-thumbnail size-thumbnail wp-post-image" 
                     alt="Screenshot_9">
                <figcaption>
                    <a href="http://drama-online.tv/dramanews/23232323/">23232323</a>
                </figcaption>
            </figure>
        </li>
        <li>
            <figure>
                <img width="150" height="150" 
                     src="http://i2.wp.com/drama-online.tv/wp-content/uploads/2016/03/21006-207x272.jpg?resize=150%2C150" 
                     class="attachment-thumbnail size-thumbnail wp-post-image" 
                     alt="21006-207x272">
                <figcaption>
                    <a href="http://drama-online.tv/dramanews/thrthtrhrthrthtrh/">thrthtrhrthrthtrh</a>
                </figcaption>
            </figure>
        </li>
    </ul>
</div>

css样式规则：

li {
  display: inline-block;
}
figure {
  margin: 5px;
  border: 1px solid lightgray;
}
figure figcaption {
  width: 100%;
  background-color: lightgray;
  text-align: center;
  padding: 5px 0;
}
figure figcaption a {
  color: whitesmoke;
  font-weight: bold;
  text-decoration: none;
}

这是你发布的小提琴手的修改版本：

https://jsfiddle.net/ssq0fu9p/2/