Learning Web Technology: Thoroughly understand the CSS box mode five

Last Update:2017-02-28 Source: Internet

Author: User

Tags data structures relative version valid

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

css| Web page

1. Thoroughly understand the CSS box mode one (div typesetting quick Start)
2. Thoroughly understand the CSS Box mode II (navigation bar instance)
3. Thoroughly understand the CSS Box Mode III (floating performance and clear Readme)
4. Thoroughly understand the CSS box mode four (absolute positioning and relative positioning)

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.

Run Code Box

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "><ptml xmlns=" http://www.w3.org/1999/xhtml "><pead><meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/><title> relative positioning and absolute positioning instance--Author: Tang </title><style type=" text/css "></style></pead><body><p> the latest single </p><ul><li><a href= "#" >01 Love tattoo Huangshengyi <div><dl> <dd><span> Song name:</span> love Tattoo </dd> <dd><span> singer:</span> Huangshengyi </dd> <dd><span> Introduction: </span> Huangshengyi album title song is indeed her personal portrayal, "Love Tattoo" by the Hong Kong music master Kimpeda composer, producer Chen Shaoqi personally lyrics. </dd></dl></div></a></li>&ltLi><a href= "#" >02 tired of a letter <div><dl > <dd><span> song name:</span> tired </dd> <dd><span> singer:</span> Letter </dd> < Dd><span> introduces:</span> Youth Campus idol drama----"Hot Midsummer" Piece of music </dd></dl></div></a></li> <li><a href= "#" >03 long slowly ardos <div>< dl> <dd><span> Song name:</span> long slowly </dd> <dd><span> singer:</span> Ardos </dd> <dd><span> Introduction:</span> Ardos Rob listen to the latest single "Long Slowly" let you know Ardos tenderness side, show Ardos change style. </dd></dl></div></a></li><li><a href= "#" >04 I miss Stefanie Sun <div><dl> <dd><span> song name:</span> i miss </ Dd> <dd><span> singer:</span> Stefanie Sun </dd> <dd><span> Introduction:</span> an empathetic lyric song, In the architecture of the story, there are ordinary but gripping emotions., is a highly resonant lyric song. </dd></dl></div></a></li><li><a href= "#" >05 Listen, flowering more and more near back chord <div>< IMG src= "/uploadpic/2007-7/20077720481629.jpg" "alt=" "/><dl> <dd><span> song name:</span> flowering more and more near </dd> <dd><span> singer:</span> after chord </dd> <dd><span> introduction:</span> after string participation in the voice of Blossom Part of this stage play, inviting the back string to sing this song is for the stage drama "Blossom Voice" and creation. </dd></dl></div></a></li></ul></body></ptml>

[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]

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

<ul>

<li><a href= "#" >01 Love tattoo Huangshengyi <div>Singerpic_5554_0.jpg "alt=" "/>
<dl>
<dd><span> Song name:</span> love Tattoo </dd>
<dd><span> singer:</span> Huangshengyi </dd>
<dd><span> Introduction:</span> Huangshengyi album title song is indeed a personal portrayal of her, "Love Tattoo" by the Hong Kong music master Kimpeda composer, producer Chen Shaoqi himself lyrics. </dd>
</dl></div></a></li>

<li><a href= "#" >02 tired of a letter <div>Singerpic_6547_0.jpg "alt=" "/>
<dl>
<dd><span> Song name:</span> tired </dd>
<dd><span> singer:</span> </dd>
<dd><span> Introduction of:</span> Youth Campus Idol play----"Hot midsummer" Piece of tail song </dd>
</dl></div></a></li>

<li><a href= "#" >03 slowly ardos <div>Singerpic_6361_0.jpg "alt=" "/>
<dl>
<dd><span> Song name:</span> long slowly </dd>
<dd><span> singer:</span> Ardos </dd>
<dd><span> Introduction:</span> Ardos Rob listen to the latest single "Long Slowly" let you know Ardos tenderness side, show Ardos change style. </dd>
</dl></div></a></li>

<li><a href= "#" >04 I miss Stefanie Sun <div>Singerpic_109_0.jpg "alt=" "/>
<dl>
<dd><span> Song name:</span> i miss </dd>
<dd><span> singer:</span> Stefanie Sun </dd>
<dd><span> Introduction:</span> An empathetic lyric, an ordinary but gripping emotion in the narrative architecture, is a highly resonant lyric song. </dd>
</dl></div></a></li>

<li><a href= "#" >05 Listen, flowering more and more near the back chord <div>Singerpic_4733_0.jpg "alt=" "/>
<dl>
<dd><span> Song:</span> Blossom is getting closer </dd>
<dd><span> singer:</span> back chord </dd>
<dd><span> Introduction:</span> After the string participation in the "Blossom Voice" part of this stage play, invited the string to sing this song, this song is for the stage "Blossom Voice" and creation. </dd>
</dl></div></a></li>

</ul>

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. From the screenshot above you can see that there is a title, the title below is a list, so it is easy to think of using

h3 {
Color: #FFF;
Background-color: #F90;
width:100px;
padding-top:3px;
Text-align:center;
}

2. The following is a <ul> block, I let it have a line box, so that with the title match to make the title effect, and <ul> inside <li> to have an underscore to form a branch effect, and then use the bottom border, where the following style:

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

3. The link text Click Effect on the list is very simple, everyone see the code on the line, note that the following is used a style:

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

4. The Organization Information Panel layout (the display and hidden effects of the implementation is put behind it). Information Panel for a light blue background and a darker blue border, and there is a 5px filled box, the box left to arrange a picture, picture size with CSS control, picture right for a clear list of data structures, in order not to appear with the front parent <li> Reuse (otherwise, wait a minute. CSS style control can be cumbersome, because the internal <li> inherits the parent style, unless you have to define a new style to clear the style that the parent brings to it), so I use the <dl><dd> structure, only set < Dl> a width, height is not set, so that its height with the description of the increase in text, without absolute positioning, so that it can be the parent of the high, and then let it float to the right. The image in the information panel is positioned in the upper-left corner of the information panel using the absolute positioning method, which is consistent with the 5px offset to the parent 5px fill, which looks natural. Of course, maybe you think there's a lot of simple ways to do it, for example: Let the picture left float, and let <dl> float on the line, this method test shows in IE can be normal, in FF will have problems, because I intend to let the right side of the text from top to bottom straight down, when the text is higher than the picture, You can't have text wrapping around a picture, this happens in FF (because <dl> is in the normal text stream, and the left side of the picture is left floating, so the problem occurs), so think of let <dl> right float, but at this time the picture in the normal text stream can not put to the top left, Since the float will affect the flow of text within the <dl>, then use absolute positioning to get it out of the normal text stream, but the problem comes, and it can't make the parent highly adaptive. So finally think of the picture is fixed in the information panel in the upper left corner, it absolutely positioning, and then let <dl> float to the right, the result found that this method is OK, use the following style:

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

5. achieve hidden and display effects. This hidden display effect is triggered by the mouse, so naturally think of link a (because now we are implemented with CSS, you do not think of using JavaScript), and the information panel is arranged in <a></a>, Because then you can use the CSS type selector with the A:hover pseudo class of the style to control its display and hide. Another important issue is that IE7 the following version has a state pseudo-class bug, this bug makes your seemingly no problem css set in IE before the hidden panel can not be displayed, here used a common method, add a style: a:hover {background: #fff ;} To eliminate the problem.

(1) Let the information Panel initial state hide, use the style:

A div {
display:none;/* Initialization Information Panel does not show * *
}

(2) Display panel, use the style:

Iv. Closure of the work

Finally, the integration of the style and structure code to complete the production of this example. Finally, design ideas to expand the guidelines: such as hidden display of CSS control design can also use the boundary method, that is, the initial state with a large margin negative value of the object out of the visual area, the mouse response to reposition the object back to the normal position of the occurrence. Also believe that after you finish this tutorial, you like the beautiful link hint panel you can do it out.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

Learning Web Technology: Thoroughly understand the CSS box mode five

Contact Us

What's Trending

Top 10 Tags

Top 10 Keywords

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support

Learning Web Technology: Thoroughly understand the CSS box mode five

Contact Us

What's Trending

Top 10 Tags

Top 10 Keywords

Trending Topic

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support