作者cgcat (小绵羊赶集)
看板Web_Design
标题[问题] 如何将右边选单效果的呈现改变
时间Fri Aug 24 13:46:42 2007
我在网路上学相簿的效果
它的呈现是这样
http://bbs.blueidea.com/thread-2649250-1-1.html
但我想要自己变成
左边小图的选项不是以overflow一条直线的呈现
而是
5个5个一列的方式
我的想法应该是改原始档里面的
#zs的部分
将overflow:auto;去掉应该会以高度去变化
多的会跳到下一列去
但是这样去掉之後
他便会超过我所写的infor部分
所以我应该更改哪个一部分才对呢?
非常感谢!!
附上
html
<div id="info">
<h3>文字</h3>
<div id="zs">
<ul>
<li><a href="
http://www.zishu.cn" class="b1 z" target="_blank" ><span><img src="demo2_08.jpg" alt="抒覇1" /><br />
<p class="aa">文字</p>
</span></a></li>
<li><a href="
http://www.zishu.cn" class="b2 z" target="_blank"><span><img src="images/a2.jpg" alt="抒覇2" /><br />
文字<br />
www.zishu.cn</span></a></li>
<li><a href="
http://www.zishu.cn" class="b2 z" target="_blank"><span><img
文字<br />
www.zishu.cn</span></a></li>
<li><a href="
http://www.zishu.cn" class="b2 z" target="_blank"><span><img
文字<br />
www.zishu.cn</span></a></li>
</ul>
</div>
</div>
css
body{
margin:0;
padding:0;
font-size:12px;
background:#333333;
line-height:1.7;
font-family:Verdana, "摰鲸붓";
overflow:hidden ;/* ie 无效 */
}
#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;
color:#CC0000;
font-size:12px;
color:#FFF;
}
span{/* 将出现的图隐藏起来*/
visibility:hidden;
position:absolute;
overflow:hidden;
}
ul{
list-style:none;
margin:0;
padding:0;
}
li a:hover{
cursor:pointer;/*有来解除z-index造成的bug*/
}
li a:hover span { /* 大图出现的位子*/
position:absolute;
top:90px;
z-index:20px;
visibility: visible;
margin-left:-500px;
}
#info img{ /* infor里面图的尺寸*/
width:400px;
height:280px;
border:7px solid #FFFFFF;
}
#zs{ /*们右边小图拉霸的部分*/
height:340px;
overflow:auto;
width:140px;
float:right;
margin-top:20px;
margin-bottom:50px;
border:1px solid #000;
}
.z{ /* 小图显示的效果*/
width:80px;
height:56px;
display:block;
border:1px solid #FFFFFF;
margin:4px 0 4px 25px;
}
.aa {
margin-top:10px;
background-color:#fff;
width:415px;
height:25px;
padding-top:5px;
}
.b1{ background-image:url(demo2_08.jpg)}
.b2{ background:url(images/b2.jpg)}
.b3{ background:url(images/b3.jpg)}
.b4{ background:url(images/b4.jpg)}
.b5{ background:url(images/b5.jpg)}
.b6{ background:url(images/b6.jpg)}
</style>
--
※ 发信站: 批踢踢实业坊(ptt.cc)
◆ From: 60.248.141.208