网页常用动态效果--淘宝竖条广告

布局：.box>ol+ul

ol和ul均整体左浮动，box清浮

CSS：

 1             .box{
 2                 width:250px;
 3                 height:250px;
 4                 position: relative;
 5                 overflow:hidden;
 6             }
 7             ol{
 8                 width:49px;
 9                 height:250px;
10                 float: left;
11                 border-right:1px solid black;
12             }
13             ol li{
14                 height:35px;
15                 line-height:35px;
16                 text-align: center;
17                 background-color: lightcyan;
18                 border-bottom:1px solid #333;
19             }
20             ol li.current{
21                 background: yellowgreen;
22             }
23             ul{
24                 width:200px;
25                 height:250px;
26                 float: left;
27             }

JQ:

 1 

转载于:https://www.cnblogs.com/shisanjun/p/4834544.html