Pure CSS album

Javascript is being studied recently, and CSS is a little unfamiliar. It's time to get something to practice.

 
  
  
 
   
   
 
     6  
     5  
     4  
     3  
     2  
     1  
   
 
   
   
 
   
 
  
  
 

Please forgive me for my pity. Since Google album was walled, the space in the blog album was too tight. The above structure is very fixed, so it is easy to remember. It will be easier in the future. People who are familiar with the behavior can see at a glance that they want to use the anchor. If you do not know what the anchor is, Google it. The numbers in DT are a bit strange. They are written in reverse, and you will understand them soon.

<Br/> <! Doctype HTML> <br/> <title> pure CSS album by situ zhengmei </title> <br/> <meta charset = "UTF-8"/> <br/> <meta name = "keywords" content = "pure CSS album by situ zhengmei"/> <br/> <meta name = "Description" content = "pure CSS album by situ zhengmei"/> <br/> <DL> <br/> <DT> <br/> <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> <br/> </DT> <br/> <DD> <br/> <br/> <br/> <br/> <br/> <br/> <br/> </DD> <br/> </dl> <br/>

RunCode

People who frequently visit my blog may notice that the HTML code in the running box is concise and strange, which is very different from the webpage template generated by dreamweave. Rest assured that this is the verified HTML5 code. It doesn't matter whether there are HTML, head, body, and other labels.

I will first describe the future of the album. The size of the album is similar to that of one of these images, because we need to flip the page. It has a border. You don't need to use the border of DL. It has a flip bar, which is implemented by DT. The image display interface is implemented by dd. We can use absolute positioning to place the flip bar under the image. The image display page displays only one image at a time. overflow: hidden can be used to hide multiple images. In this way, the size of the album (excluding the border) is the size of the image plus the flip bar. Now each image is 160x120, and I set it to 160x24 in the flip bar (the width is the same). In other words, the width of DL is 160px and the height is 142px (we need to ensure that the album is rectangular, this is in line with our common sense .) We 'd better set a black border with a 2 PX width, because we have fixed the size of the image to hide the excess part. In other words, the right side and bottom side will be hidden at that time. In this way, it is very stereoscopic when it is combined with the original large border, as if the picture is embedded in the album, and there is a glass outside. Well, there are so many buttons on the flip bar, and then all float: Right.

 DL {/* album */position: relative; width: 160px; Height: 142px; Border: 10px solid # efefda;/* album border */} dd {/* album content display area, including the photo and the following flip bar */margin: 0; /* remove the default browser settings */padding: 0;/* remove the default browser settings */width: 160px; Height: 120px; overflow: hidden;/* focus, show only one image at a time */} IMG {border: 2px solid #000;/* increase the stereoscopic effect */} dt {/* flip bar */position: absolute; right: 0px; bottom: 0px;/* the above three steps are used to fix it under the image */width: 160px; Height: 22px; Background: # fbfbea;} A {float: right ;}

<Br/> <! Doctype HTML> <br/> <title> pure CSS album by situ zhengmei </title> <br/> <meta charset = "UTF-8"/> <br/> <meta name = "keywords" content = "pure CSS album by situ zhengmei"/> <br/> <meta name = "Description" content = "pure CSS album by situ zhengmei"/> <br/> <style type = "text/CSS"> <br/> DL {/* album */<br/> position: relative; <br/> width: 160px; <br/> Height: 142px; <br/> border: 10px solid # efefda; /* album border */<br/>}< br/> dd {/* content display area of the album, including the photo and the following flip bar */<br/> margin: 0;/* remove the default browser settings */<br/> padding: 0;/* remove the default browser settings */<br/> width: 160px; <br/> Height: 120px; <br/> overflow: hidden;/* emphasis, show only one image at a time */<br/>}< br/> IMG {<br/> border: 2px solid #000; /* Add stereoscopy */<br/>}< br/> dt {/* flip bar */<br/> position: absolute; <br/> right: 0px; <br/> bottom: 0px; <br/>/* the preceding three steps are used to fix the image below */<br/> width: 160px; <br/> Height: 22px; <br/> Background: # fbfbea; <br/>}< br/> A {<br/> float: right; <br/>}< br/> </style> <br/> <DL> <br/> <DT> <br/> <a href = "# indexb6"> 6 </a> <a href = "# indexb5"> 5 </a> <a href = "# indexb4"> 4 </a> <a href = "# indexb3 "> 3 </a> <a href =" # indexb2 "> 2 </a> <a href =" # indexb1 "> 1 </a> <br/> </DT> <br/> <DD> <br/> <br/> <br/> < <br/> <br/> <br/> </DD> <br/> </dl> <br/>

Run code

My God, I found that we were doing things very efficiently. All of a sudden, the album came out and clicked on the link to switch the picture. Why can I switch images ?! If we do not set overflow: hidden, the webpage actually has a status of up and down movement when you click an image. We can observe it through the scroll bar on the right. What does this mean? It means that the scrolltop of JavaScript works. Scrolltop is usually zero. When it is a positive number, the original visible area moves down. What if we fix the visible area and do not display the scroll bar ?! How can the following items be displayed on the top ?? Obviously, scrolltop turns to a negative number. Test by yourself. The logic is as follows.

Let's take a look at the link. Float: right has a side effect, that is, let the leftmost to the right of the few, so we have to write down the number. The final part is simple, just implement the UL level menu. For good looks, we add translucent effects and floating effects.

 
A {display: block;/* Let it have the box model */float: Right; margin: 2px;/* staggered lattice */width: 18px; /* Square */height: 18px; text-align: center;/* center display */color: # FFF;/* The default value is blue, therefore, you must override */Text-Decoration: none;/* remove the underline */Background: #666; filter: alpha (opacity = 70); opacity :. 7;} A: hover {Background: #000}
 

<Br/> <! Doctype HTML> <br/> <title> pure CSS album by situ zhengmei </title> <br/> <meta charset = "UTF-8"/> <br/> <meta name = "keywords" content = "pure CSS album by situ zhengmei"/> <br/> <meta name = "Description" content = "pure CSS album by situ zhengmei"/> <br/> <style type = "text/CSS"> <br/> DL {/* album */<br/> position: relative; <br/> width: 160px; <br/> Height: 142px; <br/> border: 10px solid # efefda; /* album border */<br/>}< br/> dd {/* content display area of the album, including the photo and the following flip bar */<br/> margin: 0;/* remove the default browser settings */<br/> padding: 0;/* remove the default browser settings */<br/> width: 160px; <br/> Height: 120px; <br/> overflow: hidden;/* emphasis, show only one image at a time */<br/>}< br/> IMG {<br/> border: 2px solid #000; /* Add stereoscopy */<br/>}< br/> dt {/* flip bar */<br/> position: absolute; <br/> right: 0px; <br/> bottom: 0px; <br/>/* the preceding three steps are used to fix the image below */<br/> width: 160px; <br/> Height: 22px; <br/> Background: # fbfbea; <br/>}< br/> A {<br/> display: block; /* Give It A Box Model */<br/> float: Right; <br/> margin: 2px;/* staggered lattice */<br/> width: 18px; /* Square */<br/> Height: 18px; <br/> text-align: center;/* center display */<br/> color: # FFF; /* The default value is blue, so be sure to rewrite */<br/> text-Decoration: none;/* remove the underline */<br/> Background: #666; <br/> filter: alpha (opacity = 70); <br/> opacity :. 7; <br/>}< br/> A: hover {<br/> background: #000 <br/>}< br/> </style> <br/> <DL> <br/> <DT> <br/> <a href = "# indexa6 "> 6 </a> <a href =" # indexa5 "> 5 </a> <a href =" # indexa4 "> 4 </a> <a href =" # indexa3 "> 3 </a> <a href =" # indexa2 "> 2 </a> <a href =" # indexa1 "> 1 </a> <br/> </DT> <br/> <DD> <br/> <br/> IMG id = "indexa2" name = "indexa2" src = "http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_002.jpg"/> <br/> <br/> <br/> <br/> <br/> </DD> <br /> </dl> <br/>

Run code

In addition to the flip pane, the finished product looks a little big because the image is too small. Firefox has some problems in implementing the new window opening mechanism. When we click the link, it runs back to the original page to find the corresponding anchor, instead of the anchor in the local window. However, you can rest assured that you will not make the album in the running box.

654321

Currently, it is compatible with the opera of Tian Sha.