CSS-Fotoalbum

Ich habe kürzlich JavaScript studiert und CSS ist mir etwas unbekannt. Es ist Zeit, sich etwas zum Üben zu besorgen.

<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>

Bitte verzeihen Sie mir, dass ich geizig bin. Da Google Fotos gesperrt wurde, ist der Platz im Blog-Album wirklich knapp. Die obige Struktur ist sehr fest und jeder kann sie sich einfach auswendig merken. Es wird in Zukunft einfacher sein, wenn man Ideale hat. Wer sich damit auskennt, erkennt auf den ersten Blick, dass Ankerpunkte genutzt werden müssen. Wenn Sie nicht wissen, was ein Ankerpunkt ist, googeln Sie ihn bitte. Die Zahlen in dt sind etwas seltsam. Sie werden es bald verstehen.

Leuten, die meinen Blog häufig besuchen, fällt möglicherweise auf, dass der HTML-Code meiner Runbox sehr prägnant und seltsam ist und sich stark von der von Dreamweave generierten Webseitenvorlage unterscheidet. Keine Sorge, dies ist HTML5-Code, der die Überprüfung bestanden hat. Es spielt keine Rolle, ob HTML-, Head-, Body- und andere Tags vorhanden sind.

Lassen Sie mich Ihnen zunächst ein Bild davon geben, wie das Fotoalbum in Zukunft aussehen wird. Das Album wird ungefähr die gleiche Größe wie eines dieser Bilder haben, da wir einen Umblättereffekt erzeugen werden. Es verfügt über eine Grenze, die mithilfe der Grenze von dl implementiert wird, ohne darüber nachzudenken. Es verfügt über eine Umblätterleiste, implementiert von dt. Die Bildanzeigeschnittstelle wird von dd implementiert. Wir können die Seitenumblätterleiste mithilfe der absoluten Positionierung unter dem Bild platzieren. Die Bildanzeigeschnittstelle zeigt jeweils nur ein Bild an, und wir können overflow:hidden verwenden, um die Mehrpunktteile auszublenden. Auf diese Weise entspricht die Größe des Albums (ohne Rand) der Größe des Bildes plus der Umblätterleiste. Jetzt ist jedes Bild 160 x 120 groß und ich habe die Umblätterleiste auf 160 x 24 eingestellt (gleiche Breite). Mit anderen Worten, die Breite von dl beträgt 160 Pixel und die Höhe 142 Pixel (wir müssen sicherstellen, dass das Album rechteckig ist). , was unserem gesunden Menschenverstand entspricht) Wir sollten auch einen 2 Pixel breiten schwarzen Rand auf dem Bild festlegen, da wir die Größe des Bildes festgelegt und den überschüssigen Teil ausgeblendet haben Die Unterseiten werden dann ausgeblendet. In Kombination mit dem originalen großen Rahmen wirkt es sehr dreidimensional, als ob das Bild mit einer Glasscheibe außen in das Album eingebettet wäre. Okay, fangen wir damit an. Lassen Sie uns darüber reden, nachdem die Schaltflächen in der Umblätterleiste angeheftet sind.

  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 mein Gott, ich finde, dass wir die Dinge so effizient erledigen, und die Bilder können durch Klicken auf den Link gewechselt werden. Verstehen Sie, warum Sie Bilder wechseln können? ! Wenn wir overflow:hidden nicht setzen, bewegt sich die Webseite beim Klicken auf das Bild tatsächlich nach oben und unten, was wir durch die Bildlaufleiste rechts beobachten können. Was bedeutet das? Dies bedeutet, dass scrollTop von Javascript wirksam wird. scrollTop ist normalerweise Null. Wenn es eine positive Zahl ist, werden Dinge im ursprünglichen visuellen Bereich nach unten verschoben. Was passiert, wenn wir den visuellen Bereich korrigieren und die Bildlaufleiste nicht anzeigen? ! Wie können die Dinge unten oben angezeigt werden? ? Die Antwort liegt auf der Hand: scrollTop wird zu diesem Zeitpunkt negativ. Testen Sie es selbst, die Logik ist so.

Schauen wir uns die Links noch einmal an. Float:right hat einen Nebeneffekt, der darin besteht, dass der ganz linke Link nach rechts vom rechten Link verläuft, sodass unsere Zahlen rückwärts geschrieben werden müssen. Der abschließende Teil ist sehr einfach. Implementieren Sie ihn einfach so, wie Sie das horizontale UL-Menü implementieren würden. Um es besser aussehen zu lassen, fügen wir Transluzenz- und Schwebeeffekte hinzu.

 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
  }

Das fertige Produkt ist sehr schön und elegant, außer dass die Umblätterleiste aufgrund des kleinen Bildes etwas zu groß ist. Da Firefox einige Probleme mit dem Mechanismus zum Öffnen neuer Fenster hat, kehrt es beim Klicken auf einen Link zur Originalseite zurück, um den entsprechenden Ankerpunkt zu finden, und nicht den Ankerpunkt im lokalen Fenster. Aber keine Sorge, wenn du ein Fotoalbum erstellst, wirst du es definitiv nicht in die Laufbox schaffen.

• 654321

• 

Jetzt sind alle kompatibel, außer Tianshas Oper.

Weitere Artikel zum Thema CSS-Fotoalben finden Sie auf der chinesischen PHP-Website!