北京网站制作北京网站制作彻底弄懂CSS盒子模式之五_网页设计 -网站建设|北京网站建设|北京网站制作|北京网站建设首选品牌【企通互联】

网站栏目介绍
 北京网站制作旧貌要换新颜：滚动条大变身
 北京网站设计iframe的高度随内容的变化而变化
 北京网页设计网页制作中常用的一些代码小结
 网站制作细谈有关网站设计的10个注意要点
 网页设计图片合成之绝望的眼神
 网站建设限制文本字节数的JS源代码程序
 网站建设HTML语言剖析（十）链接标记
 北京网站制作html页面中嵌入另一个html页面
 网页设计设计理论：网站首页应该放什么内容？

品牌理念

北京网站建设最佳合作伙伴
北京网站建设专家企通互联
竭诚为您提供网站建设服务!

友好连接

文章搜索

你的位置：首页 >> 网页设计 >> 北京网站制作北京网站制作彻底弄懂CSS盒子模式之五

北京网站制作北京网站制作彻底弄懂CSS盒子模式之五

作者：北京网站建设日期：2008-03-27 06:14:06 来源： http://www.qitongnet.com

在本人上一篇教程《彻底弄懂CSS盒子模式四(绝对定位和相对定位)》中最后有演示一个综合导航实例，那时因为时间关系，同时本人也觉得有必要将这实例分出来单独讲一下，所以没有把实例讲解教程写到上一篇教程中。这个教程可以作为CSS定位学习的强化练习，当然教程我也不只是单一的讲解做的步骤，还会和大家一起来分析一下设计思路，同时分享本人在做的过程中发现的一些问题供大家防范参考。为了兼顾一下没有来得及看我上一篇教程的网友，我再次给出代码运行框，大家可以先运行看看效果，不过建议最好先看一下本人上一篇教程，除非你已对定位有所了解。另外本实例还是不够完善的，比如结构的规范等等，如果你能有更好的实现方法，不妨在回复中写出来与大家分享，同时也让我这个积极的菜鸟学习下。

Www.Chinaz.com

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">网站设计
<html xmlns="http://www.w3.org/1999/xhtml">北京网站建设
<head>北京网页设计
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />北京网站建设
<title>相对定位和绝对定位实例--作者：唐国辉</title>网站建设
<style type="text/css">网站建设
<!--网站建设
*{网页设计
margin:0px;网站设计
padding:0px;网站建设
}网站设计
body {北京网站建设
margin:10px;网页设计
font-size: 13px;网站制作
}网页设计
a:link {网站制作
color: #666;北京网站设计
text-decoration: none;/*去除链接下划线*/企通互联
}网站建设
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;/*使其上边有一线条，与标题h3吻合*/北京网站建设
}北京网站建设
ul li {网站建设
padding:5px;北京网站设计
border-bottom: 1px solid #CCC;网站建设
list-style:none;/*去除列表样式，这对于标准浏览器很重要*/北京网站制作
}网站建设
a {北京网页设计
position: relative;/*设置其定位方法为相对定位，等一下内部信息面板就可以相对它定位*/北京网站制作
display:block;/*让链接以块状呈现，这样不用点中链接文字就可以响应链接*/网页设计
}网站制作
a div {北京网页设计
display: none;/*初始化信息面板不显示*/北京网页设计
}北京网站设计
a:hover {background:#fff;}/*IE7以下版本A状态伪类bug*/北京网站建设
a:hover div {网站设计
position: absolute;网站建设
padding:5px;北京网站设计
display:block;企通互联
width: 245px;/*只给出宽度，高让它随内容多少自动调整*/北京网站制作
left:150px;/*这是相对父级A的定位*/北京网站建设
top: 20px;北京网站制作
border: 1px solid rgb(91,185,233);北京网站制作
background-color: rgb(228,246,255);

Chinaz~com

北京网站制作
z-index:999;/*把信息面板提到一个较高的位置，使链接文字过长时不会与面板重叠,但这只对FF有效*/网站建设
}北京网站设计
a img {企通互联
width:80px; 企通互联北京网站设计
height:80px;网页设计
border:none;/*去除图片边框，默认情况下，链接内的图片在标准浏览器会出现边框*/网页设计
display:block;企通互联
position: absolute;/*用绝对定位抽离正常文本流，不然在设计的时候考虑到不同浏览器正常显示会更麻烦*/网站设计
top:5px;/*这里的5px是与信息面板大盒子的填充一样的*/北京网站建设
left:5px;网站制作
}网站建设
dl {北京网页设计
width: 160px;北京网页设计
float:right;网站建设
color: #999;北京网站设计
line-height:20px;网站制作
}北京网站制作
dl dd span {企通互联
font-weight: bold;北京网站建设
color: #639;企通互联
}北京网页设计
-->北京网站制作
</style>网站建设
</head>

中国.站.长站

<body>北京网站制作
<h3>最新单曲</h3>北京网站设计
<ul> 中.国.站长站

<li><a href="#">01 爱的文身黄圣依<div><img src="" alt="" />北京网站设计
<dl>网页设计
<dd><span>歌名:</span>爱的文身</dd>网页设计
<dd><span>歌手:</span>黄圣依</dd>网站制作
<dd><span>介绍:</span>黄圣依唱片主打歌的确是她个人的内心写照，《爱的文身》由香港音乐大师金培达作曲，制作人陈少琪亲自填词。</dd>网页设计
</dl></div></a></li> 站.长.站

<li><a href="#">02 累了阿信<div><img src="" alt="" />北京网页设计
<dl>北京网页设计
<dd><span>歌名:</span>累了</dd>网站制作
<dd><span>歌手:</span>阿信</dd>网站制作
<dd><span>介绍:</span>青春校园偶像剧----【熱情仲夏】片尾曲</dd>北京网站设计
</dl></div></a></li>

Www.Chinaz.com

<li><a href="#">03 漫漫慢慢阿朵<div><img src="" alt="" />网站设计
<dl>企通互联
<dd><span>歌名:</span>漫漫慢慢</dd>网站制作
<dd><span>歌手:</span>阿朵</dd>北京网站建设
<dd><span>介绍:</span>阿朵抢听版最新单曲《漫漫慢慢》让你认识阿朵柔情的一面，展现阿朵百变的风格。</dd>北京网站制作
</dl></div></a></li>

Chinaz^com

<li><a href="#">04 我怀念的孙燕姿<div><img src="" alt="" />网站设计
<dl>网站设计
<dd><span>歌名:</span>我怀念的</dd>企通互联
<dd><span>歌手:</span>孙燕姿</dd>网站制作
<dd><span>介绍:</span>令人感同身受的抒情歌，在故事性的架构中，有着平凡但又能扣人心弦的情感，是一首高度共鸣的抒情歌。</dd>北京网站制作
</dl></div></a></li> Www~Chinaz~com

<li><a href="#">05 听,花期越来越近后弦<div><img src="" alt="" />北京网站制作
<dl>企通互联
<dd><span>歌名:</span>花期越来越近</dd>网站设计
<dd><span>歌手:</span>后弦</dd>网站制作
<dd><span>介绍:</span>后弦参与《花开的声音》这个舞台剧里的一部分，邀请了后弦去演唱这首歌，此歌就是为舞台剧《花开的声音》而创作。</dd>网页设计
</dl></div></a></li>

中.国.站.长.站

</ul>网站建设
</body>北京网页设计
</html>

Www@Chinaz@com

一、实例实现功能介绍 Chinaz

本实例为一个栏目链接列表，鼠标移动到链接所在行，链接文本颜色会改变，同时会在链接右下侧显示一个与链接相干的信息面板，信息面板中左边有一幅图片，图片右侧又有三项说明，它们分别是“歌名”、“歌手”、“介绍”。这个栏目被重定位到其它地方，效果、位置不会发生改变，全程只用CSS+DIV实现，无任何脚本。

站长.站

北京网站制作
实例效果截图中.国站长站

二、结构和样式代码 中国.站长站

1．结构

中国站.长站

<li><a href="#">01 爱的文身黄圣依<div><img src="http://imgcache.qq.com/music/photo/singer/54/网站建设
singerpic_5554_0.jpg" alt="" />网站制作
<dl>网站制作
    <dd><span>歌名:</span>爱的文身</dd>北京网页设计
    <dd><span>歌手:</span>黄圣依</dd>北京网站设计
    <dd><span>介绍:</span>黄圣依唱片主打歌的确是她个人的内心写照，《爱的文身》由香港音乐大师金培达作曲，制作人陈少琪亲自填词。</dd>网页设计
</dl></div></a></li> Www_Chinaz_com

<li><a href="#">02 累了阿信<div><img src="http://imgcache.qq.com/music/photo/singer/47/网站制作
singerpic_6547_0.jpg" alt="" />网站建设
<dl>网站制作
    <dd><span>歌名:</span>累了</dd>北京网站制作
    <dd><span>歌手:</span>阿信</dd>北京网站建设
    <dd><span>介绍:</span>青春校园偶像剧----【熱情仲夏】片尾曲</dd>北京网站制作
</dl></div></a></li>

中.国站长站

<li><a href="#">03 漫漫慢慢阿朵<div><img src="http://imgcache.qq.com/music/photo/singer/61/北京网站设计
singerpic_6361_0.jpg" alt="" />北京网站设计
<dl>北京网页设计
    <dd><span>歌名:</span>漫漫慢慢</dd>企通互联
    <dd><span>歌手:</span>阿朵</dd>网站设计
    <dd><span>介绍:</span>阿朵抢听版最新单曲《漫漫慢慢》让你认识阿朵柔情的一面，展现阿朵百变的风格。</dd>网站建设
</dl></div></a></li>

中国站.长.站

<li><a href="#">04 我怀念的孙燕姿<div><img src="http://imgcache.qq.com/music/photo/singer/9/企通互联
singerpic_109_0.jpg" alt="" />北京网页设计
<dl>企通互联
    <dd><span>歌名:</span>我怀念的</dd>北京网站制作
    <dd><span>歌手:</span>孙燕姿</dd>网页设计
    <dd><span>介绍:</span>令人感同身受的抒情歌，在故事性的架构中，有着平凡但又能扣人心弦的情感，是一首高度共鸣的抒情歌。</dd>企通互联
</dl></div></a></li>

Chinaz@com

<li><a href="#">05 听,花期越来越近后弦<div><img src="http://imgcache.qq.com/music/photo/singer/33/北京网站建设
singerpic_4733_0.jpg" alt="" />网站制作
<dl>网页设计
    <dd><span>歌名:</span>花期越来越近</dd>网站制作
    <dd><span>歌手:</span>后弦</dd>网页设计
    <dd><span>介绍:</span>后弦参与《花开的声音》这个舞台剧里的一部分，邀请了后弦去演唱这首歌，此歌就是为舞台剧《花开的声音》而创作。</dd>企通互联
</dl></div></a></li>

站.长站

</ul>

Chinaz^com

中.国.站长站

<li><a href="#">01 爱的文身黄圣依<div><img src="http://imgcache.qq.com/music/photo/singer/54/北京网站制作
singerpic_5554_0.jpg" alt="" />网站建设
<dl>网站设计
    <dd><span>歌名:</span>爱的文身</dd>企通互联
    <dd><span>歌手:</span>黄圣依</dd>北京网站设计
    <dd><span>介绍:</span>黄圣依唱片主打歌的确是她个人的内心写照，《爱的文身》由香港音乐大师金培达作曲，制作人陈少琪亲自填词。</dd>网站设计
</dl></div></a></li>

中.国.站长站

<li><a href="#">02 累了阿信<div><img src="http://imgcache.qq.com/music/photo/singer/47/网页设计
singerpic_6547_0.jpg" alt="" />网站制作
<dl>网站制作
    <dd><span>歌名:</span>累了</dd>北京网站设计
    <dd><span>歌手:</span>阿信网站制作</dd>企通互联
    <dd><span>介绍:</span>青春校园偶像剧----【熱情仲夏】片尾曲</dd>企通互联
</dl></div></a></li> 中国站长.站

<li><a href="#">03 漫漫慢慢阿朵<div><img src="http://imgcache.qq.com/music/photo/singer/61/网站建设
singerpic_6361_0.jpg" alt="" />网站建设
<dl>北京网站建设
    <dd><span>歌名:</span>漫漫慢慢</dd>北京网站建设
    <dd><span>歌手:</span>阿朵</dd>企通互联
    <dd><span>介绍:</span>阿朵抢听版最新单曲《漫漫慢慢》让你认识阿朵柔情的一面，展现阿朵百变的风格。</dd>网站建设
</dl></div></a></li> 站.长站

<li><a href="#">04 我怀念的孙燕姿<div><img src="http://imgcache.qq.com/music/photo/singer/9/网站设计
singerpic_109_0.jpg" alt="" />北京网页设计
<dl>北京网页设计
    <dd><span>歌名:</span>我怀念的</dd>北京网页设计
    <dd><span>歌手:</span>孙燕姿</dd>网站制作
    <dd><span>介绍:</span>令人感同身受的抒情歌，在故事性的架构中，有着平凡但又能扣人心弦的情感，是一首高度共鸣的抒情歌。</dd>企通互联
</dl></div></a></li> Chinaz

<li><a href="#">05 听,花期越来越近后弦<div><img src="http://imgcache.qq.com/music/photo/singer/33/网站制作
singerpic_4733_0.jpg" alt="" />北京网站制作
<dl>网站制作
    <dd><span>歌名:</span>花期越来越近</dd>北京网站制作
    <dd><span>歌手:</span>后弦</dd>企通互联
    <dd><span>介绍:</span>后弦参与《花开的声音》这个舞台剧里的一部分，邀请了后弦去演唱这首歌，此歌就是为舞台剧《花开的声音》而创作。</dd>北京网页设计
</dl></div></a></li>

Chinaz.com

</ul>

Chinaz^com

2．样式 中国.站.长站

*{北京网站建设
    margin:0px;企通互联
    padding:0px;北京网站设计
}网站建设
body {北京网站制作
    margin:10px;企通互联
    font-size: 13px;网站建设
}北京网页设计
a:link {网站建设
    color: #666;北京网站设计
    text-decoration: none;/*去除链接下划线*/北京网站设计
}网站制作
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;/*使其上边有一线条，与标题h3吻合*/ 中国站.长站企通互联
}网站建设
ul li {企通互联
    padding:5px;北京网站建设
    border-bottom: 1px solid #CCC;网页设计
    list-style:none;/*去除列表样式，这对于标准浏览器很重要*/网站设计
}企通互联
a {北京网站制作
    position: relative;/*设置其定位方法为相对定位，等一下内部信息面板就可以相对它定位*/北京网站制作
    display:block;/*让链接以块状呈现，这样不用点中链接文字就可以响应链接*/北京网站建设
}北京网站制作
a div {北京网站设计
    display: none;/*初始化信息面板不显示*/网页设计
}北京网页设计
a:hover {background:#fff;}/*IE7以下版本A状态伪类bug*/北京网页设计
a:hover div {北京网页设计
    position: absolute;网站设计
    padding:5px;北京网站设计
    display:block;北京网站设计
    width: 245px;/*只给出宽度，高让它随内容多少自动调整*/网站设计
    left:150px;/*这是相对父级A的定位*/北京网站设计
    top: 20px;网站制作
    border: 1px solid rgb(91,185,233);

中.国.站长站

北京网页设计
    background-color: rgb(228,246,255);企通互联
    z-index:999;/*把信息面板提到一个较高的位置，使链接文字过长时不会与面板重叠,但这只对FF有效*/网站制作
}北京网站制作
a img {北京网站建设
    width:80px;北京网页设计
    height:80px;北京网页设计
    border:none;/*去除图片边框，默认情况下，链接内的图片在标准浏览器会出现边框*/北京网站制作
    display:block;网站制作
    position: absolute;/*用绝对定位抽离正常文本流，不然在设计的时候考虑到不同浏览器正常显示会更麻烦*/网页设计
    top:5px;/*这里的5px是与信息面板大盒子的填充一样的*/北京网站设计
    left:5px;北京网站设计
}企通互联
dl {北京网站建设
    width: 160px;网站设计
    float:right;网站制作
    color: #999;北京网站制作
    line-height:20px;网站制作
}北京网站设计
dl dd span {网站建设
    font-weight: bold;北京网站设计
    color: #639;

Www^Chinaz^com

网页设计
} Chinaz~com

Www.Chinaz.com

<li><a href="#">01 北京网页设计爱的文身黄圣依<div><img src="http://imgcache.qq.com/music/photo/singer/54/北京网站建设
singerpic_5554_0.jpg" alt="" />北京网站建设
<dl>网站建设
    <dd><span>歌名:</span>爱的文身</dd>网页设计
    <dd><span>歌手:</span>黄圣依</dd>北京网页设计
    <dd><span>介绍:</span>黄圣依唱片主打歌的确是她个人的内心写照，《爱的文身》由香港音乐大师金培达作曲，制作人陈少琪亲自填词。</dd>网站建设
</dl></div></a></li>

Www^Chinaz^com

<li><a href="#">02 累了阿信<div><img src="http://imgcache.qq.com/music/photo/singer/47/网站设计
singerpic_6547_0.jpg" alt="" />北京网站制作
<dl>北京网站设计
    <dd><span>歌名:</span>累了</dd>网站建设
    <dd><span>歌手:</span>阿信</dd>北京网站制作
    <dd><span>介绍:</span>青春校园偶像剧----【熱情仲夏】片尾曲</dd>北京网页设计
</dl></div></a></li>

中国站.长站

<li><a href="#">03 漫漫慢慢阿朵<div><img src="http://imgcache.qq.com/music/photo/singer/61/北京网站制作
singerpic_6361_0.jpg" alt="" />网站建设
<dl>北京网站设计
    <dd><span>歌名:</span>漫漫慢慢</dd>网站制作
    <dd><span>歌手:</span>阿朵</dd>企通互联
    <dd><span>介绍:</span>阿朵抢听版最新单曲《漫漫慢慢》让你认识阿朵柔情的一面，展现阿朵百变的风格。</dd>企通互联
</dl></div></a></li> 中.国.站.长.站

<li><a href="#">04 我怀念的孙燕姿<div><img src="http://imgcache.qq.com/music/photo/singer/9/北京网站制作
singerpic_109_0.jpg" alt="" />网站制作
<dl>网站制作
    <dd><span>歌名:</span>我怀念的</dd>网站建设
    <dd><span>歌手:</span>孙燕姿</dd>网站设计
    <dd><span>介绍:</span>令人感同身受的抒情歌，在故事性的架构中，有着平凡但又能扣人心弦的情感，是一首高度共鸣的抒情歌。</dd>北京网站制作
</dl></div></a></li> Www~Chinaz~com

<li><a href="#">05 听,花期越来越近后弦<div><img src="http://imgcache.qq.com/music/photo/singer/33/网站设计
singerpic_4733_0.jpg" alt="" />北京网页设计
<dl>网站设计
    <dd><span>歌名:</span>花期越来越近网页设计</dd>网站制作
    <dd><span>歌手:</span>后弦</dd>网站设计
    <dd><span>介绍:</span>后弦参与《花开的声音》这个舞台剧里的一部分，邀请了后弦去演唱这首歌，此歌就是为舞台剧《花开的声音》而创作。</dd>网站设计
</dl></div></a></li>

中.国.站长站

</ul>

中国站长.站

中国站长_站,为中文网站提供动力

<li><a href="#">01 爱的文身黄圣依<div><img src="http://imgcache.qq.com/music/photo/singer/54/企通互联
singerpic_5554_0.jpg" alt="" />北京网站设计
<dl>企通互联
    <dd><span>歌名:</span>爱的文身</dd>北京网站制作
    <dd><span>歌手:</span>黄圣依</dd>网站设计
    <dd><span>介绍:</span>黄圣依唱片主打歌的确是她个人的内心写照，《爱的文身》由香港音乐大师金培达作曲，制作人陈少琪亲自填词。</dd>网站设计
</dl></div></a></li>

[中国站长站]

<li><a href="#">02 累了阿信<div><img src="http://imgcache.qq.com/music/photo/singer/47/北京网站建设
singerpic_6547_0.jpg" alt="" />北京网站建设
<dl>网站设计
    <dd><span>歌名:</span>累了</dd>北京网站设计
    <dd><span>歌手:</span>阿信</dd>网站制作
    <dd><span>介绍:</span>青春校园偶像剧----【熱情仲夏】片尾曲</dd>网站制作
</dl></div></a></li> Chinaz.com

<li><a href="#">03 漫漫慢慢阿朵<div><img src="http://imgcache.qq.com/music/photo/singer/61/网站建设
singerpic_6361_0.jpg" alt="" />网页设计
<dl>网站设计
    <dd><span>歌名:</span>漫漫慢慢</dd>网站设计
    <dd><span>歌手:</span>阿朵</dd>网页设计
    <dd><span> 北京网站制作介绍:</span>阿朵抢听版最新单曲《漫漫慢慢》让你认识阿朵柔情的一面，展现阿朵百变的风格。</dd>北京网站制作
</dl></div></a></li> Chinaz@com

<li><a href="#">04 我怀念的孙燕姿<div><img src="http://imgcache.qq.com/music/photo/singer/9/网站建设
singerpic_109_0.jpg" alt="" />北京网站设计
<dl>北京网站制作
    <dd><span>歌名:</span>我怀念的</dd>北京网站设计
    <dd><span>歌手:</span>孙燕姿</dd>北京网站制作
    <dd><span>介绍:</span>令人感同身受的抒情歌，在故事性的架构中，有着平凡但又能扣人心弦的情感，是一首高度共鸣的抒情歌。</dd>北京网站建设
</dl></div></a></li>

中国.站.长站

<li><a href="#">05 听,花期越来越近后弦<div><img src="http://imgcache.qq.com/music/photo/singer/33/北京网站设计
singerpic_4733_0.jpg" alt="" />网页设计
<dl>北京网站建设
    <dd><span>歌名:</span>花期越来越近</dd>北京网站建设
    <dd><span>歌手:</span>后弦</dd>网站建设
    <dd><span>介绍北京网站设计:</span>后弦参与《花开的声音》这个舞台剧里的一部分，邀请了后弦去演唱这首歌，此歌就是为舞台剧《花开的声音》而创作。</dd>北京网页设计
</dl></div></a></li> 中国站长.站

</ul>

[中国站长站]

2．样式

中国.站长站

*{网站设计
    margin:0px;北京网站制作
    padding:0px;北京网站制作
}网站设计
body {网站建设
    margin:10px;网站制作
    font-size: 13px;网站设计
}北京网站制作
a:link {北京网页设计
    color: #666;网页设计
    text-decoration: none;/*去除链接下划线*/北京网站制作
} www.qitongnet.com企通互联
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;/*使其上边有一线条，与标题h3吻合*/网站制作
}企通互联
ul li {企通互联
    padding:5px; 中国.站.长站网站制作
    border-bottom: 1px solid #CCC;网站建设
    list-style:none;/*去除列表样式，这对于标准浏览器很重要*/网站制作
}网页设计
a {企通互联
    position: relative;/*设置其定位方法为相对定位，等一下内部信息面板就可以相对它定位*/网站建设
    display:block;/*让链接以块状呈现，这样不用点中链接文字就可以响应链接*/企通互联
}北京网站设计
a div {北京网站设计
    display: none;/*初始化信息面板不显示*/北京网站制作
}北京网站设计
a:hover {background:#fff;}/*IE7以下版本A状态伪类bug*/网页设计
a:hover div {网站建设
    position: absolute;网页设计
    padding:5px;网页设计
    display:block;北京网站制作
    width: 245px;/*只给出宽度，高让它随内容多少自动调整*/网站设计
    left:150px;/*这是相对父级A的定位*/北京网站建设
    top: 20px;网站制作
    border: 1px solid rgb(91,185,233);网站制作
    background-color: rgb(228,246,255);网站制作
    z-index:999;/*把信息面板提到一个较高的位置，使链接文字过长时不会与面板重叠,但这只对FF有效*/

站.长.站

北京网站建设
}北京网站建设
a img {北京网站制作
    width:80px;北京网页设计
    height:80px;北京网页设计
    border:none;/*去除图片边框，默认情况下，链接内的图片在标准浏览器会出现边框*/网站设计
    display:block;北京网站建设
    position: absolute;/*用绝对定位抽离正常文本流，不然在设计的时候考虑到不同浏览器正常显示会更麻烦*/北京网站设计
    top:5px;/*这里的5px是与信息面板大盒子的填充一样的*/北京网站制作
    left:5px;北京网站设计
}网站设计
dl {网站建设
    width: 160px;北京网站制作
    float:right;网站建设
    color: #999;网站制作
    line-height:20px;北京网站设计
}网站制作
dl dd span {北京网站建设
    font-weight: bold;北京网页设计
    color: #639;网站制作
}

Www.Chinaz.com

北京网站制作

字体：【大】【中】【小】

上一篇：网站制作彻底弄懂CSS盒子模式之五

下一篇：网站制作网页设计中如何使用嵌套的框架集

这是一个与众不同的品牌，企通互联只专注于网站建设领域！中小型企业网站建设最佳合作伙伴！网站建设咨询热线：010-65587978/77/76/75!

网站建设|北京网站建设|北京网站制作|北京网站建设首选品牌【企通互联】

http://www.qitongnet.com 网站建设咨询热线：010-65587978/77/76/75

相关文章

品牌理念

友好连接

文章搜索

北京网站制作北京网站制作彻底弄懂CSS盒子模式之五