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

北京网站设计网页文字界面设计与穿衣搭配经验
 网站建设网站界面设计：网页的均衡规划与选择
 北京网站建设网页设计配色应用实例剖析——绿色系
 网页设计让你的主页声色并茂—巧为网页添加背景音乐
 网站制作色彩系列教程(1)：基础知识
 企通互联css制作一款相册
 北京网站设计JS页内查找关键词的高亮显示
 北京网站设计用xmlhttp和Java session监听改善站内消息系统
 北京网站设计值得让您收藏的精华代码
 网站制作刘亮：什么网站才算是好站?

品牌理念

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

友好连接

文章搜索

你的位置：首页 >> 网页设计 >> 北京网站制作网站制作彻底弄懂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;/*设置其定位方法为相对定位，等一下内部信息面板就可以相对它定位 www.qitongnet.com*/北京网站制作
    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

<h3>最新单曲</h3>北京网站制作
<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>

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;/*去除链接下划线*/北京网站制作
}网站设计
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盒子模式之三

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

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

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

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

相关文章

品牌理念

友好连接

文章搜索

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