63311


初心者で初めて質問します。  
下記のURLのcodepenによるCSS のみでサムネイルナビ付きスライダーをコピペしたのですが  
画像に隙間ができてしまう原因をご教示頂ければ幸いです。他の動作には問題は有りません。  
宜しくお願いします。  
<https://digipress.info/tech/pure-css-slider-with-thumbnails/>

[code]

    body {
      background-color: #333;
      color: #ccc;
      text-align: center;
    }
    
    body a,
    body a:visited {
      color: #ccc;
      text-decoration: none;
    }
    
    body a:hover {
      color: #aaa;
    }
    
    .container {
      position: relative;
      margin: 0 auto;
      height: 40vw;
      display: -webkit-box;
      display: flex;
      -webkit-box-pack: center;
      justify-content: center;
      opacity: 0;
      -webkit-animation: mainFadeIn 2s forwards 1.8s;
      animation: mainFadeIn 2s forwards 1.8s;
    }
    
    .main-slider {
      position: relative;
      width: calc(100vw - 26vw);
      height: 100%;
      overflow: hidden;
    }
    
    .main-slider .slide {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    
    .main-slider .slide:target {
      z-index: 3;
      -webkit-animation: show 1.2s;
      animation: show 1.2s;
    }
    
    .main-slider .slide:target:first-of-type {
      z-index: 3;
    }
    
    .main-slider .slide:target:first-of-type .meta {
      -webkit-transform: translateX(-50px);
      transform: translateX(-50px);
      -webkit-filter: blur(5px);
      filter: blur(5px);
      opacity: 0;
    }
    
    .main-slider .slide:target .meta {
      -webkit-animation: showMeta 1.2s ease .9s forwards;
      animation: showMeta 1.2s ease .9s forwards;
    }
    
    .main-slider .slide:not(:target):not(:first-of-type) {
      -webkit-animation: hide 1.2s ease;
      animation: hide 1.2s ease;
    }
    
    .main-slider .slide:not(:target):not(:first-of-type) .meta {
      -webkit-animation: hideMeta 1s ease forwards;
      animation: hideMeta 1s ease forwards;
    }
    
    .main-slider .slide:first-of-type {
      z-index: 1;
    }
    
    .main-slider .slide:first-of-type .meta {
      -webkit-transform: translateX(0);
      transform: translateX(0);
      -webkit-filter: blur(0);
      filter: blur(0);
      opacity: 1;
    }
    
    .main-slider .slide .meta {
      position: absolute;
      top: calc(50% - 19px);
      left: 0;
      padding: 0 40% 0 2.4vw;
      color: #fff;
      text-align: left;
      -webkit-transform: translateX(-50px);
      transform: translateX(-50px);
      -webkit-filter: blur(5px);
      filter: blur(5px);
      opacity: 0;
    }
    
    .main-slider .slide .meta .title {
      font-size: 38px;
      font-weight: 800;
    }
    
    .main-slider .slide .meta .desc {
      margin-top: 20px;
      font-size: 15px;
    }
    
    .thumbnail-slider {
      position: relative;
      width: 26vw;
      height: 100%;
      line-height: 0;
      overflow-y: auto;
    }
    
    .thumbnail-slider::-webkit-scrollbar {
      width: 5px;
    }
    
    .thumbnail-slider::-webkit-scrollbar-track {
      background-color: rgba(255, 255, 255, 0.28);
    }
    
    .thumbnail-slider::-webkit-scrollbar-thumb {
      background-color: rgba(255, 255, 255, 0.44);
    }
    
    .thumbnail-slider .slide {
      position: relative;
      height: 20%;
      overflow: hidden;
    }
    
    .thumbnail-slider .slide:hover figure img {
      -webkit-transform: scale(1.1);
      transform: scale(1.1);
    }
    
    .thumbnail-slider .slide figure img {
      -webkit-transition: -webkit-transform .5s;
      transition: -webkit-transform .5s;
      transition: transform .5s;
      transition: transform .5s, -webkit-transform .5s;
    }
    
    .slide figure {
      height: 100%;
    }
    
    .slide figure img {
      position: relative;
      width: 100%;
      height: 100%;
      -o-object-fit: cover;
      object-fit: cover;
    }
    
    @-webkit-keyframes mainFadeIn {
      to {
        opacity: 1;
      }
    }
    
    @keyframes mainFadeIn {
      to {
        opacity: 1;
      }
    }
    
    @-webkit-keyframes show {
      0% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
      }
      100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
      }
    }
    
    @keyframes show {
      0% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
      }
      100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
      }
    }
    
    @-webkit-keyframes hide {
      0% {
        z-index: 2;
      }
      100% {
        z-index: 2;
      }
    }
    
    @keyframes hide {
      0% {
        z-index: 2;
      }
      100% {
        z-index: 2;
      }
    }
    
    @-webkit-keyframes showMeta {
      0% {
        -webkit-transform: translateX(-50px);
        transform: translateX(-50px);
        -webkit-filter: blur(5px);
        filter: blur(5px);
        opacity: 0;
      }
      100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        -webkit-filter: blur(0);
        filter: blur(0);
        opacity: 1;
      }
    }
    
    @keyframes showMeta {
      0% {
        -webkit-transform: translateX(-50px);
        transform: translateX(-50px);
        -webkit-filter: blur(5px);
        filter: blur(5px);
        opacity: 0;
      }
      100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        -webkit-filter: blur(0);
        filter: blur(0);
        opacity: 1;
      }
    }
    
    @-webkit-keyframes hideMeta {
      0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        -webkit-filter: blur(0);
        filter: blur(0);
        opacity: 1;
      }
      100% {
        -webkit-transform: translateX(-50px);
        transform: translateX(-50px);
        -webkit-filter: blur(5px);
        filter: blur(5px);
        opacity: 0;
      }
    }
    
    @keyframes hideMeta {
      0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        -webkit-filter: blur(0);
        filter: blur(0);
        opacity: 1;
      }
      100% {
        -webkit-transform: translateX(-50px);
        transform: translateX(-50px);
        -webkit-filter: blur(5px);
        filter: blur(5px);
        opacity: 0;
      }
    }
[/code]

[code]

    <div class="container">
      <ul class="main-slider">
        <li class="slide" id="slide-1">
          <figure><img src="https://drive.google.com/uc?export=view&amp;id=1sRjMAeYv2axSKgRPtLHyk7LaHne8K4oq" /></figure>
          <div class="meta">
            <p class="title">Elisa Cannon</p>
            <p class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          </div>
        </li>
        <li class="slide" id="slide-2">
          <figure><img src="https://drive.google.com/uc?export=view&amp;id=1Ido1e59DT4GltXbmnTEmfJjkGdLwslZK" /></figure>
          <div class="meta">
            <p class="title">Salvatore Wilson</p>
            <p class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          </div>
        </li>
        <li class="slide" id="slide-3">
          <figure><img src="https://drive.google.com/uc?export=view&amp;id=1eGcqYmliPjIdxGXxyk2BrC4-KtOtFXK9" /></figure>
          <div class="meta">
            <p class="title">Suzanne Flowers</p>
            <p class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          </div>
        </li>
        <li class="slide" id="slide-4">
          <figure><img src="https://drive.google.com/uc?export=view&amp;id=1p7Akjvwh-yMhErDMvDFKb7YxpERMMXtX" /></figure>
          <div class="meta">
            <p class="title">Evelyn Sanchez</p>
            <p class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          </div>
        </li>
        <li class="slide" id="slide-5">
          <figure><img src="https://drive.google.com/uc?export=view&amp;id=1VxA3ZpBI4MiIu11-6isv4KRNSxxoWtis" /></figure>
          <div class="meta">
            <p class="title">Kathleen Barton</p>
            <p class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          </div>
        </li>
        <li class="slide" id="slide-6">
          <figure><img src="https://drive.google.com/uc?export=view&amp;id=1HjtSyCgF-2i2uBFq6wT6DYe2Bu93WNLl" /></figure>
          <div class="meta">
            <p class="title">Eloise Harmon</p>
            <p class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          </div>
        </li>
        <li class="slide" id="slide-7">
          <figure><img src="https://drive.google.com/uc?export=view&amp;id=1m893qZj1ahmSXoChntbPQ8FynsF1fRTi" /></figure>
          <div class="meta">
            <p class="title">Jackie Butler</p>
            <p class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          </div>
        </li>
      </ul>
      <nav role="navigation">
        <ul class="thumbnail-slider">
          <li class="slide">
            <a href="#slide-1">
              <figure><img src="https://drive.google.com/uc?export=view&amp;id=1sRjMAeYv2axSKgRPtLHyk7LaHne8K4oq" /></figure>
            </a>
          </li>
          <li class="slide">
            <a href="#slide-2">
              <figure><img src="https://drive.google.com/uc?export=view&amp;id=1Ido1e59DT4GltXbmnTEmfJjkGdLwslZK" /></figure>
            </a>
          </li>
          <li class="slide">
            <a href="#slide-3">
              <figure><img src="https://drive.google.com/uc?export=view&amp;id=1eGcqYmliPjIdxGXxyk2BrC4-KtOtFXK9" /></figure>
            </a>
          </li>
          <li class="slide">
            <a href="#slide-4">
              <figure><img src="https://drive.google.com/uc?export=view&amp;id=1p7Akjvwh-yMhErDMvDFKb7YxpERMMXtX" /></figure>
            </a>
          </li>
          <li class="slide">
            <a href="#slide-5">
              <figure><img src="https://drive.google.com/uc?export=view&amp;id=1VxA3ZpBI4MiIu11-6isv4KRNSxxoWtis" /></figure>
            </a>
          </li>
          <li class="slide">
            <a href="#slide-6">
              <figure><img src="https://drive.google.com/uc?export=view&amp;id=1HjtSyCgF-2i2uBFq6wT6DYe2Bu93WNLl" /></figure>
            </a>
          </li>
          <li class="slide">
            <a href="#slide-7">
              <figure><img src="https://drive.google.com/uc?export=view&amp;id=1m893qZj1ahmSXoChntbPQ8FynsF1fRTi" /></figure>
            </a>
          </li>
        </ul>
      </nav>
    </div>
[/code]

テキストエディタ Dreamweaver CS6  
ブラウザ Chrome


CC BY-SA 4.0
2020-02-24T02:56:00.877
63309
2020-02-24T04:46:51.807
2020-02-24T03:12:01.030
32986
37940
question
html css
codepenのデモをコピペしたが画像に隙間ができる原因


**ユーザーエージェントスタイルシート**[ref](https://developer.mozilla.org/ja/docs/Web/CSS/Cascade#User-
agent_stylesheets)という、ブラウザがデフォルトで適用する装飾により、それらの余白が生じています。今回の場合は、以下に示した要素へ適用されている装飾によって余白が生じています:

  * `body` 要素の [`margin`](https://developer.mozilla.org/ja/docs/Web/CSS/margin) プロパティ
  * `ul` 要素の [`margin-block`](https://developer.mozilla.org/ja/docs/Web/CSS/margin-block), [`padding-inline`](https://developer.mozilla.org/ja/docs/Web/CSS/padding-inline), [`list-style`](https://developer.mozilla.org/ja/docs/Web/CSS/list-style) プロパティ
  * `figure` 要素の [`margin-block`](https://developer.mozilla.org/ja/docs/Web/CSS/margin-block), [`margin-inline`](https://developer.mozilla.org/ja/docs/Web/CSS/margin-inline) プロパティ

よって、これらのプロパティを打ち消すような装飾を指定することで、この問題は解決することが出来ます。

[code]

    body {
      margin: 0;
    }
    
    ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    
    figure {
      margin: 0;
    }
    
[/code]

[code]

    body {
      background-color: #333;
      color: #ccc;
      text-align: center;
    }
    
    body a,
    body a:visited {
      color: #ccc;
      text-decoration: none;
    }
    
    body a:hover {
      color: #aaa;
    }
    
    .container {
      position: relative;
      margin: 0 auto;
      height: 40vw;
      display: -webkit-box;
      display: flex;
      -webkit-box-pack: center;
      justify-content: center;
      opacity: 0;
      -webkit-animation: mainFadeIn 2s forwards 1.8s;
      animation: mainFadeIn 2s forwards 1.8s;
    }
    
    .main-slider {
      position: relative;
      width: calc(100vw - 26vw);
      height: 100%;
      overflow: hidden;
    }
    
    .main-slider .slide {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    
    .main-slider .slide:target {
      z-index: 3;
      -webkit-animation: show 1.2s;
      animation: show 1.2s;
    }
    
    .main-slider .slide:target:first-of-type {
      z-index: 3;
    }
    
    .main-slider .slide:target:first-of-type .meta {
      -webkit-transform: translateX(-50px);
      transform: translateX(-50px);
      -webkit-filter: blur(5px);
      filter: blur(5px);
      opacity: 0;
    }
    
    .main-slider .slide:target .meta {
      -webkit-animation: showMeta 1.2s ease .9s forwards;
      animation: showMeta 1.2s ease .9s forwards;
    }
    
    .main-slider .slide:not(:target):not(:first-of-type) {
      -webkit-animation: hide 1.2s ease;
      animation: hide 1.2s ease;
    }
    
    .main-slider .slide:not(:target):not(:first-of-type) .meta {
      -webkit-animation: hideMeta 1s ease forwards;
      animation: hideMeta 1s ease forwards;
    }
    
    .main-slider .slide:first-of-type {
      z-index: 1;
    }
    
    .main-slider .slide:first-of-type .meta {
      -webkit-transform: translateX(0);
      transform: translateX(0);
      -webkit-filter: blur(0);
      filter: blur(0);
      opacity: 1;
    }
    
    .main-slider .slide .meta {
      position: absolute;
      top: calc(50% - 19px);
      left: 0;
      padding: 0 40% 0 2.4vw;
      color: #fff;
      text-align: left;
      -webkit-transform: translateX(-50px);
      transform: translateX(-50px);
      -webkit-filter: blur(5px);
      filter: blur(5px);
      opacity: 0;
    }
    
    .main-slider .slide .meta .title {
      font-size: 38px;
      font-weight: 800;
    }
    
    .main-slider .slide .meta .desc {
      margin-top: 20px;
      font-size: 15px;
    }
    
    .thumbnail-slider {
      position: relative;
      width: 26vw;
      height: 100%;
      line-height: 0;
      overflow-y: auto;
    }
    
    .thumbnail-slider::-webkit-scrollbar {
      width: 5px;
    }
    
    .thumbnail-slider::-webkit-scrollbar-track {
      background-color: rgba(255, 255, 255, 0.28);
    }
    
    .thumbnail-slider::-webkit-scrollbar-thumb {
      background-color: rgba(255, 255, 255, 0.44);
    }
    
    .thumbnail-slider .slide {
      position: relative;
      height: 20%;
      overflow: hidden;
    }
    
    .thumbnail-slider .slide:hover figure img {
      -webkit-transform: scale(1.1);
      transform: scale(1.1);
    }
    
    .thumbnail-slider .slide figure img {
      -webkit-transition: -webkit-transform .5s;
      transition: -webkit-transform .5s;
      transition: transform .5s;
      transition: transform .5s, -webkit-transform .5s;
    }
    
    .slide figure {
      height: 100%;
    }
    
    .slide figure img {
      position: relative;
      width: 100%;
      height: 100%;
      -o-object-fit: cover;
      object-fit: cover;
    }
    
    @-webkit-keyframes mainFadeIn {
      to {
        opacity: 1;
      }
    }
    
    @keyframes mainFadeIn {
      to {
        opacity: 1;
      }
    }
    
    @-webkit-keyframes show {
      0% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
      }
      100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
      }
    }
    
    @keyframes show {
      0% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
      }
      100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
      }
    }
    
    @-webkit-keyframes hide {
      0% {
        z-index: 2;
      }
      100% {
        z-index: 2;
      }
    }
    
    @keyframes hide {
      0% {
        z-index: 2;
      }
      100% {
        z-index: 2;
      }
    }
    
    @-webkit-keyframes showMeta {
      0% {
        -webkit-transform: translateX(-50px);
        transform: translateX(-50px);
        -webkit-filter: blur(5px);
        filter: blur(5px);
        opacity: 0;
      }
      100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        -webkit-filter: blur(0);
        filter: blur(0);
        opacity: 1;
      }
    }
    
    @keyframes showMeta {
      0% {
        -webkit-transform: translateX(-50px);
        transform: translateX(-50px);
        -webkit-filter: blur(5px);
        filter: blur(5px);
        opacity: 0;
      }
      100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        -webkit-filter: blur(0);
        filter: blur(0);
        opacity: 1;
      }
    }
    
    @-webkit-keyframes hideMeta {
      0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        -webkit-filter: blur(0);
        filter: blur(0);
        opacity: 1;
      }
      100% {
        -webkit-transform: translateX(-50px);
        transform: translateX(-50px);
        -webkit-filter: blur(5px);
        filter: blur(5px);
        opacity: 0;
      }
    }
    
    @keyframes hideMeta {
      0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        -webkit-filter: blur(0);
        filter: blur(0);
        opacity: 1;
      }
      100% {
        -webkit-transform: translateX(-50px);
        transform: translateX(-50px);
        -webkit-filter: blur(5px);
        filter: blur(5px);
        opacity: 0;
      }
    }
    
    
    /* 追記 */
    
    body {
      margin: 0;
    }
    
    ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    
    figure {
      margin: 0;
    }
    
    /* 追記 */
[/code]

[code]

    <div class="container">
      <ul class="main-slider">
        <li class="slide" id="slide-1">
          <figure><img src="https://drive.google.com/uc?export=view&amp;id=1sRjMAeYv2axSKgRPtLHyk7LaHne8K4oq" /></figure>
          <div class="meta">
            <p class="title">Elisa Cannon</p>
            <p class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          </div>
        </li>
        <li class="slide" id="slide-2">
          <figure><img src="https://drive.google.com/uc?export=view&amp;id=1Ido1e59DT4GltXbmnTEmfJjkGdLwslZK" /></figure>
          <div class="meta">
            <p class="title">Salvatore Wilson</p>
            <p class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          </div>
        </li>
        <li class="slide" id="slide-3">
          <figure><img src="https://drive.google.com/uc?export=view&amp;id=1eGcqYmliPjIdxGXxyk2BrC4-KtOtFXK9" /></figure>
          <div class="meta">
            <p class="title">Suzanne Flowers</p>
            <p class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          </div>
        </li>
        <li class="slide" id="slide-4">
          <figure><img src="https://drive.google.com/uc?export=view&amp;id=1p7Akjvwh-yMhErDMvDFKb7YxpERMMXtX" /></figure>
          <div class="meta">
            <p class="title">Evelyn Sanchez</p>
            <p class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          </div>
        </li>
        <li class="slide" id="slide-5">
          <figure><img src="https://drive.google.com/uc?export=view&amp;id=1VxA3ZpBI4MiIu11-6isv4KRNSxxoWtis" /></figure>
          <div class="meta">
            <p class="title">Kathleen Barton</p>
            <p class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          </div>
        </li>
        <li class="slide" id="slide-6">
          <figure><img src="https://drive.google.com/uc?export=view&amp;id=1HjtSyCgF-2i2uBFq6wT6DYe2Bu93WNLl" /></figure>
          <div class="meta">
            <p class="title">Eloise Harmon</p>
            <p class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          </div>
        </li>
        <li class="slide" id="slide-7">
          <figure><img src="https://drive.google.com/uc?export=view&amp;id=1m893qZj1ahmSXoChntbPQ8FynsF1fRTi" /></figure>
          <div class="meta">
            <p class="title">Jackie Butler</p>
            <p class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          </div>
        </li>
      </ul>
      <nav role="navigation">
        <ul class="thumbnail-slider">
          <li class="slide">
            <a href="#slide-1">
              <figure><img src="https://drive.google.com/uc?export=view&amp;id=1sRjMAeYv2axSKgRPtLHyk7LaHne8K4oq" /></figure>
            </a>
          </li>
          <li class="slide">
            <a href="#slide-2">
              <figure><img src="https://drive.google.com/uc?export=view&amp;id=1Ido1e59DT4GltXbmnTEmfJjkGdLwslZK" /></figure>
            </a>
          </li>
          <li class="slide">
            <a href="#slide-3">
              <figure><img src="https://drive.google.com/uc?export=view&amp;id=1eGcqYmliPjIdxGXxyk2BrC4-KtOtFXK9" /></figure>
            </a>
          </li>
          <li class="slide">
            <a href="#slide-4">
              <figure><img src="https://drive.google.com/uc?export=view&amp;id=1p7Akjvwh-yMhErDMvDFKb7YxpERMMXtX" /></figure>
            </a>
          </li>
          <li class="slide">
            <a href="#slide-5">
              <figure><img src="https://drive.google.com/uc?export=view&amp;id=1VxA3ZpBI4MiIu11-6isv4KRNSxxoWtis" /></figure>
            </a>
          </li>
          <li class="slide">
            <a href="#slide-6">
              <figure><img src="https://drive.google.com/uc?export=view&amp;id=1HjtSyCgF-2i2uBFq6wT6DYe2Bu93WNLl" /></figure>
            </a>
          </li>
          <li class="slide">
            <a href="#slide-7">
              <figure><img src="https://drive.google.com/uc?export=view&amp;id=1m893qZj1ahmSXoChntbPQ8FynsF1fRTi" /></figure>
            </a>
          </li>
        </ul>
      </nav>
    </div>
[/code]


CC BY-SA 4.0
2020-02-24T03:26:38.567
63311
2020-02-24T03:26:38.567
32986
63309
answer