神奇的css实现圆角效果的标签以及其他一些今天学的css标签

最新推荐文章于 2024-12-11 15:59:06 发布

大数据球球

最新推荐文章于 2024-12-11 15:59:06 发布

阅读量1.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： css html收藏文章标签： css

本文链接：https://blog.youkuaiyun.com/Q1059081877Q/article/details/45875477

html收藏同时被 2 个专栏收录

7 篇文章

订阅专栏

css

6 篇文章

订阅专栏

本文介绍了如何使用CSS来实现圆角标签效果，并调整了WordPress中上一页/下一页及上一篇/下一篇导航的显示方式。此外，还展示了如何通过媒体查询实现响应式布局，以及如何设置自定义的缩略图尺寸。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现圆角的标签 border-radus:5px; 这里的5根据自己的需要改变大小。

两个同类的标签选择其中一个进行修改：
.prev-next a:nth-child(2) {
margin: 0;
} 两个a标签第二个magin都为零。

// Previous/next page navigation.
   the_posts_pagination( array(
    'prev_text'          => __( 'Previous page', 'twentyfifteen' ),
    'next_text'          => __( 'Next page', 'twentyfifteen' ),
    'before_page_number' => '<span class="meta-nav screen-reader-text">' . __( 'Page', 'twentyfifteen' ) . ' </span>',
   ) );

//上一篇下一篇文章的导航
// Previous/next post navigation.
   the_post_navigation( array(
    'next_text' => '<button class="meta-nav" aria-hidden="true">' . __( 'Next', 'twentyfifteen' ) . '</button> ' ,//.
    // '<span class="screen-reader-text">' . __( 'Next post:', 'twentyfifteen' ) . '</span> ' .
    // '<span class="post-title">%title</span>',
    'prev_text' => '<button class="meta-nav" aria-hidden="true">' . __( 'Previous', 'twentyfifteen' ) . '</button> ',// .
    // '<span class="screen-reader-text">' . __( 'Previous post:', 'twentyfifteen' ) . '</span> ' .
    // '<span class="post-title">%title</span>',
   ) );

//响应怎么加，这里只是简单的响应，要多学习一些响应
/**
* 16.0 Media Queries
*/
/* max 1600px ------------------------------------*/
@media screen and (max-width: 1600px){
.img-loop a:nth-child(6){
  display:none;
}
.img-loop a{
  width:20%;
}
}
/* max 1030px ------------------------------------*/
@media screen and (max-width: 1030px) {
.img-loop a:nth-child(6),
.img-loop a:nth-child(5){
  display:none;
}
.img-loop a{
  width:25%;
}
}

//缩略图
add_image_size

add_image_size('video-img-size',356,250,true);//设置缩略图
get_post_meta($post->ID, 'thumbnail', true);

// Post thumbnail.
//$test = wp_get_attachment_url( get_post_thumbnail_id(get_the_ID()) );//得到原图的URL
//$thumb = wp_get_attachment_image_src( get_post_thumbnail_id(get_the_ID()), 'video-img-size' );//得到缩略图的URL地址。
//$url = $thumb['0'];
$post_id = get_the_ID();
$cat = get_the_category( $post_id );得到当期那文章的category
$cat[0]->name 得到当期那文章category比方说是Video Image

get_the_ID();得到当前文章的id；