CSS photo album

I have been studying JavaScript recently, and CSS is a bit unfamiliar. It’s time to get something to practice your hands on.

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

Please forgive me for being stingy. Since Google Photos has been blocked, the space in the Blog Park photo album is really tight. The above structure is very fixed, and everyone can just memorize it by rote. It will be easier if you have ideals in the future. Those who are familiar with it will recognize at a glance that anchor points need to be used. If you don’t know what an anchor point is, please google it. The numbers in dt are a bit strange. They are written upside down. You will understand soon.

People who often visit my blog may notice that the HTML code of my run box is very concise and strange, and it is very different from the web page template generated by Dreamweave. Don’t worry, this is HTML5 code that has passed verification. It doesn’t matter if there are html, head, body and other tags.

Let me first describe to you what the photo album will look like in the future. The album will be about the same size as one of these images because we're going to create a page-turning effect. It has a border, which is implemented using dl's border without even thinking about it. It has a page turning bar, implemented by dt. The image display interface is implemented by dd. We can use absolute positioning to place the page turning bar below the image. The picture display interface only displays one picture at a time, and we can use overflow:hidden to hide the multi-point parts. In this way, the size of the album (excluding the border) is the size of the picture plus the page turning bar. Now each picture is 160 x 120, and I set the page turning bar to 160 x 24 (the same width). In other words, the width of dl is 160px and the height is 142px (we need to ensure that the album is rectangular, which is in line with our common sense in life. ) We'd better also set a 2px wide black border on the image, because we have fixed the size of the image and hide the excess part. In other words, the right and bottom sides will be hidden by then. When combined with the original large frame, it has a very three-dimensional effect, as if the picture is embedded in the album with a piece of glass outside. Okay, that’s all for now. Let’s talk about it later after the buttons in the page turning bar are pinned. All of them are float:right.

  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 my god, I found that we are so efficient in doing things. The photo album is organized in one go, and you can switch pictures by clicking on the link. Do you understand why you can switch pictures? ! If we do not set overflow:hidden, the web page will actually move up and down when clicking on the image, which we can observe through the scroll bar on the right. What does this mean? It means that the scrollTop of javascript has taken effect. scrollTop is usually zero. When it is a positive number, things in the original visual area are shifted downwards. What if we fix the visual area and don't display the scroll bar? ! How can the things below be displayed above? ? The answer is obvious, scrollTop becomes a negative number at this time. Test it yourself, the logic is like this.

Let's look at the links again. Float:right has a side effect, which is to make the leftmost one run to the right of the right ones, so our numbers have to be written backwards. The final finishing part is very simple, just implement it as you would to implement the ul horizontal menu. To make it look better, we add translucency and suspension effects.

 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
  }

The finished product is very nice and elegant, except that the page turning bar is a bit big due to the small picture. Because Firefox has some problems with the mechanism for opening new windows, when we click on a link, it runs back to the original page to find the corresponding anchor point, instead of the anchor point on the local window. But don’t worry, when you make a photo album, you definitely won’t make it in the running box.

• 654321

• 

#Now all are compatible except for Tiansha's opera.

For more CSS photo album related articles, please pay attention to the PHP Chinese website!