1

我在 html 中有一定数量的图像，每个图像都带有一些文本和/或过渡。每组 img 和其他任何内容（文本、视频等）都在 div 内，以允许和简化定位。此外，每个图像都像杂志或书籍一样编号。让我们说有 30 页的争论。

然后从艺术部门，我收到一个新页面，这将是第四页，将后面的页面再移一页。此外，对于组织机构，img 文件也被重命名（即 img-20-jpeg 现在是 img-21-jpeg）

我正在寻找一种方法来避免在 html 和 css 中手动重命名每个 div、img、段落的类。

我试图忽略 img 源中的实际数字，并通过 nth-child 选择器将 css 样式引用到每个“页面”。此外，我试图将每组文本、效果等...与它的中间“页面”父级关联起来 ~.

到目前为止，我只在史诗般的头痛中取得了成功。

<div class="page">
  <img class="page" src="photo/img.001.jpeg" alt="1">
  <p class="text-page-1">
     some text
  </p>
</div>
<img class="page" src="photo/img.002.jpeg" alt="2">
<img class="page" src="photo/img.003.jpeg" alt="3">
<div class="page">
  <img class="page" src="photo/img.004.jpeg" alt="4">
  <video class= "video-page-4" src="video/4.mov" controls playsinline loop></video>
</div>
<div class="page">
  <img class="page" src="photo/img.005.jpeg" alt="5">
  <p class="text-page-5">
     some other text
  </p>
</div>
4

2 回答 2

0

几个想法。

  1. 避免编号；使用评论来跟踪。还可以更改硬编码类，例如text-page-1在类页面中获取一个段落：.page p或.page > p.
<!--page 1-->
<div class="page">
    <img src="photo/img.001.jpeg" alt="1">
    <p>
        some text
    </p>
</div>
<!--page 2-->
<div class="page">
    <img src="photo/img.0045.jpeg" alt="1">
    <p>
        some text
    </p>
</div>
  1. 使用老式编号。从 10 开始，然后增加 10，甚至 100。这样您就可以在不重新编号的情况下进行插入。
<div class="page">
    <img src="photo/img.10.jpeg" alt="1"> <!--start at 10.-->
    <p class="text-page-10"> <!--use class only if necessary-->
        some text
    </p>
</div>
<!--can insert a new page here using numbers 11-19.-->
<div class="page">
    <img src="photo/img.20.jpeg" alt="1">
    <p class="text-page-20">
        some text
    </p>
</div>
于 2019-09-25T21:10:39.587 回答
0

您可以使用此代码

    <!--page 1--> 
    <div class="page">
        <img class="page" src="photo/images/img1.jpeg" alt="1">
        <p class="text-page-1">some text</p>
    </div>
    <!--page 2-->
    <div class="page">
        <img class="page" src="photo/images/img2.jpeg" alt="2">
        <img class="page" src="photo/images/img3.jpeg" alt="3">
    </div>
    <!--page 3-->
    <div class="page">
        <img class="page" src="photo/images/img4.jpeg" alt="4">
        <video class= "video-page-4" src="video/4.mov" controls playsinline loop></video>
    </div>
    <!--page 4-->
    <div class="page">
        <img class="page" src="photo/images/img5.jpeg" alt="5">
        <p class="text-page-5">some other text</p>
    </div>

于 2019-09-26T10:48:42.957 回答