<html>
<head>
<title>creat table</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"></meta>
<script language="javascript" type="text/javascript" src="jquery-1.7.1.min.js"></script>
<style type="text/css">
.divstyle{
display:block;
height:32px;
width:100%;
background-color:#294163;
cursor:pointer;
}
span{
display:inline-block;
height:47px;
}
#divfront{
width:15px;
background-image:url(main_hl1.gif);
}
#divcontent{
min-width:60px;
background-image:url(main_hb.gif);
color:white;
font-weight:bold;
font-size:1.5em;/*可以通过修改字体大小的方式提高span的高度*/
vertical-align:top;/*问题出在这里*/
text-align:center;
}
#divback{
width:15px;
background-image:url(main_hl2.gif);
}
.divstyle[clicked] #divback{
display:none;
}
#divtail{
width:60px;display:none;
background-image:url(main_hr.gif);
}
.divstyle[clicked] #divtail{
display:inline-block;
}
</style>
<script type="text/javascript">
$(function(){
$("div.divstyle").mousedown(function(){
$("#divcontent").css("font-size","1em");
});
$("div.divstyle").mouseup(function(){
$("#divcontent").animate({fontSize:"1.5em"},50);
});
$("div.divstyle").click(function(){
if($(this).attr("clicked")){
$(this).removeAttr("clicked");
}
else{
$(this).attr("clicked","sd");
}
});
});
</script>
</head>
<body>
<div class="divstyle" >
<span id="divfront"></span>
<span id="divcontent">按钮上的文字</span>
<span id="divback"></span>
<span id="divtail"></span>
</div>
</body>
</html>
