您的位置：首页 > 其它

12个div逐个显示效果

2018-10-12 13:52 369 查看
这个效果一般可以用于导航栏目显示，图片显示。如果你的层名字不规则（不是div1、2、3...），可以先把她们放在数组里，然后调用。
无标题文档

#container{ width:60%; height:80%; position:absolute; text-align:center}
#div1,#div2,#div3,#div4,#div5,#div6,#div7,#div8,#div9,#div10,#div11,#div12{ width:80px; height:80px; background:#eeeeee; margin:0 2px 2px 0; padding:20px; border:3px #ccc double; font:30px Verdana, Arial, Helvetica, sans-serif; color:#666; float:left; display:none }

1
2
3
4
5
6
7
8
9
10
11
12


顺序显示

#container{
position:absolute;
border:1px solid #666;
padding:10px;
}
#container li{
display:none;
list-style:none;
float:left;
margin:1px;
padding:20px;
width:80px;
height:80px;
border:3px #ccc double;
background:#eee;
font:30px Verdana, Arial, Helvetica, sans-serif;
color:#666;
}
#container .orderly-change{
border:3px #666 double;
background:#ccc;
}


    

  • 1
    • 

  • 2
    • 

  • 3
    • 

  • 4
    • 

  • 5
    • 

  • 6
    • 

  • 7
    • 

  • 8
    • 

  • 9
    • 

  • 10
    • 

  • 11
    • 

  • 12
    •
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航