本文档解析了V2EX网站中回复页面的HTML和CSS样式代码，展示了提交按钮的具体实现方式，包括按钮的样式定义、交互行为及加载动效。
由v2ex的回复页面的源码而来
<html>
<head>
<styletype="text/css">...
body,html{...}{
margin:0px;
padding:0px;
font-family:"LucidaGrande",Tahoma,Verdana,arial,sans-serif,hei;
background:#FFFurl("/img/bg_city.jpg")50%0fixedrepeat-y;
}
div.btn_2_o{...}{
width:120px;
height:21px;
background-image:url("btn_bg.png");
-moz-border-radius:5px;
background-color:#E0E0E0;
padding:0px;
margin:0px;
}
div.btn_2_i{...}{
text-align:center;
padding-top:3px;
color:#FFF;
font-size:12px;
}
div.btn_2_ia:link,div.btn_2_ia:visited,div.btn_2_ia:active{...}{
text-decoration:none;
color:#000;
}
div.btn_2_ia:hover{...}{
text-decoration:none;
color:#333;
}
.tip_i{...}{
font-size:12px;
color:#AFAFAF;
text-shadow:none;
}
</style>
<SCRIPTLANGUAGE="JavaScript">...
<!--
vargetObj=function(objId)...{
returndocument.all?document.all[objId]:document.getElementById(objId);
}
//-->
</SCRIPT>
</head>
<body>
<divalign="left"style="margin:10px0px0px0px;padding-left:390px;">
<scripttype="text/javascript">...
vari=newImage(15,15);i.src="loading.gif";
varchange=function()...{
varc=getObj("btn_8323");
c.innerHTML="<imgsrc=loading.gifalign=absmiddle/><spanclass=tip_i>Requesting</span>";
//varo=getObj("form_topic_reply");returno.submit();
}
</script>
<divid="btn_8323"align="center"style="width:120px;">
<divclass="btn_2_o"align="left"onclick="change();">
<divclass="btn_2_i"align="center">
<ahref="#;"onclick="change();"onmousedown="change();">Submit</a>
</div>
</div>
</div>
</div>
</body>
</html>
<html><head><styletype="text/css">...body,html{...}{margin:0px;padding:0px;font-family:"LucidaGrande",Tahoma,Verdana,arial,sans-serif,hei;background:#FFFurl("/img/bg_city.jpg")50%0fixedrepeat-y;}div.btn_2_o{...}{width:120px;height:21px;background-image:url("btn_bg.png");-moz-border-radius:5px;background-color:#E0E0E0;padding:0px;margin:0px;}div.btn_2_i{...}{text-align:center;padding-top:3px;color:#FFF;font-size:12px;}div.btn_2_ia:link,div.btn_2_ia:visited,div.btn_2_ia:active{...}{text-decoration:none;color:#000;}div.btn_2_ia:hover{...}{text-decoration:none;color:#333;}.tip_i{...}{font-size:12px;color:#AFAFAF;text-shadow:none;}</style><SCRIPTLANGUAGE="JavaScript">...<!--vargetObj=function(objId)...{returndocument.all?document.all[objId]:document.getElementById(objId);}//--></SCRIPT></head><body><divalign="left"style="margin:10px0px0px0px;padding-left:390px;"><scripttype="text/javascript">...vari=newImage(15,15);i.src="loading.gif";varchange=function()...{varc=getObj("btn_8323");c.innerHTML="<imgsrc=loading.gifalign=absmiddle/><spanclass=tip_i>Requesting</span>";//varo=getObj("form_topic_reply");returno.submit();}</script><divid="btn_8323"align="center"style="width:120px;"><divclass="btn_2_o"align="left"onclick="change();"><divclass="btn_2_i"align="center"><ahref="#;"onclick="change();"onmousedown="change();">Submit</a></div></div></div></div></body></html>
点击之前截图
点击之后截图
本段代码所需要的图片
loading.gif 
btn_bg.png 
扫一扫
336
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
