(12) design electronic album with CSS {next}

This study material explains:

Continuing the previous study, the importance of using CSS to format electronic albums and to emphasize "box model, standard flow, floating and positioning" is still important.

The " array mode electronic album " introduced in the previous study material is better if you can also see the details. If you can appear when the mouse pointer through a message box, and display the text content, the mouse left the message box automatically disappears, so that not only the page is very concise, but also convenient for visitors to grasp the information quickly.

1, "the mouse pointer through the dynamic appearance of text message" electronic album

Look first:

, you can see that when the mouse pointer passes through the fourth picture in the first row, a detail box appears below it, and the style of the message box is the same as the one in the single-column mode electronic album described in the previous learning material.

Below continue to refer to the previous study material in the " Simple Case " in the {HTML section of the basic framework} to explain, the details of the simple case please go to the previous study material to get, here do not do in detail ....

The following begins to add a CSS file named "Array2.css", which is actually added on the basis of the "single-column mode" CSS retouching section:(the added part of the CSS decoration is shown in pink)

Div.pic{/*set each div to a fixed height and width, add a left float, and use margin to separate the adjacent Div*/Height:160px;width:160px;/*the size of each picture block*/margin:5px;float: Left;/*Float left*/}div.pic img{/*set the IMG element in the Div, that is, the border of the image to none, because the image is in the link, and if you do not remove the border, the default coarse border will appear, affecting aesthetics. */Border:None;}Div.ls{background:URL (framels.jpg) no-repeat Center;/*background of the horizontal picture*/}div.pt{background:URL (framept.jpg) no-repeat Center;/*the background of the vertical picture*/}div.ls img{/*Horizontal Picture*/  /*The image is set to a fixed width, height, in order to match the newly added background map, so that the picture looks more beautiful*/margin:0px;Height:90px;width:135px;}div.pt img{/*Vertical Picture*/margin:0px;Height:135px;width:90px;}Div.ls a{Display:Block;/*defined as a block element*/padding:34px 14px 36px 11px;/*extend a hyperlink area to the entire background block*/}div.pt a{Display:Block;padding:11px 36px 14px 34px;/*extend a hyperlink area to the entire background block*/}div.ls a:hover{/*Modify background image when mouse passes*/background:URL (framels_hover.jpg) no-repeat Center;/*a horizontal picture with a width greater than height adds an orange background when the mouse pointer passes over it: 90*125 pixels in transverse direction*/}div.pt a:hover{background:URL (framept_hover.jpg) no-repeat Center;/*a horizontal picture with a width greater than height adds an orange background when the mouse pointer passes over it: 90*125 pixels in transverse direction*/}Div.pic ul{Display:None; }div.pic:hover ul{Display:block;   Position:absolute;    }div.pic ul{/* Set the style of photo information */margin:-5px 0 0 0px; padding:0    0 0 0.5em;    Background: #dceeff;    border:2px solid #a7d5ff;    font-size:12px;    List-style:none;   Font-family:arial, Helvetica, Sans-serif; }Div.pic Li{Line-height:1.2em;margin:0;padding:0;}div.pic Li.title{Font-weight:Bold;Padding-top:0.4em;Padding-bottom:0.2em;Border-bottom:1px solid #a7d5ff;Color:#004586;}div.pic Li.catno{Color:#0068c9;margin:0 2px 0 6em;Padding-left:5px;Border-left:1px solid #a7d5ff; }div.pic Li.price{Color:#0068c9;Font-style:Italic;margin:-1.2em 2px 0 11em;Padding-left:5px;Border-left:1px solid #a7d5ff;}

(1)

Div.pic:hover ul {    display:block;     position:absolute;   }

The meaning of the code is:

{1} When the mouse pointer passes through the div of a photo, the display property of the UL list is changed to block, that is, from hidden to normal mode;

{2} Sets the absolute positioning and the UL out of the standard stream.

(2)

Div.pic ul {                            /**/    margin:-5px 0 0 0px;     Padding:0 0 0 0.5em;     background:#dceeff;     Border:2px solid #a7d5ff;     font-size:12px;     list-style:none;     font-family:Arial, Helvetica, Sans-serif;   }

The meaning of the code is: adjust the position of the UL, so that each UL list closer to the photo, the rest of the other simple here do not explain.

：

2, "Two-way Linkage mode" electronic album

The previous introduction of each picture of the "description of the text content" are relatively small, not a few words, but in reality for each picture of the description of the text content may be more, so have to design a new layout for electronic album, that is the next introduction of the "bidirectional linkage mode." First look at the picture, say:

It is very intuitive to see that the image and description text in the page are completely separated and arranged, so how do they relate to each other? In fact, the " Simple Case " in the {HTML part of the basic framework} "does not require big changes, still in a div contains the image and text content, here is to assign each div a unique ID."

Let's take a div and explain it:

id= "C0">        <a href= "photo/m01.jpg" class= "TN" ></a>        <ul>            <li class= "title" > Keng Tong Village * Chrysanthemum </li>            <li class= "Info" > here with the explanatory text. Not only when the mouse pointer is over an image, the image will change the background, and the corresponding image will change the background when the mouse pointer is over a piece of text. </li>        </ul>    </div>

The code does not change much, just add the id attribute in the DIV tag settings, the page total of 8 Div, followed by "C0~c7".

After the HTML section has been modified, the above effects are designed for the CSS retouching section:

(1) Absolute positioning of all images, setting location:

Div.pic a{position:Absolute; }#c0 a{Top:0; Left:0;}#c1 a{Top:0; Left:160px;}#c2 a{Top:0; Left:320px;}#c3 a{Top:0; Left:480px;}#c4 a{Top:160px; Left:0px;}#c5 a{Top:160px; Left:160px;}#c6 a{Top:160px; Left:320px;}#c7 a{Top:160px; Left:480px;}div.pic img{Border:None; }

{1} to separate the images in each div, it is clear that only absolute positioning is used, so all the images in the Div are set to absolute positioning;

{2} Because the image is set to absolute positioning without setting any one of top, bottom, left, and right, the box that is out of the standard flow remains in its original position, and each picture is placed at the top of the page, in turn, through the top and left properties.

{3} sets the IMG element in the Div, that is, the border of the image to none, because the image is in the link, and the default thick border will appear if the border is not canceled, affecting the appearance.

：

(2) Settings <ul> list location, and each <li> style:

Div.pic ul{Border-top:1px #aaa Solid;Border-bottom:1px #fff Solid;padding:5px 20px 5px;margin:0px;font-size:12px;List-style:None;
position:relative; Top:330px; }div.pic Li.info{text-indent:2em; }div.pic Li.title{Font-weight:Bold; }

{1} set the UL border and other attributes, set the Position property to relative, and set the top to 330px so that each UL moves down 330 pixels.

{2} indents the first line of text.

The {3} font was set in bold.

：

At this point, the basic layout has been implemented.

(3) The following needs to set the background for the image, in order to set the mouse pointer after the effect, the method and the previous study material is similar to the case, as follows:

Div.ls a{background:URL (framels.jpg) no-repeat Center;/*adds a white background (looks like a frame) to the horizontal direction picture with a width greater than height: 90*125 pixels across the landscape*/}div.pt a{background:URL (framept.jpg) no-repeat Center;/*adds a white background (looks like a frame) to the horizontal direction picture with a width greater than height: 90*125 pixels across the landscape*/}div.ls img{/*Horizontal Photo*/margin:0px;Height:90px;width:135px; }div.pt img{/*Vertical Photo*/margin:0px;Height:135px;width:90px; }Div.ls a{Display:Block;padding:34px 14px 36px 11px;/*extend a hyperlink area to the entire background block*/}div.pt a{Display:Block;padding:11px 36px 14px 34px;/*extend a hyperlink area to the entire background block*/}Div.ls:hover a{background:URL (framels_hover.jpg) no-repeat Center;/*a horizontal picture with a width greater than height adds an orange background when the mouse pointer passes over it: 90*125 pixels in transverse direction*/}Div.pt:hover a{background:URL (framept_hover.jpg) no-repeat Center;/*a horizontal picture with a width greater than height adds an orange background when the mouse pointer passes over it: 90*125 pixels in transverse direction*/}

：

(4) Set the two-way linkage of the mouse pointer after the effect, that is, when the mouse pointer over a paragraph of text (or its corresponding photos), the text will also be displayed in a special style, as follows:

Div.pic:hover ul {      background:#CCC;       border-top:1px red solid;       border-bottom:1px red solid;    }

：

This completely realizes the "bidirectional linkage", the image and the corresponding text is completely separated, and the mouse pointer through either of the two, will produce the same effect.

(12) design electronic album with CSS {next}