|
首页>编程技术>HTML语言与技术> |
帮帮忙 谢谢了 |
|
Visited times , Welcome to Data Mining Forum & Data Mining Expert |
|
|
|
本文由网龙AE产品自动生成 数据挖掘交友 <%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%>
<!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">
body{
margin:0;
padding:0;
font-size:12px;
background-color:#333333;
line-height:1.7;
font-family:Verdana, "宋体";
overflow:hidden;}
#info{
width:600px;
background:#666666;
margin-left:auto;
margin-right:auto;
text-align:center;
border:1px solid #ffffff;
height:450px; 数据挖掘工具
margin-top:20px;}
h3{
margin:30px 0 0 0;
font-size:12px;
color:#fff;
}
#zs{
height:340px;
overflow:auto;
width:140px;
float:right;
margin-top:20px;
margin-bottom:50px;}
ul,li{
list-style:none;
margin:0;
padding:0;}
#info img{
width:400px;
height:200px;
border:7px solid #ffffff;}
span{
visibility:hidden;
position:absolute;
overflow:hidden;
}这段不理解。
a:hover,a:active{
cursor:pointer;}
a:hover span,a:active span{
position:absolute; top:90px; z-index:20px; visibility: visible; margin-left:500px;}还有这段
a{
width:80px;
height:56px;
display:block;
border:1px solid #ffffff; 数据挖掘工具
margin:4px 0 4px 25px;
color:#fff;}
</style>
</head>
<body>
<div id="info">
<h3> CSS相册 </h3>
<div id="zs">
<ul>
<li>
<a href="http://www.zishu.cn" class="b1 z" title="照片1">
<span> <img src="img/1.jpg" alt="照片1" /> <br />
这是照片1 <br />
www.zishu.cn
</span>
</a>
</li>
<li> 数据挖掘论坛
<a href="http://www.zishu.cn" class="b2 z" target="_blank" title="照片2">
<span> <img src="img/2.jpg" alt="照片2" /> <br />
这是照片2 <br />
www.zishu.cn
</span>
</a>
</li>
<li>
<a href="http://www.zishu.cn" class="b3 z" target="_blank" title="照片3">
<span> <img src="img/3.jpg" alt="照片3" /> <br />
这是照片3 <br /> 数据挖掘论坛
www.zishu.cn
</span>
</a>
</li>
<li>
<a href="http://www.zishu.cn" class="b4 z" target="_blank" title="照片4">
<span> <img src="img/4.jpg" alt="照片4" /> <br />
这是照片4 <br />
www.zishu.cn
</span>
</a>
</li>
<li>
<a href="http://www.zishu.cn" class="b5 z" target="_blank" title="照片5"> 数据挖掘工具
<span> <img src="img/5.jpg" alt="照片5" /> <br />
这是照片5 <br />
www.zishu.cn
</span>
</a>
</li>
<li>
<a href="http://www.zishu.cn" class="b6 z" target="_blank" title="照片6">
<span> <img src="img/6.jpg" alt="照片6" /> <br />
这是照片6 <br />
www.zishu.cn
</span>
</a>
</li> 数据挖掘工具
<li>
<a href="http://www.zishu.cn" class="b1 z" target="_blank" title="照片1">
<span> <img src="img/1.jpg" alt="照片1" /> <br />
这是照片1 <br />
www.zishu.cn
</span>
</a>
</li>
<li>
<a href="http://www.zishu.cn" class="b2 z" target="_blank" title="照片2">
<span> <img src="img/2.jpg" alt="照片2" /> <br /> 数据挖掘交友
这是照片2 <br />
www.zishu.cn
</span>
</a>
</li>
</ul>
</div>
</div>
</body>
</html>
span{ //应用到页面所有为span的元素
visibility:hidden; //隐藏
position:absolute; //绝对定位
overflow:hidden; //滚动条隐藏
}这段不理解。
----
a:hover span,a:active span{
position:absolute; top:90px; z-index:20px; visibility: visible; margin-left:500px;}还有这段
----这段本身就是错误的写法
哦是把那个margin-left:500改为margin-left:-500px，不知道为什么这样改 这里的相对定位是相对于哪个标签的？ 数据挖掘实验室
还有个问题就是span{}中position为什么用绝对定位？position:absolute;
一般是实现浮动效果，或者拖曳效果
因为元素设置成position:absolute，
那么该元素在显示时是不会占用位置，也就是它会在内容之上显示，
显示以后会你将看不到下面的内容
<div style="position:absolute">
hehe
</div>
<input type="text" value="Test" />
此例子效果是：div内容hehe将在input元素上面显示 有重叠 原因背景色是透明
哦 谢了
margin-left:500改为margin-left:-500px
那为什么是负的呢？什么时候用负的？顶上去 。margin-left:-500px //从当前位置向左移动500px的宽度
|
|
|
|
|
[数据挖掘专家]
[数据挖掘研究院]
[数据挖掘论坛]
[数据挖掘实验室]
|
上一篇：想请人设计一个新闻网站的首页，有兴趣的朋友请来看看
下一篇：DIV+CSS设计时遇到的DIV错位问题
|
|
|
|
