纯css 鼠标移上查看大图的效果- CSS样式表

当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > 纯css 鼠标移上查看大图的效果

CSS样式表: css：之三行三列等高布局图文教程; 一些很不错的css技巧,但也常为人们所忽略; div+css布局必须要知道的css条件注释理论及实践; 超赞的随机颜色搭配工具; 应用WEB标准实例：列表页面的制作; 用CSS给图片打标的方法; 用css动态生成闪字的代码; 用滑动门技术设计按钮的图文教程; 如何实现多风格选择样式实时切换; 关于超链接的下划线使用说明; 用CSS给图片打标的代码; 学习样式表CSS参考-常用的CSS知识; XHTML下用dl,dt,dd标签实现翻页的效果代码; CSS网页布局入门教程1：一列固定宽度; CSS网页布局入门教程2：一列自适应宽度; CSS网页布局入门教程3：一列固定宽度居中; CSS网页布局入门教程4：二列固定宽度; CSS网页布局入门教程8：三列浮动中间列宽度自适应; DIV+CSS 英文命名规范; 发现四种在网页中使用CSS样式表的方法

No. « ‹ 86 87 88 89 › »

技术文章搜索

关键字

CSS样式表中的纯css 鼠标移上查看大图的效果

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-11 浏览: 207 ::

收藏到网摘: n/a

解决在IE6下文字溢出（多出一行字）的解决方法小结 css 完美清除浮动的两种解决方案

<!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:0;
padding:0;
}
img {border:0;}
#main_body {
width:730px;
margin:100px auto 0;
padding:10px 0 30px 10px;
border:#CCCCCC 1px solid;
background-color:#E6E6E6;
font-size:12px;
}
#main_body ul {
height:210px;
}
#main_body li {
float:left;
height:210px;
width:24.5%;
overflow:visible;
list-style:none;
list-style-position:outside;
}
#main_body a span img {
margin:0 auto;
width:100%;
}
.main a:link span, .main a:visited span {
width:160px;
height:160px;
border:1px solid #ccc;
padding:1px;
overflow:hidden;
display:block;
}
.main a:link, .main a:visited {
margin:0 auto;
height:210px;
width:166px;
display:block;
}
.main a:hover, .main a:active {
width:232px;
height:300px;
position:relative;
overflow:hidden;
left:50%;
margin-left:-100px;
margin-top:-64px;
z-index:100px;
cursor:pointer;
}
.main a:hover span, .main a:active span{
width:220px;
height:220px;
display:block;
overflow:hidden;
background:#fff;
padding:2px;
border:2px solid #e6e2e3;
}
.main a.last:hover, .main a.last:active {
width:232px;
height:300px;
position:relative;
overflow:hidden;
left:50%;
margin-left:-123px;
z-index:100px;
cursor:pointer;
}
.main a b {
width:160px;
margin:6px auto 2px;
display:block;
overflow:hidden;
text-align:center;
height:36px;
line-height:18px;
font-weight:normal;
}
.main a em {
width:160px;
margin:0 auto;
line-height:18px;
font-weight:bold;
color:#FF6600;
display:block;
text-align:center;
}
</style>
</head>
<body>
<div id="main_body" class="main">
<ul>
<li><a href="#" target="_blank"><img src="http://img08.taobaocdn.com/bao/uploaded/i8/T13t0eXdgtK0KKdRA2_044834.jpg_b.jpg" />【男人密码】★【七匹狼】高档男士休闲西服单件 00834203￥：268.0</a></li>
<li><a href="#" target="_blank"><img src="http://img08.taobaocdn.com/bao/uploaded/i8/T13t0eXdgtK0KKdRA2_044834.jpg_b.jpg" />【男人密码】★【七匹狼】高档男士休闲西服单件 00834203￥：268.0</a></li>
<li><a href="#" target="_blank"><img src="http://img08.taobaocdn.com/bao/uploaded/i8/T13t0eXdgtK0KKdRA2_044834.jpg_b.jpg" />【男人密码】★【七匹狼】高档男士休闲西服单件 00834203￥：268.0</a></li>
<li><a href="#" target="_blank" class="last"><img src="http://img08.taobaocdn.com/bao/uploaded/i8/T13t0eXdgtK0KKdRA2_044834.jpg_b.jpg" />【男人密码】★【七匹狼】高档男士休闲西服单件 00834203￥：268.0</a></li>
</ul>
<div>
</body>
</html>

提示：您可以先修改部分代码再运行

解决在IE6下文字溢出（多出一行字）的解决方法小结 css 完美清除浮动的两种解决方案

CSS样式表 中的 纯css 鼠标移上查看大图的效果

评论 (0) All

CSS样式表中的纯css 鼠标移上查看大图的效果