CSS Box mode detailed five

In my last tutorial, "Thoroughly understand the CSS box mode four (absolute positioning and relative positioning)" Finally demonstrated a comprehensive navigation example, because of the time relationship, I also felt the need to separate this example, so I did not write the tutorial to the previous tutorial. This tutorial can be used as a CSS positioning learning intensive exercises, of course, I am not only a single explanation to do the steps, but also with you to analyze the design of ideas, while sharing my doing in the process of discovering some of the problems for everyone to guard against reference. In order to take a look at my last tutorial on the netizen, I again give the code to run the box, we can first run to see the effect, but it is best to look at my last tutorial, unless you have a knowledge of positioning. In addition, this example is not perfect, such as the structure of the specification, and so on, if you can have a better way to achieve, may wish to write in the reply to share with you, but also let me this positive rookie study under.

Sample Code browsing: http://tech.ddvip.com/yssl/29811/29814_1.html

Introduction to the realization of the function of an instance

This example is a column link list, the mouse moves to the link row, link text color will change, at the same time in the link to the bottom right side of a link with the information Panel, the information panel left a picture, the picture on the right there are three notes, they are "song name", "Singer", "Introduction." This column is relocated to other places, the effect, location will not change, the whole process only with CSS+DIV implementation, without any script.

　　
Screenshot of Instance effect

II. structure and style codes

1. Structure

2. Style

*{
margin:0px;
padding:0px;
}
Body {
margin:10px;
font-size:13px;
}
a:link {
Color: #666;
text-decoration:none;/* Remove Link Underline * *
}
a:visited {
Color: #666;
Text-decoration:none;
}
a:hover {
Color: #F90;
}
h3 {
Color: #FFF;
Background-color: #F90;
width:100px;
padding-top:3px;
Text-align:center;
}
UL {
width:300px;
BORDER-TOP:1PX Solid #F60/* To have a line above it, with the title H3 match * *
}
UL Li {
padding:5px;
border-bottom:1px solid #CCC;
list-style:none;/* removes list styles, which is important for standard browsers.
}
A
position:relative;/* set its positioning method for relative positioning, wait for the internal information Panel can be relative to its positioning * *
display:block;/* let the link in block rendering, so do not click the link text can respond to the link * *
}
A div {
display:none;/* Initialization Information Panel does not show * *
}
a:hover {background: #fff;} /*ie7 The following version a state pseudo class bug*/
A:hover Div {
Position:absolute;
padding:5px;
Display:block;
The width:245px;/* only gives the width, the height lets it adjust with the content how much automatically
left:150px;/* this is relative to parent A's positioning * *
top:20px;
border:1px solid RGB (91,185,233);
Background-color:rgb (228,246,255);
z-index:999;/* The information panel to a higher position, so that the link text too long will not overlap with the panel, but this is only valid for FF * *
}
A img {
width:80px;
height:80px;
border:none;/* to remove the border of the picture, by default, the picture inside the link will appear in the standard browser * * *
Display:block;
position:absolute;/* use absolute positioning to draw away from the normal text stream, or in the design of the time to consider the normal display of different browsers will be more trouble * *
top:5px;/* here the 5px is the same as the filling of the Information Panel box.
left:5px;
}
DL {
width:160px;
Float:right;
Color: #999;
line-height:20px;
}
DL DD Span {
Font-weight:bold;
Color: #639;
}

Three, the analysis realizes the method

[1] [2] [3] Next page