HTML代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>">
<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);
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="<a href="http://imgcache.qq.com/music/photo/singer/54/singerpic_5554_0.jpg" target="_blank">http://imgcache.qq.com/music/photo/singer/54/singerpic_5554_0.jpg</a>" 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="<a href="http://imgcache.qq.com/music/photo/singer/47/singerpic_6547_0.jpg" target="_blank">http://imgcache.qq.com/music/photo/singer/47/singerpic_6547_0.jpg</a>" 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="<a href="http://imgcache.qq.com/music/photo/singer/61/singerpic_6361_0.jpg" target="_blank">http://imgcache.qq.com/music/photo/singer/61/singerpic_6361_0.jpg</a>" 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="<a href="http://imgcache.qq.com/music/photo/singer/9/singerpic_109_0.jpg" target="_blank">http://imgcache.qq.com/music/photo/singer/9/singerpic_109_0.jpg</a>" 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="<a href="http://imgcache.qq.com/music/photo/singer/33/singerpic_4733_0.jpg" target="_blank">http://imgcache.qq.com/music/photo/singer/33/singerpic_4733_0.jpg</a>" alt="" />
<dl>
<dd><span>歌名:</span>花期越来越近</dd>
<dd><span>歌手:</span>后弦</dd>
<dd><span>介绍:</span>后弦参与《花开的声音》这个舞台剧里的一部分，邀请了后弦去演唱这首歌，此歌就是为舞台剧《花开的声音》而创作。</dd>
</dl></div></a></li>
</ul>
</body>
</html>
分享到：
相关推荐
在Web2.0环境中，网页设计与开发有了显著的进步，其中Div+CSS成为了构建现代网页布局的主要技术。Div（Division）是HTML中的一个块级元素，用于组织和分隔页面内容，而CSS（Cascading Style Sheets）则负责样式控制...
标题中的“23个符合web2.0标准的div_css menu.rar”暗示了这是一个包含23种设计样式的Web2.0风格的CSS菜单资源包。Web2.0是互联网发展的一个阶段，强调用户交互、社交网络和富互联网应用程序（RIA）。在网页设计中，...
总结来说，"div模拟弹出窗口，web2.0体现"涉及的关键技术包括： 1. 使用HTML div创建窗口结构。 2. 通过CSS进行样式和位置的设定，实现弹出效果。 3. 利用JavaScript监听鼠标事件，实现窗口的可移动性。 4. 修改CSS...
WEB2.0时代的到来，使得网站设计更加注重用户体验和交互性，CSS横向下拉菜单导航条便是这一趋势的典型体现。下面我们将详细探讨这五款WEB2.0漂亮的CSS横向下拉菜单导航条的设计原理、实现方法以及它们各自的特色。 ...
在这个实例中，我们可能使用JavaScript来添加一些动态效果，例如鼠标悬停时图片的放大、点击卡片显示更多详细信息等。JavaScript库如jQuery可以简化DOM操作，提供便捷的动画效果。此外，如果要实现响应式设计，我们...
CSS2.0中文帮助手册是一本详尽的资源，旨在帮助开发者和设计师深入理解并熟练掌握CSS2.0（层叠样式表第二版）技术。CSS2.0是Web设计领域的一个里程碑，它极大地丰富了网页的表现力，使得网页不仅能够展示文本和图像...
**CSS2.0**，全称为层叠样式表（Cascading Style Sheets），是Web设计领域中的一个核心技术，用于描述HTML或XML（包括各种XML方言，如SVG、XHTML等）文档的呈现方式。CSS2.0是CSS的第二版规范，它在CSS1.0的基础上...
1.5 用Web2.0标准改善现有网站 16 1.5.1 初级改善 16 1.5.2 中级改善 17 1.6 小结 19 第2章 CSS基础 20 2.1 CSS概述 21 2.1.1 CSS介绍 21 2.1.2 CSS的优点 22 2.2 调用样式表 23 2.2.1 内嵌样式 23 2.2.2 内部样式表...
**CSS 2.0中文手册**是一本专为Web开发者设计的参考资料，它全面地介绍了层叠样式表（Cascading Style Sheets）的第二版本。CSS是网页设计中不可或缺的一部分，用于控制网页元素的布局、颜色、字体、大小等视觉表现...
CSS 2.0是Web开发的重要里程碑，它提供了丰富的样式控制手段，为网页设计带来无限可能。通过深入学习CSS 2.0中文手册，开发者能够更好地掌握网页布局、样式设计和跨浏览器兼容性策略，提升网页的视觉表现和用户体验...
这些库封装了底层的OpenGL ES 2.0接口，使得开发者无需深入理解图形学原理，也能轻松创建3D效果。JavaScript还可以用于监听用户交互，如鼠标移动、点击事件，动态调整图片的位置和状态，实现与用户的实时互动。 在...
暂时的内容DIV+CSS布局,web2.0,哦,水图,哦图片 </div> <div id="demo2"></div> </div> ``` - **容器`#demo`**：作为外部容器，设置为固定高度（200px）和宽度（600px），并隐藏溢出内容，以实现滚动效果。 - **...
**CSS 2.0样式表中文手册** **一、CSS简介** CSS，全称为层叠样式表...然而，随着技术的发展，CSS 3引入了更多高级功能，如媒体查询、过渡、动画等，学习和理解CSS 2.0是进一步探索CSS 3及更高级别特性的基础。
为了与服务器进行异步通信，我们可以使用ASP.NET 2.0中的AjaxControlToolkit或者纯JavaScript库如jQuery AJAX。例如，当用户点击菜单项时，可以触发一个AJAX请求，向服务器发送数据并获取响应，然后更新页面的某一...
1、设计的目的 做个棋手类网站以怀念个人围棋的时光。还有此刻的美丽,以及无限的未来向往。 2、设计布局 主页设计布局是在网站的右上角是标准的导航栏，...页面总体采用 CSS+DIV 布局，最外层DIV为框架，导航条设计。
driver.findElement(By.cssSelector("div.js-cur")).click(); // 输入密码 driver.findElement(By.name("password")).clear(); driver.findElement(By.name("password")).sendKeys("qa1234"); // 点击登录 ...
而`drag_web2.0.htm`可能包含了更多Web 2.0风格的拖放效果，可能涉及CSS3动画或者与其他Web 2.0特性的结合，比如AJAX实时更新。 最后，`drag.htm`可能是一个通用的拖放实现，涵盖了table或其他HTML元素的拖放功能。...
"经典导航菜单.rar"这个压缩包文件提供了一系列基于Web2.0标准的Div/CSS菜单模板，这些菜单设计既实用又具有视觉吸引力。Web2.0是互联网发展的一个重要阶段，它强调交互性、社区参与和富媒体内容，因此，这些菜单...
本示例涉及的主题是“js控制多个div拖拽和拖动、且能保存数据至cookie、数据库、xml”，这是一项实用技术，尤其适用于创建交互性强的Web 2.0应用程序。下面将详细介绍这一主题的相关知识点。 首先，让我们了解...
CSS2.0（层叠样式表第二版）是Web设计者用来控制网页元素外观的一种标准语言。它允许开发者通过定义样式规则来改变HTML或XML（包括如SVG、MathML等各种XML方言）文档的呈现效果。CSS2.0引入了浮动布局、定位方式、更...