怎么用CSS控制ul的li 做成叠层效果的图片?类似斗地主牌排列那样子？ 给我个实例，谢谢了。
4个回答
展开全部
层叠起来主要通过设置margin负值来实现。具体看这个例子。
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
ul,li{ margin:0; padding:0; list-style:none}
ul li{ float:left; width:80px; height:100px; background:#333; color:#FFF; padding:10px; border:1px solid #06F; margin-left:-70px}
</style>
</head>
<body>
<ul>
<li style="margin-left:0">2</li>
<li>A</li>
<li>K</li>
<li>Q</li>
<li>J</li>
<li>10</li>
<li>9</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
ul,li{ margin:0; padding:0; list-style:none}
ul li{ float:left; width:80px; height:100px; background:#333; color:#FFF; padding:10px; border:1px solid #06F; margin-left:-70px}
</style>
</head>
<body>
<ul>
<li style="margin-left:0">2</li>
<li>A</li>
<li>K</li>
<li>Q</li>
<li>J</li>
<li>10</li>
<li>9</li>
</ul>
</body>
</html>
追问
这个效果我自己控制出来了。用z-index设置每个li里面的图片层次就可以了。
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
tzdtt 回答是对的，这个肯定是用绝对+相对定位来写的。靠z-index来控制层级
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
我不知道一楼回答的是什么玩意，一点不靠谱！
用绝对相对去写
用绝对相对去写
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
