今日文章目录

• 应用情境
• 事前准备
• CSS 说明
• 参考资料

应用情境

• 针对重复性的资料流中，指定其中几项做个别设定有几个方法：
  • 多组class命名：class= "共用设定 个别设定"
  • :nth-child():CSS指定同层第几个，也就是今天要练习的部分。
  • 练习范例：在手机版统一文上图下，电脑版则水平交错排列。

参考图片来源

事前准备

• HTML架构：.intro > .container > .introList > .introItem
• 可以注意到：这里的 .introItem都是是重复性的结构，图文交错是等等CSS排出来的，这样可以确保手机版排列统一性之外，结构易读性跟维护也比较容易。

<section class="intro">
  <div class="container">
    <ul class="introList">
      <li class="introItem">
        <img src="https://picsum.photos/400/300?random=1" alt="图文1">
        <div class="txt">
          <h3 class="subTitle">在电视上观赏。</h3>
          <p>
              Lorem ipsum dolor, sit amet consectetur adipisicing elit. Numquam minus possimus doloremque? Ipsa iste, laboriosam numquam accusamus error tenetur recusandae, itaque modi ullam placeat aperiam. Assumenda facere aspernatur earum quis!
          </p>
        </div>
      </li>
      <li class="introItem">
        <img src="https://picsum.photos/400/300?random=2" alt="图文2">
        <div class="txt">
          <h3 class="subTitle">下载您的节目以便离线观赏。</h3>
          <p>
              Lorem ipsum dolor, sit amet consectetur adipisicing elit. Numquam minus possimus doloremque? Ipsa iste, laboriosam numquam accusamus error tenetur recusandae, itaque modi ullam placeat aperiam. Assumenda facere aspernatur earum quis!
          </p>
        </div>
      </li>
      <li class="introItem">
        <img src="https://picsum.photos/400/300?random=3" alt="图文3">
        <div class="txt">
          <h3 class="subTitle">随处都能观赏。</h3>
          <p>
              Lorem ipsum dolor, sit amet consectetur adipisicing elit. Numquam minus possimus doloremque? Ipsa iste, laboriosam numquam accusamus error tenetur recusandae, itaque modi ullam placeat aperiam. Assumenda facere aspernatur earum quis!
          </p>
        </div>
      </li>
    </ul>
  </div>
</section>

CSS 说明

• 先上 codepen 练习范例：https://codepen.io/chen-chens/pen/zYzNLjp?editors=1000
• 这里我尝试用了两种方法达到图文交错的效果：

1. 第一种：inline-block + direction
   • 利用 inline-block 特性让图img(inline)文div(block) 在手机上垂直排列(width: 100%)，在电脑版水平排排站(图width:40% 文 width: 60%)。
   • 搭配 direction:针对 inline 物件的排列方向做 rtl(right to left) 与 ltr( left to right) 调整，即可完成图文交错效果。

2. 第二种：flex + row-reverse
   • 利用 flex+ flex-wrap 特性让子层(图、文)在手机上垂直排列(flex-direction: column)，在电脑版水平排排站(flex-direction: row)。
   • 搭配 row-reverse 针对偶数列做排列反转，即可完成图文交错效果。

参考资料

https://www.youtube.com/watch?v=aN7zFs_AT8s&t=1058s

明日预告：页签