昨天同事发给我一个图表问CSS可以实现不 ,后来看了看,感觉可以实现,不过最后只实现了初步的样子
 
图片如下:
css代码如下:
 
<style>
li{float:left;}
ul,li{margin:0;padding:0;}
ul{list-style:none; position:relative; height:200px; width:50px;float:left;}
li{background:url(1.gif) no-repeat; width:45px; height:198px; position:absolute; bottom:0px;}
.a{background:url(2.gif) no-repeat right bottom; height:9px; width:9px; position:absolute;right:0; bottom:0; z-index:1;}
</style>
 
 
html如下:
 
<ul>
<span class="a"></span>
<li style="height:20px" id="a1"></li>

</ul>
<ul>
<span class="a"></span>
<li style="height:30px"></li>

</ul>
<ul>
<span class="a"></span>
<li style="height:40px"></li>

</ul>
<ul>
<span class="a"></span>
<li style="height:50px"></li>

</ul>
<ul>
<span class="a"></span>
<li style="height:60px"></li>

</ul>
<ul>
<span class="a"></span>
<li style="height:70px"></li>

</ul>
<ul>
<span class="a"></span>
<li style="height:80px"></li>

</ul>
 
 
实现效果如下:
 
 
由来想用js简单控制一下,这里感谢同事指点了下
 
function addHeight(){
 var heights="";
var $ = document.getElementsByTagName("li");
alert($.length);
for(var j=0;j<=$.length;j++){
 
 heights=$[j].style.height;
 heights=heights.replace("px","")
 
 var i=0;
 i=parseInt(heights)+10;
 
 if(i>198)
 alert("已经是最高高度");
 else
 $[j].style.height = i+"px";
 
 }
}
 
最后在ie下有问题,不知道怎么解决,不过可以实现脚本功能 会提示style不是对象
 
ff下没有问题