z-index不好用?
按照老师说的layer遮罩，我怎么ul显示不出来呢，总是被遮罩层挡住？求大神告知。
2 回答
我没有按照老师讲的用absolute,还有float来布局,因为浮动本身就具有破坏性,让父元素高度塌陷,要不停的去清除浮动带来的影响,还有就是老师ul隐藏用的是绝对定位absolute加上relative,很容易飞掉,我是用的绝对定位在没有relative限制下的位置跟随特性做的.直接给你附上代码.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title> 下拉列表篇</title>
<style>
body{font:14px/28px "微软雅黑";background-color: lightblue;}
ul,li{list-style:none;margin:0;padding:0;}
b{margin:0;padding:0;}
#box{position:absolute;background-color: #fff;top:0;bottom:0;left:0;right:0;width: 500px;height: 300px;margin:auto;}
.province{width: 320px;height: 42px;background-color: red;margin:80px auto; }
.province strong{color:#fff;font-size:22px;vertical-align:middle;padding-left:10px;}
#selectProvince{display:inline-block;width: 200px;height: 28px;background-color: #fff;vertical-align:middle;cursor:pointer;padding-left:10px;}
.fz{display:inline-block;height: 100%;vertical-align:middle;}
.trangle{display:inline-block;width: 0;height: 0;border-style:solid;border-color:#000 transparent transparent transparent;border-width-top:3px;margin-left:20px;}
#selectProvince:hover .trangle{display:inline-block;width: 0;height: 0;border-style:solid;border-color:transparent transparent #000 transparent;border-width-bottom:3px;margin-left:20px;vertical-align:2px;}
#allProvince{position:absolute;margin-top:42px;width: 310px;line-height:30px;}
#allProvince li{height:30px;border-bottom:1px solid #ccc;}
#allProvince li b{font-weight:bold;display:inline-block;width: 40px;text-align:center;}
#allProvince li span{padding:0 10px;cursor:pointer;}
#allProvince li span:hover{color:red;}
</style>
</head>
<body>
<div id="box">
<div>
<ul id="allProvince">
<li><b>A</b><span>北京</span></li>
<li><b>B</b><span>安徽</span></li>
<li><b>C</b><span>重庆</span></li>
<li><b>F</b><span>福建</span></li>
<li><b>G</b><span>广东</span><span>广西</span></li>
<li><b>H</b><span>河南</span><span>河北</span><span>黑龙江</span></li>
<li><b>J</b><span>吉林</span></li>
<li><b>N</b><span>内蒙古</span></li>
<li><b>Q</b><span>青海</span></li>
</ul>
<strong>送货至:</strong>
<span id="selectProvince">北京<b></b></span>
<span></span>
</div>
</div>
</body>
</html>
举报
0/150
提交
取消
