Album photo CSS

J'ai étudié JavaScript récemment et CSS est un peu inconnu. Il est temps de trouver quelque chose sur lequel vous entraîner.

<dl>
  <dt>
    <a href="#index6">6</a><a href="#index5">5</a><a href="#index4">4</a><a href="#index3">3</a><a href="#index2">2</a><a href="#index1">1</a>
  </dt>
  <dd>
    <img id="index1" src="https://img.php.cn/upload/article/000/000/013/4bf6ad50455219fb4dbd78e1710b7b78-0.jpg" />
    <img id="index2" src="https://img.php.cn/upload/article/000/000/013/4bf6ad50455219fb4dbd78e1710b7b78-1.jpg" />
    <img id="index3" src="https://img.php.cn/upload/article/000/000/013/4bf6ad50455219fb4dbd78e1710b7b78-2.jpg" />
    <img id="index4" src="https://img.php.cn/upload/article/000/000/013/4bf6ad50455219fb4dbd78e1710b7b78-3.jpg" />
    <img id="index5" src="https://img.php.cn/upload/article/000/000/013/4bf6ad50455219fb4dbd78e1710b7b78-4.jpg" />
    <img id="index6" src="https://img.php.cn/upload/article/000/000/013/e3e768bc0ad403b7acd7b90162e40116-5.jpg" />
  </dd>
</dl>

Pardonnez-moi d'être avare. Depuis que Google Photos est bloqué, l'espace dans l'album du blog est vraiment restreint. La structure ci-dessus est très fixe et tout le monde peut la mémoriser par cœur. Ce sera plus facile si vous avez des idéaux dans le futur. Ceux qui le connaissent reconnaîtront d'un seul coup d'œil que des points d'ancrage doivent être utilisés. Si vous ne savez pas ce qu’est un point d’ancrage, recherchez-le sur Google. Les chiffres en dt sont un peu étranges. Ils sont écrits à l'envers. Vous comprendrez bientôt.

Les personnes qui visitent souvent mon blog remarqueront peut-être que le code HTML de ma boîte d'exécution est très concis et étrange, et qu'il est très différent du modèle de page Web généré par Dreamweave. Ne vous inquiétez pas, il s'agit d'un code HTML5 qui a réussi la vérification. Peu importe s'il y a des balises HTML, head, body et autres.

Laissez-moi d'abord vous donner une idée de ce à quoi ressemblera l'album photo dans le futur. L'album aura à peu près la même taille qu'une de ces images car nous allons créer un effet de rotation de page. Il a une bordure, qui est implémentée en utilisant la bordure de dl sans même y penser. Il dispose d'une barre de rotation de page, implémentée par dt. L'interface d'affichage de l'image est implémentée par dd. Nous pouvons utiliser le positionnement absolu pour placer la barre de rotation de page sous l'image. L'interface d'affichage d'image n'affiche qu'une seule image à la fois, et nous pouvons utiliser overflow:hidden pour masquer les parties multipoints. De cette façon, la taille de l'album (hors bordure) correspond à la taille de l'image plus la barre de changement de page. Maintenant, chaque image mesure 160 x 120 et j'ai réglé la barre de changement de page sur 160 x 24 (la même largeur). En d'autres termes, la largeur de dl est de 160 px et la hauteur est de 142 px (nous devons nous assurer que l'album est rectangulaire). , ce qui est conforme à notre bon sens dans la vie. ) Nous ferions mieux également de définir une bordure noire de 2 pixels de large sur l'image, car nous avons fixé la taille de l'image et masqué la partie excédentaire. les côtés inférieurs seront alors masqués. Lorsqu'il est combiné avec le grand cadre d'origine, il donne une impression très tridimensionnelle, comme si l'image était intégrée dans l'album avec un morceau de verre à l'extérieur. D'accord, commençons par ceci. Parlons-en une fois que les boutons de la barre de changement de page sont épinglés.

  dl {/*相册*/
    position:relative;
    width:160px;
    height:142px;
    border:10px solid #EFEFDA;/*相册边框*/
  }
  dd {/*相册的内容显示区，包含相片与下面的翻页栏*/
    margin:0;/*去除浏览器的默认设置*/
    padding:0;/*去除浏览器的默认设置*/
    width:160px;
    height:120px;
    overflow:hidden;/*重点，让每次只显示一张图片*/
  }
  img {
    border:2px solid #000;/*增加立体感*/
  }
  dt {/*翻页栏*/
    position:absolute;
    right:0px;
    bottom:0px;
    /*上面三步是用于把它固定于图片下方*/
    width:160px;
    height:22px;
    background:#FBFBEA;
  }
  a {
     float:right;
  }

Oh mon Dieu, j'ai trouvé que nous sommes si efficaces pour faire les choses. L'album photo a été créé en une seule fois, et vous pouvez changer de photo en cliquant sur le lien. Comprenez-vous pourquoi vous pouvez changer d'image ? ! Si nous ne définissons pas overflow:hidden, la page Web se déplacera de haut en bas en cliquant sur l'image, ce que nous pouvons observer grâce à la barre de défilement à droite. Qu'est-ce que cela signifie? Cela signifie que le scrollTop de javascript prend effet. scrollTop vaut généralement zéro. Lorsqu'il s'agit d'un nombre positif, les éléments de la zone visuelle d'origine sont décalés vers le bas. Et si nous réparions la zone visuelle et n'affichons pas la barre de défilement ? ! Comment les éléments ci-dessous peuvent-ils être affichés ci-dessus ? ? La réponse est évidente, scrollTop devient un nombre négatif à ce moment-là. Testez-le vous-même, la logique est la suivante.

Regardons à nouveau les liens. Float:right a un effet secondaire, qui est de faire passer celui le plus à gauche à droite de ceux de droite, donc nos nombres doivent être écrits à l'envers. La partie de finition finale est très simple, il suffit de l'implémenter comme vous le feriez pour implémenter le menu horizontal ul. Pour le rendre meilleur, nous ajoutons des effets de translucidité et de suspension.

 a {
    display:block;/*让其拥有盒子模型*/
    float:right;
    margin:2px;/*错开格子*/
    width:18px;/*呈正方形*/
    height:18px;
    text-align:center;/*居中显示*/
    color:#fff;/*默认是蓝色，所以一定要重写*/
    text-decoration:none;/*消除下划线*/
    background:#666;
    filter:alpha(opacity=70);
    opacity:.7;
  }
  a:hover {
    background:#000
  }

Le produit fini est très joli et élégant sauf que la barre de tournage des pages est un peu grande à cause de la petite image. Parce que Firefox a quelques problèmes avec le mécanisme d'ouverture de nouvelles fenêtres, lorsque l'on clique sur un lien, il revient à la page d'origine pour trouver le point d'ancrage correspondant, au lieu du point d'ancrage sur la fenêtre locale. Mais ne vous inquiétez pas, lorsque vous créez un album photo, vous ne le ferez certainement pas dans la boîte en cours d'exécution.

• 654321

• 

Maintenant, tous sont compatibles sauf l'opéra de Tiansha.

Pour plus d'articles sur les albums photo CSS, veuillez faire attention au site Web PHP chinois !