html5 的一个应用
来源：互联网 发布：华安股票交易软件 编辑：程序博客网 时间：2024/05/01 17:03
关于html的这块的文章最近没怎么写，学习的生活比较忙啊，忙！所以今天给大家分享一个我做的应用吧，是用html+css+javascript做的一个市场价转换。大家可以看一看，有什么不好的可以给我提一提建议！
html文件：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>市场价转换</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script src="js/zns_move.js" type="text/javascript"></script><script src="js/zns_from.js" type="text/javascript"></script><link rel="stylesheet" href="zns_style.css" type="text/css"></link><script type="text/javascript" language="javascript" src="shichang.js" charset="utf-8"></script></head><body><div id="content"> <h1>市场价转换</h1> <!-- 主界面 --> <div id="jiemian1"> <div id="steps1"> <form id="formElem" name="formElem"> <fieldset class="step"> <legend >主页面</legend> <a href="#"><img src="image/chaoshi1.jpg" style="width: 300px; margin-left: 0px;" onclick="jie1();"></a> </fieldset> </form> </div> </div> <!-- 超市价钱比较 --> <div id="wrapper" style="display:none;"> <div id="steps2"> <form id="formElem" name="formElem" > <fieldset class="step"> <legend>市场价</legend> <p> <label >物品名称</label> <input id="xin1" value="商品" type='text' style="width: 200px;" AUTOCOMPLETE=OFF /> <label>物品价钱(元)</label> <input id="xin2" value="0" type='text' style="width: 200px;" AUTOCOMPLETE=OFF /> <label>物品质量</label> <input id="xin3" value="0" type='text' style="width: 200px;" AUTOCOMPLETE=OFF /> <select id="xiala" style="width: 78px; margin-left: 5px;"> <option id="xin4">斤</option> <option id="xin5">两</option> <option id="xin6">千克</option> <option id="xin7">克</option> </select> <button id="bt1" class="button black" onclick="zhuanhuan();">OK</button> </p> </fieldset> </form> </div> <div id="steps3" style="display:none;"> <form id="formElem" name="formElem" > <fieldset class="step"> <legend>商品单价</legend> <p> <label>商品信息(元/千克)</label> <input id="pq11" style="width:220px;height:20px;margin-left: 0px;" type='text' AUTOCOMPLETE=OFF readOnly/> <label>要买商品数量</label> <input id="pq12" value="1" style="width:50px;height:20px;margin-left: 0px;" type='text' AUTOCOMPLETE=OFF /> <label style="margin-left: 50px;margin-top: 5px;width: 70px; ">是否购买</label> <input id="pq13" type="checkbox" style="margin-left: 10px;margin-top: 12px;width: 20px;"> </p> </fieldset> </form> </div> <div id="steps4" style="display:none;"> <form id="formElem" name="formElem" > <fieldset class="step"> <p> <label >商品信息(元/千克)</label> <input id="pq21" style="width:220px;height:20px;margin-left: 0px;" type='text' AUTOCOMPLETE=OFF readOnly/> <label>要买商品数量</label> <input id="pq22" value="1" style="width:50px;height:20px;margin-left: 0px;" type='text' AUTOCOMPLETE=OFF /> <label style="margin-left: 50px;margin-top: 5px;width: 70px; ">是否购买</label> <input id="pq23" type="checkbox" style="margin-left: 10px;margin-top: 12px;width: 20px;"> </p> </fieldset> </form> </div> <div id="steps5" style="display:none;"> <form id="formElem" name="formElem" > <fieldset class="step"> <p> <label >商品信息(元/千克)</label> <input id="pq31" style="width:220px;height:20px;margin-left: 0px;" type='text' AUTOCOMPLETE=OFF readOnly/> <label>要买商品数量</label> <input id="pq32" value="1" style="width:50px;height:20px;margin-left: 0px;" type='text' AUTOCOMPLETE=OFF /> <label style="margin-left: 50px;margin-top: 5px;width: 70px; ">是否购买</label> <input id="pq33" type="checkbox" style="margin-left: 10px;margin-top: 12px;width: 20px;"> </p> </fieldset> </form> </div> <div id="steps6" style="display:none;"> <form id="formElem" name="formElem" > <fieldset class="step"> <p> <label >商品信息(元/千克)</label> <input id="pq41" style="width:220px;height:20px;margin-left: 0px;" type='text' AUTOCOMPLETE=OFF readOnly/> <label>要买商品数量</label> <input id="pq42" value="1" style="width:50px;height:20px;margin-left: 0px;" type='text' AUTOCOMPLETE=OFF /> <label style="margin-left: 50px;margin-top: 5px;width: 70px; ">是否购买</label> <input id="pq43" type="checkbox" style="margin-left: 10px;margin-top: 12px;width: 20px;"> </p> </fieldset> </form> </div> <div id="steps7" style="display:none;"> <form id="formElem" name="formElem" > <fieldset class="step"> <p> <label >商品信息(元/千克)</label> <input id="pq51" style="width:220px;height:20px;margin-left: 0px;" type='text' AUTOCOMPLETE=OFF readOnly/> <label>要买商品数量</label> <input id="pq52" value="1" style="width:50px;height:20px;margin-left: 0px;" type='text' AUTOCOMPLETE=OFF /> <label style="margin-left: 50px;margin-top: 5px;width: 70px; ">是否购买</label> <input id="pq53" type="checkbox" style="margin-left: 10px;margin-top: 12px;width: 20px;"> </p> </fieldset> </form> </div> <div id="steps8" style="display:none;"> <form id="formElem" name="formElem" > <fieldset class="step"> <p> <label >商品信息(元/千克)</label> <input id="pq61" style="width:220px;height:20px;margin-left: 0px;" type='text' AUTOCOMPLETE=OFF readOnly/> <label>要买商品数量</label> <input id="pq62" value="1" style="width:50px;height:20px;margin-left: 0px;" type='text' AUTOCOMPLETE=OFF /> <label style="margin-left: 50px;margin-top: 5px;width: 70px; ">是否购买</label> <input id="pq63" type="checkbox" style="margin-left: 10px;margin-top: 12px;width: 20px;"> </p> </fieldset> </form> </div> <div id="steps9" style="display:none;"> <form id="formElem" name="formElem" > <fieldset class="step"> <p> <label >商品信息(元/千克)</label> <input id="pq71" style="width:220px;height:20px;margin-left: 0px;" type='text' AUTOCOMPLETE=OFF readOnly/> <label>要买商品数量</label> <input id="pq72" value="1" style="width:50px;height:20px;margin-left: 0px;" type='text' AUTOCOMPLETE=OFF /> <label style="margin-left: 50px;margin-top: 5px;width: 70px; ">是否购买</label> <input id="pq73" type="checkbox" style="margin-left: 10px;margin-top: 12px;width: 20px;"> </p> </fieldset> </form> </div> <div id="steps10" style="display:none;"> <form id="formElem" name="formElem" > <fieldset class="step"> <p> <label >商品信息(元/千克)</label> <input id="pq81" style="width:220px;height:20px;margin-left: 0px;" type='text' AUTOCOMPLETE=OFF readOnly/> <label>要买商品数量</label> <input id="pq82" value="1" style="width:50px;height:20px;margin-left: 0px;" type='text' AUTOCOMPLETE=OFF /> <label style="margin-left: 50px;margin-top: 5px;width: 70px; ">是否购买</label> <input id="pq83" type="checkbox" style="margin-left: 10px;margin-top: 12px;width: 20px;"> </p> </fieldset> </form> </div> <div id="steps11" style="display:none;"> <form id="formElem" name="formElem" > <fieldset class="step"> <p> <label >商品信息(元/千克)</label> <input id="pq91" style="width:220px;height:20px;margin-left: 0px;" type='text' AUTOCOMPLETE=OFF readOnly/> <label>要买商品数量</label> <input id="pq92" value="1" style="width:50px;height:20px;margin-left: 0px;" type='text' AUTOCOMPLETE=OFF /> <label style="margin-left: 50px;margin-top: 5px;width: 70px; ">是否购买</label> <input id="pq93" type="checkbox" style="margin-left: 10px;margin-top: 12px;width: 20px;"> </p> </fieldset> </form> </div> <div id="steps12" style="display:none;"> <form id="formElem" name="formElem" > <fieldset class="step"> <p> <label >商品信息(元/千克)</label> <input id="pq101" style="width:220px;height:20px;margin-left: 0px;" type='text' AUTOCOMPLETE=OFF readOnly/> <label>要买商品数量</label> <input id="pq102" value="1" style="width:50px;height:20px;margin-left: 0px;" type='text' AUTOCOMPLETE=OFF /> <label style="margin-left: 50px;margin-top: 5px;width: 70px; ">是否购买</label> <input id="pq103" type="checkbox" style="margin-left: 10px;margin-top: 12px;width: 20px;"> </p> </fieldset> </form> </div> <div id="steps13" style="display:none;"> <form id="formElem" name="formElem" > <fieldset class="step"> <p> <label >商品信息(元/千克)</label> <input id="pq111" style="width:220px;height:20px;margin-left: 0px;" type='text' AUTOCOMPLETE=OFF readOnly/> <label>要买商品数量</label> <input id="pq112" value="1" style="width:50px;height:20px;margin-left: 0px;" type='text' AUTOCOMPLETE=OFF /> <label style="margin-left: 50px;margin-top: 5px;width: 70px; ">是否购买</label> <input id="pq113" type="checkbox" style="margin-left: 10px;margin-top: 12px;width: 20px;"> </p> </fieldset> </form> </div> <div id="steps14" style="display:none;"> <form id="formElem" name="formElem" > <fieldset class="step"> <p> <label >商品信息(元/千克)</label> <input id="pq121" style="width:220px;height:20px;margin-left: 0px;" type='text' AUTOCOMPLETE=OFF readOnly/> <label>要买商品数量</label> <input id="pq122" value="1" style="width:50px;height:20px;margin-left: 0px;" type='text' AUTOCOMPLETE=OFF /> <label style="margin-left: 50px;margin-top: 5px;width: 70px; ">是否购买</label> <input id="pq123" type="checkbox" style="margin-left: 10px;margin-top: 12px;width: 20px;"> </p> </fieldset> </form> </div> <div id="steps15" style="display:none;"> <form id="formElem" name="formElem" > <fieldset class="step"> <p> <label >商品信息(元/千克)</label> <input id="pq131" style="width:220px;height:20px;margin-left: 0px;" type='text' AUTOCOMPLETE=OFF readOnly/> <label>要买商品数量</label> <input id="pq132" value="1" style="width:50px;height:20px;margin-left: 0px;" type='text' AUTOCOMPLETE=OFF /> <label style="margin-left: 50px;margin-top: 5px;width: 70px; ">是否购买</label> <input id="pq133" type="checkbox" style="margin-left: 10px;margin-top: 12px;width: 20px;"> </p> </fieldset> </form> </div> <div id="steps16" style="display:none;"> <form id="formElem" name="formElem" > <fieldset class="step"> <p> <label >商品信息(元/千克)</label> <input id="pq141" style="width:220px;height:20px;margin-left: 0px;" type='text' AUTOCOMPLETE=OFF readOnly/> <label>要买商品数量</label> <input id="pq142" value="1" style="width:50px;height:20px;margin-left: 0px;" type='text' AUTOCOMPLETE=OFF /> <label style="margin-left: 50px;margin-top: 5px;width: 70px; ">是否购买</label> <input id="pq143" type="checkbox" style="margin-left: 10px;margin-top: 12px;width: 20px;"> </p> </fieldset> </form> </div> <div id="steps17" style="display:none;"> <form id="formElem" name="formElem" > <fieldset class="step"> <p> <label >商品信息(元/千克)</label> <input id="pq151" style="width:220px;height:20px;margin-left: 0px;" type='text' AUTOCOMPLETE=OFF readOnly/> <label>要买商品数量</label> <input id="pq152" value="1" style="width:50px;height:20px;margin-left: 0px;" type='text' AUTOCOMPLETE=OFF /> <label style="margin-left: 50px;margin-top: 5px;width: 70px; ">是否购买</label> <input id="pq153" type="checkbox" style="margin-left: 10px;margin-top: 12px;width: 20px;"> </p> </fieldset> </form> </div> <div id="steps18" style="display:none;"> <form id="formElem" name="formElem" > <fieldset class="step"> <p> <label >商品信息(元/千克)</label> <input id="pq161" style="width:220px;height:20px;margin-left: 0px;" type='text' AUTOCOMPLETE=OFF readOnly/> <label>要买商品数量</label> <input id="pq162" value="1" style="width:50px;height:20px;margin-left: 0px;" type='text' AUTOCOMPLETE=OFF /> <label style="margin-left: 50px;margin-top: 5px;width: 70px; ">是否购买</label> <input id="pq163" type="checkbox" style="margin-left: 10px;margin-top: 12px;width: 20px;"> </p> </fieldset> </form> </div> <div id="steps19" style="display:none;"> <form id="formElem" name="formElem" > <fieldset class="step"> <p> <label >商品信息(元/千克)</label> <input id="pq171" style="width:220px;height:20px;margin-left: 0px;" type='text' AUTOCOMPLETE=OFF readOnly/> <label>要买商品数量</label> <input id="pq172" value="1" style="width:50px;height:20px;margin-left: 0px;" type='text' AUTOCOMPLETE=OFF /> <label style="margin-left: 50px;margin-top: 5px;width: 70px; ">是否购买</label> <input id="pq173" type="checkbox" style="margin-left: 10px;margin-top: 12px;width: 20px;"> </p> </fieldset> </form> </div> <div id="steps20" style="display:none;"> <form id="formElem" name="formElem" > <fieldset class="step"> <p> <label >商品信息(元/千克)</label> <input id="pq181" style="width:220px;height:20px;margin-left: 0px;" type='text' AUTOCOMPLETE=OFF readOnly/> <label>要买商品数量</label> <input id="pq182" value="1" style="width:50px;height:20px;margin-left: 0px;" type='text' AUTOCOMPLETE=OFF /> <label style="margin-left: 50px;margin-top: 5px;width: 70px; ">是否购买</label> <input id="pq183" type="checkbox" style="margin-left: 10px;margin-top: 12px;width: 20px;"> </p> </fieldset> </form> </div> <div id="navigation" style="display:none;"> <ul> <li class="selected"> <button id="bt1" class="button black" onclick="result();">确认购买</button> <button id="bt1" class="button black" onclick="fanhui1();">返回主页</button> <span></span> </li> </ul> </div> <!-- 结果汇总 --> <div id="jghz" style="display:none;"> <form id="formElem" name="formElem" > <fieldset class="step"> <p> <label id="l1" style="display:none;"></label> <input id="i1" style="display:none; width:220px;height:20px;margin-left: 0px;" type='text' AUTOCOMPLETE=OFF readOnly/> <label id="l2" style="display:none;"></label> <input id="i2" style="display:none; width:220px;height:20px;margin-left: 0px;" type='text' AUTOCOMPLETE=OFF readOnly/> <label id="l3" style="display:none;"></label> <input id="i3" style="display:none; width:220px;height:20px;margin-left: 0px;" type='text' AUTOCOMPLETE=OFF readOnly/> <label id="l4" style="display:none;"></label> <input id="i4" style="display:none; width:220px;height:20px;margin-left: 0px;" type='text' AUTOCOMPLETE=OFF readOnly/> <label id="l5" style="display:none;"></label> <input id="i5" style="display:none; width:220px;height:20px;margin-left: 0px;" type='text' AUTOCOMPLETE=OFF readOnly/> <label id="l6" style="display:none;"></label> <input id="i6" style="display:none; width:220px;height:20px;margin-left: 0px;" type='text' AUTOCOMPLETE=OFF readOnly/> <label id="l7" style="display:none;"></label> <input id="i7" style="display:none; width:220px;height:20px;margin-left: 0px;" type='text' AUTOCOMPLETE=OFF readOnly/> <label id="l8" style="display:none;"></label> <input id="i8" style="display:none; width:220px;height:20px;margin-left: 0px;" type='text' AUTOCOMPLETE=OFF readOnly/> <label id="l9" style="display:none;"></label> <input id="i9" style="display:none; width:220px;height:20px;margin-left: 0px;" type='text' AUTOCOMPLETE=OFF readOnly/> <label id="l10" style="display:none;"></label> <input id="i10" style="display:none; width:220px;height:20px;margin-left: 0px;" type='text' AUTOCOMPLETE=OFF readOnly/> <label id="l11" style="display:none;"></label> <input id="i11" style="display:none; width:220px;height:20px;margin-left: 0px;" type='text' AUTOCOMPLETE=OFF readOnly/> <label id="l12" style="display:none;"></label> <input id="i12" style="display:none; width:220px;height:20px;margin-left: 0px;" type='text' AUTOCOMPLETE=OFF readOnly/> <label id="l13" style="display:none;"></label> <input id="i13" style="display:none; width:220px;height:20px;margin-left: 0px;" type='text' AUTOCOMPLETE=OFF readOnly/> <label id="l14" style="display:none;"></label> <input id="i14" style="display:none; width:220px;height:20px;margin-left: 0px;" type='text' AUTOCOMPLETE=OFF readOnly/> <label id="l15" style="display:none;"></label> <input id="i15" style="display:none; width:220px;height:20px;margin-left: 0px;" type='text' AUTOCOMPLETE=OFF readOnly/> <label id="l16" style="display:none;"></label> <input id="i16" style="display:none; width:220px;height:20px;margin-left: 0px;" type='text' AUTOCOMPLETE=OFF readOnly/> <label id="l17" style="display:none;"></label> <input id="i17" style="display:none; width:220px;height:20px;margin-left: 0px;" type='text' AUTOCOMPLETE=OFF readOnly/> <label id="l20" style="display:none; width:220px"></label> <textarea id="shuchu" cols="50" rows="5" style="display:none; width:400px; height:103px; margin-left: 80px;"></textarea> </p> </fieldset> </form> </div> <div id="navigation2" style="display:none;"> <ul> <li class="selected"> <button id="bt1" class="button black" onclick="fanhui1();">返回主页</button> <span></span> </li> </ul> </div> </div> <input id="xxx" value="总共消费：" style="display:none; width:220px;height:20px;margin-left: 0px;" type='text' AUTOCOMPLETE=OFF readOnly/> <input id="x" value="商品质量不能为0,请重新输入" style="display:none; width:220px;height:20px;margin-left: 0px;" type='text' AUTOCOMPLETE=OFF readOnly/> </div></body></html>css文件：
*{ margin:0px; padding:0px;}body{ color:#444444; font-size:13px; background: #f2f2f2;font-family:"Microsoft YaHei";}#content{ margin:15px auto; text-align:center; width:600px; position:relative; height:100%;}#content h1{color:#ccc;font-size:36px;text-shadow:1px 1px 1px #fff;padding:20px;}#wrapper{ -moz-box-shadow:0px 0px 3px #aaa; -webkit-box-shadow:0px 0px 3px #aaa; box-shadow:0px 0px 3px #aaa; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; border:2px solid #fff; background-color:#f9f9f9; width:600px; overflow:hidden;}#jiemian1{ -moz-box-shadow:0px 0px 3px #aaa; -webkit-box-shadow:0px 0px 3px #aaa; box-shadow:0px 0px 3px #aaa; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; border:2px solid #fff; background-color:#f9f9f9; width:600px; overflow:hidden;}#jiemian3{ -moz-box-shadow:0px 0px 3px #aaa; -webkit-box-shadow:0px 0px 3px #aaa; box-shadow:0px 0px 3px #aaa; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; border:2px solid #fff; background-color:#f9f9f9; width:600px; overflow:hidden;}#xiala{width:20px;}#steps1{ width:3200px;/*height:320px;*/ overflow:hidden;}.step{ float:left; width:600px;/*height:320px;*/}#navigation{ height:45px; background-color:#e9e9e9; border-top:1px solid #fff; -moz-border-radius:0px 0px 10px 10px; -webkit-border-bottom-left-radius:10px; -webkit-border-bottom-right-radius:10px; border-bottom-left-radius:10px; border-bottom-right-radius:10px;}#navigation ul{ list-style:none;float:left;margin-left:22px;}#navigation ul li{float:left; border-right:1px solid #ccc; border-left:1px solid #ccc; position:relative;margin:0px 2px;}#navigation ul li { display:block; height:45px; background-color:#444; color:#777; outline:none; font-weight:bold; text-decoration:none; line-height:45px; padding:0px 20px; border-right:1px solid #fff; border-left:1px solid #fff; background:#f0f0f0; background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(240,240,240)), color-stop(0.55, rgb(227,227,227)), color-stop(0.78, rgb(240,240,240)) ); background: -moz-linear-gradient( center bottom, rgb(240,240,240) 9%, rgb(227,227,227) 55%, rgb(240,240,240) 78% )}#navigation ul li a:hover,#navigation ul li.selected a{ background:#d8d8d8; color:#666; text-shadow:1px 1px 1px #fff;}#steps1 form fieldset{ border:none; padding-bottom:20px;}#steps1 form legend{ text-align:center; background-color:#f0f0f0; color:#666; font-size:24px; text-shadow:1px 1px 1px #fff; font-weight:bold; float:left; width:590px; padding:5px 0px 5px 10px; margin:10px 0px; border-bottom:1px solid #fff; border-top:1px solid #d9d9d9;}#steps1 form p{ float:left; clear:both; margin:5px 0px; background-color:#f4f4f4; border:1px solid #fff; width:400px; padding:10px; margin-left:100px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow:0px 0px 3px #aaa; -webkit-box-shadow:0px 0px 3px #aaa; box-shadow:0px 0px 3px #aaa;}#steps1 form p label{ width:160px; float:left; text-align:right; margin-right:15px; line-height:26px; color:#666; text-shadow:1px 1px 1px #fff; font-weight:bold;}#steps1 form input:not([type=radio]),#steps1 form textarea,#steps1 form select{ background: #ffffff; border: 1px solid #ddd; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; outline: none; padding: 5px; width: 200px; float:left;}#steps1 form p .error{background-color: rgb(255, 237, 239);}#steps1 form input:focus{ -moz-box-shadow:0px 0px 3px #aaa; -webkit-box-shadow:0px 0px 3px #aaa; box-shadow:0px 0px 3px #aaa; background-color:#FFFEEF;}#steps1 form p.submit{ background:none; border:none; -moz-box-shadow:none; -webkit-box-shadow:none; box-shadow:none;}#steps1 form p.submit input {border:none;outline:none; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; color: #ffffff; display: block; cursor:pointer; margin: 0px auto;width:200px;display:block;float:none; padding: 7px 25px; text-shadow: 0 1px 1px #777; font-weight:bold; font-family:"Century Gothic", Helvetica, sans-serif; font-size:22px; -moz-box-shadow:0px 0px 3px #aaa; -webkit-box-shadow:0px 0px 3px #aaa; box-shadow:0px 0px 3px #aaa; background:#4797ED;}/*Download by http://www.codefans.net*/#steps1 form p.submit input:hover { background:#d8d8d8; color:#666; text-shadow:1px 1px 1px #fff;}#steps2{ width:3200px;/*height:320px;*/ overflow:hidden;}#steps2 form fieldset{ border:none; padding-bottom:20px;}#steps2 form legend{ text-align:left; background-color:#f0f0f0; color:#666; font-size:24px; text-shadow:1px 1px 1px #fff; font-weight:bold; float:left; width:590px; padding:5px 0px 5px 10px; margin:10px 0px; border-bottom:1px solid #fff; border-top:1px solid #d9d9d9;}#steps2 form p{ float:left; clear:both; margin:5px 0px; background-color:#f4f4f4; border:1px solid #fff; width:400px; padding:10px; margin-left:100px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow:0px 0px 3px #aaa; -webkit-box-shadow:0px 0px 3px #aaa; box-shadow:0px 0px 3px #aaa;}#steps2 form p label{ width:80px; float:left; text-align:left; margin-right:15px; line-height:26px; color:#666; text-shadow:1px 1px 1px #fff; font-weight:bold;}#steps2 form input:not([type=radio]),#steps2 form textarea,#steps2 form select{ background: #ffffff; border: 1px solid #ddd; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; outline: none; padding: 5px; width: 200px; float:left;}#steps2 form p .error{background-color: rgb(255, 237, 239);}#steps2 form input:focus{ -moz-box-shadow:0px 0px 3px #aaa; -webkit-box-shadow:0px 0px 3px #aaa; box-shadow:0px 0px 3px #aaa; background-color:#FFFEEF;}#steps2 form p.submit{ background:none; border:none; -moz-box-shadow:none; -webkit-box-shadow:none; box-shadow:none;}#steps2 form p.submit input {border:none;outline:none; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; color: #ffffff; display: block; cursor:pointer; margin: 0px auto;width:200px;display:block;float:none; padding: 7px 25px; text-shadow: 0 1px 1px #777; font-weight:bold; font-family:"Century Gothic", Helvetica, sans-serif; font-size:22px; -moz-box-shadow:0px 0px 3px #aaa; -webkit-box-shadow:0px 0px 3px #aaa; box-shadow:0px 0px 3px #aaa; background:#4797ED;}/*Download by http://www.codefans.net*/#steps2 form p.submit input:hover { background:#d8d8d8; color:#666; text-shadow:1px 1px 1px #fff;}#steps3{ width:3200px;/*height:320px;*/ overflow:hidden;}#steps3 form fieldset{ border:none; padding-bottom:20px;}#steps3 form legend{ text-align:left; background-color:#f0f0f0; color:#666; font-size:24px; text-shadow:1px 1px 1px #fff; font-weight:bold; float:left; width:590px; padding:5px 0px 5px 10px; margin:10px 0px; border-bottom:1px solid #fff; border-top:1px solid #d9d9d9;}#steps3 form p{ float:left; clear:both; margin:5px 0px; background-color:#f4f4f4; border:1px solid #fff; width:400px; padding:10px; margin-left:100px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow:0px 0px 3px #aaa; -webkit-box-shadow:0px 0px 3px #aaa; box-shadow:0px 0px 3px #aaa;}#steps3 form p label{ width:120px; float:left; text-align:left; margin-right:15px; line-height:26px; color:#666; text-shadow:1px 1px 1px #fff; font-weight:bold;}#steps3 form input:not([type=radio]),#steps3 form textarea,#steps3 form select{ background: #ffffff; border: 1px solid #ddd; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; outline: none; padding: 5px; width: 200px; float:left;}#steps3 form p .error{background-color: rgb(255, 237, 239);}#steps3 form input:focus{ -moz-box-shadow:0px 0px 3px #aaa; -webkit-box-shadow:0px 0px 3px #aaa; box-shadow:0px 0px 3px #aaa; background-color:#FFFEEF;}#steps3 form p.submit{ background:none; border:none; -moz-box-shadow:none; -webkit-box-shadow:none; box-shadow:none;}#steps3 form p.submit input {border:none;outline:none; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; color: #ffffff; display: block; cursor:pointer; margin: 0px auto;width:200px;display:block;float:none; padding: 7px 25px; text-shadow: 0 1px 1px #777; font-weight:bold; font-family:"Century Gothic", Helvetica, sans-serif; font-size:22px; -moz-box-shadow:0px 0px 3px #aaa; -webkit-box-shadow:0px 0px 3px #aaa; box-shadow:0px 0px 3px #aaa; background:#4797ED;}/*Download by http://www.codefans.net*/#steps3 form p.submit input:hover { background:#d8d8d8; color:#666; text-shadow:1px 1px 1px #fff;}#steps4{ width:3200px;/*height:320px;*/ overflow:hidden;}#steps4 form fieldset{ border:none; padding-bottom:20px;}#steps4 form p{ float:left; clear:both; margin:5px 0px; background-color:#f4f4f4; border:1px solid #fff; width:400px; padding:10px; margin-left:100px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow:0px 0px 3px #aaa; -webkit-box-shadow:0px 0px 3px #aaa; box-shadow:0px 0px 3px #aaa;}#steps4 form p label{ width:120px; float:left; text-align:left; margin-right:15px; line-height:26px; color:#666; text-shadow:1px 1px 1px #fff; font-weight:bold;}#steps4 form input:not([type=radio]),#steps4 form textarea,#steps4 form select{ background: #ffffff; border: 1px solid #ddd; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; outline: none; padding: 5px; width: 200px; float:left;}#steps4 form p .error{background-color: rgb(255, 237, 239);}#steps4 form input:focus{ -moz-box-shadow:0px 0px 3px #aaa; -webkit-box-shadow:0px 0px 3px #aaa; box-shadow:0px 0px 3px #aaa; background-color:#FFFEEF;}#steps4 form p.submit{ background:none; border:none; -moz-box-shadow:none; -webkit-box-shadow:none; box-shadow:none;}#steps4 form p.submit input {border:none;outline:none; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; color: #ffffff; display: block; cursor:pointer; margin: 0px auto;width:200px;display:block;float:none; padding: 7px 25px; text-shadow: 0 1px 1px #777; font-weight:bold; font-family:"Century Gothic", Helvetica, sans-serif; font-size:22px; -moz-box-shadow:0px 0px 3px #aaa; -webkit-box-shadow:0px 0px 3px #aaa; box-shadow:0px 0px 3px #aaa; background:#4797ED;}/*Download by http://www.codefans.net*/#steps4 form p.submit input:hover { background:#d8d8d8; color:#666; text-shadow:1px 1px 1px #fff;}#steps5{ width:3200px;/*height:320px;*/ overflow:hidden;}#steps5 form fieldset{ border:none; padding-bottom:20px;}#steps5 form p{ float:left; clear:both; margin:5px 0px; background-color:#f4f4f4; border:1px solid #fff; width:400px; padding:10px; margin-left:100px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow:0px 0px 3px #aaa; -webkit-box-shadow:0px 0px 3px #aaa; box-shadow:0px 0px 3px #aaa;}#steps5 form p label{ width:120px; float:left; text-align:left; margin-right:15px; line-height:26px; color:#666; text-shadow:1px 1px 1px #fff; font-weight:bold;}#steps5 form input:not([type=radio]),#steps5 form textarea,#steps5 form select{ background: #ffffff; border: 1px solid #ddd; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; outline: none; padding: 5px; width: 200px; float:left;}#steps5 form p .error{background-color: rgb(255, 237, 239);}#steps5 form input:focus{ -moz-box-shadow:0px 0px 3px #aaa; -webkit-box-shadow:0px 0px 3px #aaa; box-shadow:0px 0px 3px #aaa; background-color:#FFFEEF;}#steps5 form p.submit{ background:none; border:none; -moz-box-shadow:none; -webkit-box-shadow:none; box-shadow:none;}#steps5 form p.submit input {border:none;outline:none; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; color: #ffffff; display: block; cursor:pointer; margin: 0px auto;width:200px;display:block;float:none; padding: 7px 25px; text-shadow: 0 1px 1px #777; font-weight:bold; font-family:"Century Gothic", Helvetica, sans-serif; font-size:22px; -moz-box-shadow:0px 0px 3px #aaa; -webkit-box-shadow:0px 0px 3px #aaa; box-shadow:0px 0px 3px #aaa; background:#4797ED;}/*Download by http://www.codefans.net*/#steps5 form p.submit input:hover { background:#d8d8d8; color:#666; text-shadow:1px 1px 1px #fff;}#steps6{ width:3200px;/*height:320px;*/ overflow:hidden;}#steps6 form fieldset{ border:none; padding-bottom:20px;}#steps6 form p{ float:left; clear:both; margin:5px 0px; background-color:#f4f4f4; border:1px solid #fff; width:400px; padding:10px; margin-left:100px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow:0px 0px 3px #aaa; -webkit-box-shadow:0px 0px 3px #aaa; box-shadow:0px 0px 3px #aaa;}#steps6 form p label{ width:120px; float:left; text-align:left; margin-right:15px; line-height:26px; color:#666; text-shadow:1px 1px 1px #fff; font-weight:bold;}#steps6 form input:not([type=radio]),#steps6 form textarea,#steps6 form select{ background: #ffffff; border: 1px solid #ddd; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; outline: none; padding: 5px; width: 200px; float:left;}#steps6 form p .error{background-color: rgb(255, 237, 239);}#steps6 form input:focus{ -moz-box-shadow:0px 0px 3px #aaa; -webkit-box-shadow:0px 0px 3px #aaa; box-shadow:0px 0px 3px #aaa; background-color:#FFFEEF;}#steps6 form p.submit{ background:none; border:none; -moz-box-shadow:none; -webkit-box-shadow:none; box-shadow:none;}#steps6 form p.submit input {border:none;outline:none; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; color: #ffffff; display: block; cursor:pointer; margin: 0px auto;width:200px;display:block;float:none; padding: 7px 25px; text-shadow: 0 1px 1px #777; font-weight:bold; font-family:"Century Gothic", Helvetica, sans-serif; font-size:22px; -moz-box-shadow:0px 0px 3px #aaa; -webkit-box-shadow:0px 0px 3px #aaa; box-shadow:0px 0px 3px #aaa; background:#4797ED;}/*Download by http://www.codefans.net*/#steps6 form p.submit input:hover { background:#d8d8d8; color:#666; text-shadow:1px 1px 1px #fff;}#steps7{ width:3200px;/*height:320px;*/ overflow:hidden;}#steps7 form fieldset{ border:none; padding-bottom:20px;}#steps7 form p{ float:left; clear:both; margin:5px 0px; background-color:#f4f4f4; border:1px solid #fff; width:400px; padding:10px; margin-left:100px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow:0px 0px 3px #aaa; -webkit-box-shadow:0px 0px 3px #aaa; box-shadow:0px 0px 3px #aaa;}#steps7 form p label{ width:120px; float:left; text-align:left; margin-right:15px; line-height:26px; color:#666; text-shadow:1px 1px 1px #fff; font-weight:bold;}#steps7 form input:not([type=radio]),#steps7 form textarea,#steps7 form select{ background: #ffffff; border: 1px solid #ddd; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; outline: none; padding: 5px; width: 200px; float:left;}#steps7 form p .error{background-color: rgb(255, 237, 239);}#steps7 form input:focus{ -moz-box-shadow:0px 0px 3px #aaa; -webkit-box-shadow:0px 0px 3px #aaa; box-shadow:0px 0px 3px #aaa; background-color:#FFFEEF;}#steps7 form p.submit{ background:none; border:none; -moz-box-shadow:none; -webkit-box-shadow:none; box-shadow:none;}#steps7 form p.submit input {border:none;outline:none; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; color: #ffffff; display: block; cursor:pointer; margin: 0px auto;width:200px;display:block;float:none; padding: 7px 25px; text-shadow: 0 1px 1px #777; font-weight:bold; font-family:"Century Gothic", Helvetica, sans-serif; font-size:22px; -moz-box-shadow:0px 0px 3px #aaa; -webkit-box-shadow:0px 0px 3px #aaa; box-shadow:0px 0px 3px #aaa; background:#4797ED;}/*Download by http://www.codefans.net*/#steps7 form p.submit input:hover { background:#d8d8d8; color:#666; text-shadow:1px 1px 1px #fff;}#steps8{ width:3200px;/*height:320px;*/ overflow:hidden;}#steps8 form fieldset{ border:none; padding-bottom:20px;}#steps8 form p{ float:left; clear:both; margin:5px 0px; background-color:#f4f4f4; border:1px solid #fff; width:400px; padding:10px; margin-left:100px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow:0px 0px 3px #aaa; -webkit-box-shadow:0px 0px 3px #aaa; box-shadow:0px 0px 3px #aaa;}#steps8 form p label{ width:120px; float:left; text-align:left; margin-right:15px; line-height:26px; color:#666; text-shadow:1px 1px 1px #fff; font-weight:bold;}#steps8 form input:not([type=radio]),#steps8 form textarea,#steps8 form select{ background: #ffffff; border: 1px solid #ddd; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; outline: none; padding: 5px; width: 200px; float:left;}#steps8 form p .error{background-color: rgb(255, 237, 239);}#steps8 form input:focus{ -moz-box-shadow:0px 0px 3px #aaa; -webkit-box-shadow:0px 0px 3px #aaa; box-shadow:0px 0px 3px #aaa; background-color:#FFFEEF;}#steps8 form p.submit{ background:none; border:none; -moz-box-shadow:none; -webkit-box-shadow:none; box-shadow:none;}#steps8 form p.submit input {border:none;outline:none; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; color: #ffffff; display: block; cursor:pointer; margin: 0px auto;width:200px;display:block;float:none; padding: 7px 25px; text-shadow: 0 1px 1px #777; font-weight:bold; font-family:"Century Gothic", Helvetica, sans-serif; font-size:22px; -moz-box-shadow:0px 0px 3px #aaa; -webkit-box-shadow:0px 0px 3px #aaa; box-shadow:0px 0px 3px #aaa; background:#4797ED;}/*Download by http://www.codefans.net*/#steps8 form p.submit input:hover { background:#d8d8d8; color:#666; text-shadow:1px 1px 1px #fff;}#steps9{ width:3200px;/*height:320px;*/ overflow:hidden;}#steps9 form fieldset{ border:none; padding-bottom:20px;}#steps9 form p{ float:left; clear:both; margin:5px 0px; background-color:#f4f4f4; border:1px solid #fff; width:400px; padding:10px; margin-left:100px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow:0px 0px 3px #aaa; -webkit-box-shadow:0px 0px 3px #aaa; box-shadow:0px 0px 3px #aaa;}#steps9 form p label{ width:120px; float:left; text-align:left; margin-right:15px; line-height:26px; color:#666; text-shadow:1px 1px 1px #fff; font-weight:bold;}#steps9 form input:not([type=radio]),#steps9 form textarea,#steps9 form select{ background: #ffffff; border: 1px solid #ddd; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; outline: none; padding: 5px; width: 200px; float:left;}#steps9 form p .error{background-color: rgb(255, 237, 239);}#steps9 form input:focus{ -moz-box-shadow:0px 0px 3px #aaa; -webkit-box-shadow:0px 0px 3px #aaa; box-shadow:0px 0px 3px #aaa; background-color:#FFFEEF;}#steps9 form p.submit{ background:none; border:none; -moz-box-shadow:none; -webkit-box-shadow:none; box-shadow:none;}#steps9 form p.submit input {border:none;outline:none; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; color: #ffffff; display: block; cursor:pointer; margin: 0px auto;width:200px;display:block;float:none; padding: 7px 25px; text-shadow: 0 1px 1px #777; font-weight:bold; font-family:"Century Gothic", Helvetica, sans-serif; font-size:22px; -moz-box-shadow:0px 0px 3px #aaa; -webkit-box-shadow:0px 0px 3px #aaa; box-shadow:0px 0px 3px #aaa; background:#4797ED;}/*Download by http://www.codefans.net*/#steps9 form p.submit input:hover { background:#d8d8d8; color:#666; text-shadow:1px 1px 1px #fff;}#steps10{ width:3200px;/*height:320px;*/ overflow:hidden;}#steps10 form fieldset{ border:none; padding-bottom:20px;}#steps10 form p{ float:left; clear:both; margin:5px 0px; background-color:#f4f4f4; border:1px solid #fff; width:400px; padding:10px; margin-left:100px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow:0px 0px 3px #aaa; -webkit-box-shadow:0px 0px 3px #aaa; box-shadow:0px 0px 3px #aaa;}#steps10 form p label{ width:120px; float:left; text-align:left; margin-right:15px; line-height:26px; color:#666; text-shadow:1px 1px 1px #fff; font-weight:bold;}#steps10 form input:not([type=radio]),#steps10 form textarea,#steps10 form select{ background: #ffffff; border: 1px solid #ddd; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; outline: none; padding: 5px; width: 200px; float:left;}#steps10 form p .error{background-color: rgb(255, 237, 239);}#steps10 form input:focus{ -moz-box-shadow:0px 0px 3px #aaa; -webkit-box-shadow:0px 0px 3px #aaa; box-shadow:0px 0px 3px #aaa; background-color:#FFFEEF;}#steps10 form p.submit{ background:none; border:none; -moz-box-shadow:none; -webkit-box-shadow:none; box-shadow:none;}#steps10 form p.submit input {border:none;outline:none; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; color: #ffffff; display: block; cursor:pointer; margin: 0px auto;width:200px;display:block;float:none; padding: 7px 25px; text-shadow: 0 1px 1px #777; font-weight:bold; font-family:"Century Gothic", Helvetica, sans-serif; font-size:22px; -moz-box-shadow:0px 0px 3px #aaa; -webkit-box-shadow:0px 0px 3px #aaa; box-shadow:0px 0px 3px #aaa; background:#4797ED;}/*Download by http://www.codefans.net*/#steps10 form p.submit input:hover { background:#d8d8d8; color:#666; text-shadow:1px 1px 1px #fff;}#steps11{ width:3200px;/*height:320px;*/ overflow:hidden;}#steps11 form fieldset{ border:none; padding-bottom:20px;}#steps11 form p{ float:left; clear:both; margin:5px 0px; background-color:#f4f4f4; border:1px solid #fff; width:400px; padding:10px; margin-left:100px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow:0px 0px 3px #aaa; -webkit-box-shadow:0px 0px 3px #aaa; box-shadow:0px 0px 3px #aaa;}#steps11 form p label{ width:120px; float:left; text-align:left; margin-right:15px; line-height:26px; color:#666; text-shadow:1px 1px 1px #fff; font-weight:bold;}#steps11 form input:not([type=radio]),#steps11 form textarea,#steps11 form select{ background: #ffffff; border: 1px solid #ddd; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; outline: none; padding: 5px; width: 200px; float:left;}#steps11 form p .error{background-color: rgb(255, 237, 239);}#steps11 form input:focus{ -moz-box-shadow:0px 0px 3px #aaa; -webkit-box-shadow:0px 0px 3px #aaa; box-shadow:0px 0px 3px #aaa; background-color:#FFFEEF;}#steps11 form p.submit{ background:none; border:none; -moz-box-shadow:none; -webkit-box-shadow:none; box-shadow:none;}#steps11 form p.submit input {border:none;outline:none; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; color: #ffffff; display: block; cursor:pointer; margin: 0px auto;width:200px;display:block;float:none; padding: 7px 25px; text-shadow: 0 1px 1px #777; font-weight:bold; font-family:"Century Gothic", Helvetica, sans-serif; font-size:22px; -moz-box-shadow:0px 0px 3px #aaa; -webkit-box-shadow:0px 0px 3px #aaa; box-shadow:0px 0px 3px #aaa; background:#4797ED;}/*Download by http://www.codefans.net*/#steps11 form p.submit input:hover { background:#d8d8d8; color:#666; text-shadow:1px 1px 1px #fff;}#steps12{ width:3200px;/*height:320px;*/ overflow:hidden;}#steps12 form fieldset{ border:none; padding-bottom:20px;}#steps12 form p{ float:left; clear:both; margin:5px 0px; background-color:#f4f4f4; border:1px solid #fff; width:400px; padding:10px; margin-left:100px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow:0px 0px 3px #aaa; -webkit-box-shadow:0px 0px 3px #aaa; box-shadow:0px 0px 3px #aaa;}#steps12 form p label{ width:120px; float:left; text-align:left; margin-right:15px; line-height:26px; color:#666; text-shadow:1px 1px 1px #fff; font-weight:bold;}#steps12 form input:not([type=radio]),#steps12 form textarea,#steps12 form select{ background: #ffffff; border: 1px solid #ddd; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; outline: none; padding: 5px; width: 200px; float:left;}#steps12 form p .error{background-color: rgb(255, 237, 239);}#steps12 form input:focus{ -moz-box-shadow:0px 0px 3px #aaa; -webkit-box-shadow:0px 0px 3px #aaa; box-shadow:0px 0px 3px #aaa; background-color:#FFFEEF;}#steps12 form p.submit{ background:none; border:none; -moz-box-shadow:none; -webkit-box-shadow:none; box-shadow:none;}#steps12 form p.submit input {border:none;outline:none; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; color: #ffffff; display: block; cursor:pointer; margin: 0px auto;width:200px;display:block;float:none; padding: 7px 25px; text-shadow: 0 1px 1px #777; font-weight:bold; font-family:"Century Gothic", Helvetica, sans-serif; font-size:22px; -moz-box-shadow:0px 0px 3px #aaa; -webkit-box-shadow:0px 0px 3px #aaa; box-shadow:0px 0px 3px #aaa; background:#4797ED;}/*Download by http://www.codefans.net*/#steps12 form p.submit input:hover { background:#d8d8d8; color:#666; text-shadow:1px 1px 1px #fff;}#steps13{ width:3200px;/*height:320px;*/ overflow:hidden;}#steps13 form fieldset{ border:none; padding-bottom:20px;}#steps13 form p{ float:left; clear:both; margin:5px 0px; background-color:#f4f4f4; border:1px solid #fff; width:400px; padding:10px; margin-left:100px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow:0px 0px 3px #aaa; -webkit-box-shadow:0px 0px 3px #aaa; box-shadow:0px 0px 3px #aaa;}#steps13 form p label{ width:120px; float:left; text-align:left; margin-right:15px; line-height:26px; color:#666; text-shadow:1px 1px 1px #fff; font-weight:bold;}#steps13 form input:not([type=radio]),#steps13 form textarea,#steps13 form select{ background: #ffffff; border: 1px solid #ddd; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; outline: none; padding: 5px; width: 200px; float:left;}#steps13 form p .error{background-color: rgb(255, 237, 239);}#steps13 form input:focus{ -moz-box-shadow:0px 0px 3px #aaa; -webkit-box-shadow:0px 0px 3px #aaa; box-shadow:0px 0px 3px #aaa; background-color:#FFFEEF;}#steps13 form p.submit{ background:none; border:none; -moz-box-shadow:none; -webkit-box-shadow:none; box-shadow:none;}#steps13 form p.submit input {border:none;outline:none; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; color: #ffffff; display: block; cursor:pointer; margin: 0px auto;width:200px;display:block;float:none; padding: 7px 25px; text-shadow: 0 1px 1px #777; font-weight:bold; font-family:"Century Gothic", Helvetica, sans-serif; font-size:22px; -moz-box-shadow:0px 0px 3px #aaa; -webkit-box-shadow:0px 0px 3px #aaa; box-shadow:0px 0px 3px #aaa; background:#4797ED;}/*Download by http://www.codefans.net*/#steps13 form p.submit input:hover { background:#d8d8d8; color:#666; text-shadow:1px 1px 1px #fff;}#steps14{ width:3200px;/*height:320px;*/ overflow:hidden;}#steps14 form fieldset{ border:none; padding-bottom:20px;}#steps14 form p{ float:left; clear:both; margin:5px 0px; background-color:#f4f4f4; border:1px solid #fff; width:400px; padding:10px; margin-left:100px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow:0px 0px 3px #aaa; -webkit-box-shadow:0px 0px 3px #aaa; box-shadow:0px 0px 3px #aaa;}#steps14 form p label{ width:120px; float:left; text-align:left; margin-right:15px; line-height:26px; color:#666; text-shadow:1px 1px 1px #fff; font-weight:bold;}#steps14 form input:not([type=radio]),#steps14 form textarea,#steps14 form select{ background: #ffffff; border: 1px solid #ddd; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; outline: none; padding: 5px; width: 200px; float:left;}#steps14 form p .error{background-color: rgb(255, 237, 239);}#steps14 form input:focus{ -moz-box-shadow:0px 0px 3px #aaa; -webkit-box-shadow:0px 0px 3px #aaa; box-shadow:0px 0px 3px #aaa; background-color:#FFFEEF;}#steps14 form p.submit{ background:none; border:none; -moz-box-shadow:none; -webkit-box-shadow:none; box-shadow:none;}#steps14 form p.submit input {border:none;outline:none; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; color: #ffffff; display: block; cursor:pointer; margin: 0px auto;width:200px;display:block;float:none; padding: 7px 25px; text-shadow: 0 1px 1px #777; font-weight:bold; font-family:"Century Gothic", Helvetica, sans-serif; font-size:22px; -moz-box-shadow:0px 0px 3px #aaa; -webkit-box-shadow:0px 0px 3px #aaa; box-shadow:0px 0px 3px #aaa; background:#4797ED;}/*Download by http://www.codefans.net*/#steps14 form p.submit input:hover { background:#d8d8d8; color:#666; text-shadow:1px 1px 1px #fff;}#steps15{ width:3200px;/*height:320px;*/ overflow:hidden;}#steps15 form fieldset{ border:none; padding-bottom:20px;}#steps15 form p{ float:left; clear:both; margin:5px 0px; background-color:#f4f4f4; border:1px solid #fff; width:400px; padding:10px; margin-left:100px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow:0px 0px 3px #aaa; -webkit-box-shadow:0px 0px 3px #aaa; box-shadow:0px 0px 3px #aaa;}#steps15 form p label{ width:120px; float:left; text-align:left; margin-right:15px; line-height:26px; color:#666; text-shadow:1px 1px 1px #fff; font-weight:bold;}#steps15 form input:not([type=radio]),#steps15 form textarea,#steps15 form select{ background: #ffffff; border: 1px solid #ddd; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; outline: none; padding: 5px; width: 200px; float:left;}#steps15 form p .error{background-color: rgb(255, 237, 239);}#steps15 form input:focus{ -moz-box-shadow:0px 0px 3px #aaa; -webkit-box-shadow:0px 0px 3px #aaa; box-shadow:0px 0px 3px #aaa; background-color:#FFFEEF;}#steps15 form p.submit{ background:none; border:none; -moz-box-shadow:none; -webkit-box-shadow:none; box-shadow:none;}#steps15 form p.submit input {border:none;outline:none; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; color: #ffffff; display: block; cursor:pointer; margin: 0px auto;width:200px;display:block;float:none; padding: 7px 25px; text-shadow: 0 1px 1px #777; font-weight:bold; font-family:"Century Gothic", Helvetica, sans-serif; font-size:22px; -moz-box-shadow:0px 0px 3px #aaa; -webkit-box-shadow:0px 0px 3px #aaa; box-shadow:0px 0px 3px #aaa; background:#4797ED;}/*Download by http://www.codefans.net*/#steps15 form p.submit input:hover { background:#d8d8d8; color:#666; text-shadow:1px 1px 1px #fff;}#steps16{ width:3200px;/*height:320px;*/ overflow:hidden;}#steps16 form fieldset{ border:none; padding-bottom:20px;}#steps16 form p{ float:left; clear:both; margin:5px 0px; background-color:#f4f4f4; border:1px solid #fff; width:400px; padding:10px; margin-left:100px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow:0px 0px 3px #aaa; -webkit-box-shadow:0px 0px 3px #aaa; box-shadow:0px 0px 3px #aaa;}#steps16 form p label{ width:120px; float:left; text-align:left; margin-right:15px; line-height:26px; color:#666; text-shadow:1px 1px 1px #fff; font-weight:bold;}#steps16 form input:not([type=radio]),#steps16 form textarea,#steps16 form select{ background: #ffffff; border: 1px solid #ddd; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; outline: none; padding: 5px; width: 200px; float:left;}#steps16 form p .error{background-color: rgb(255, 237, 239);}#steps16 form input:focus{ -moz-box-shadow:0px 0px 3px #aaa; -webkit-box-shadow:0px 0px 3px #aaa; box-shadow:0px 0px 3px #aaa; background-color:#FFFEEF;}#steps16 form p.submit{ background:none; border:none; -moz-box-shadow:none; -webkit-box-shadow:none; box-shadow:none;}#steps16 form p.submit input {border:none;outline:none; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; color: #ffffff; display: block; cursor:pointer; margin: 0px auto;width:200px;display:block;float:none; padding: 7px 25px; text-shadow: 0 1px 1px #777; font-weight:bold; font-family:"Century Gothic", Helvetica, sans-serif; font-size:22px; -moz-box-shadow:0px 0px 3px #aaa; -webkit-box-shadow:0px 0px 3px #aaa; box-shadow:0px 0px 3px #aaa; background:#4797ED;}/*Download by http://www.codefans.net*/#steps16 form p.submit input:hover { background:#d8d8d8; color:#666; text-shadow:1px 1px 1px #fff;}#steps17{ width:3200px;/*height:320px;*/ overflow:hidden;}#steps17 form fieldset{ border:none; padding-bottom:20px;}#steps17 form p{ float:left; clear:both; margin:5px 0px; background-color:#f4f4f4; border:1px solid #fff; width:400px; padding:10px; margin-left:100px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow:0px 0px 3px #aaa; -webkit-box-shadow:0px 0px 3px #aaa; box-shadow:0px 0px 3px #aaa;}#steps17 form p label{ width:120px; float:left; text-align:left; margin-right:15px; line-height:26px; color:#666; text-shadow:1px 1px 1px #fff; font-weight:bold;}#steps17 form input:not([type=radio]),#steps17 form textarea,#steps17 form select{ background: #ffffff; border: 1px solid #ddd; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; outline: none; padding: 5px; width: 200px; float:left;}#steps17 form p .error{background-color: rgb(255, 237, 239);}#steps17 form input:focus{ -moz-box-shadow:0px 0px 3px #aaa; -webkit-box-shadow:0px 0px 3px #aaa; box-shadow:0px 0px 3px #aaa; background-color:#FFFEEF;}#steps17 form p.submit{ background:none; border:none; -moz-box-shadow:none; -webkit-box-shadow:none; box-shadow:none;}#steps17 form p.submit input {border:none;outline:none; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; color: #ffffff; display: block; cursor:pointer; margin: 0px auto;width:200px;display:block;float:none; padding: 7px 25px; text-shadow: 0 1px 1px #777; font-weight:bold; font-family:"Century Gothic", Helvetica, sans-serif; font-size:22px; -moz-box-shadow:0px 0px 3px #aaa; -webkit-box-shadow:0px 0px 3px #aaa; box-shadow:0px 0px 3px #aaa; background:#4797ED;}/*Download by http://www.codefans.net*/#steps17 form p.submit input:hover { background:#d8d8d8; color:#666; text-shadow:1px 1px 1px #fff;}#jghz{ width:3200px;/*height:320px;*/ overflow:hidden;}#jghz form fieldset{ border:none; padding-bottom:20px;}#jghz form p{ float:left; clear:both; margin:5px 0px; background-color:#f4f4f4; border:1px solid #fff; width:400px; padding:10px; margin-left:100px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow:0px 0px 3px #aaa; -webkit-box-shadow:0px 0px 3px #aaa; box-shadow:0px 0px 3px #aaa;}#jghz form p label{ width:120px; float:left; text-align:left; margin-right:15px; line-height:26px; color:#666; text-shadow:1px 1px 1px #fff; font-weight:bold;}#jghz form input:not([type=radio]),#jghz form textarea,#jghz form select{ background: #ffffff; border: 1px solid #ddd; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; outline: none; padding: 5px; width: 200px; float:left;}#jghz form p .error{background-color: rgb(255, 237, 239);}#jghz form input:focus{ -moz-box-shadow:0px 0px 3px #aaa; -webkit-box-shadow:0px 0px 3px #aaa; box-shadow:0px 0px 3px #aaa; background-color:#FFFEEF;}#jghz form p.submit{ background:none; border:none; -moz-box-shadow:none; -webkit-box-shadow:none; box-shadow:none;}#jghz form p.submit input {border:none;outline:none; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; color: #ffffff; display: block; cursor:pointer; margin: 0px auto;width:200px;display:block;float:none; padding: 7px 25px; text-shadow: 0 1px 1px #777; font-weight:bold; font-family:"Century Gothic", Helvetica, sans-serif; font-size:22px; -moz-box-shadow:0px 0px 3px #aaa; -webkit-box-shadow:0px 0px 3px #aaa; box-shadow:0px 0px 3px #aaa; background:#4797ED;}/*Download by http://www.codefans.net*/#jghz form p.submit input:hover { background:#d8d8d8; color:#666; text-shadow:1px 1px 1px #fff;}/*修饰button*/.button {display: inline-block;zoom: 1;*display: inline;vertical-align: baseline;margin: 0 2px;outline: none;cursor: pointer;text-align: center;text-decoration: none;font: 14px/100% Arial, Helvetica, sans-serif;padding: .5em 2em .55em;text-shadow: 0 1px 1px rgba(0,0,0,.3);-webkit-border-radius: .5em; -moz-border-radius: .5em;border-radius: .5em;-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);box-shadow: 0 1px 2px rgba(0,0,0,.2);}.button:hover {text-decoration: none;}.button:active {position: relative;top: 1px;}.bigrounded {-webkit-border-radius: 2em;-moz-border-radius: 2em;border-radius: 2em;}.medium {font-size: 12px;padding: .4em 1.5em .42em;}.small {font-size: 11px;padding: .2em 1em .275em;}/* color styles ---------------------------------------------- *//* black */.black {color: #d7d7d7;border: solid 1px #333;background: #333;background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#000));background: -moz-linear-gradient(top, #666, #000);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#000000');}.black:hover {background: #000;background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#000));background: -moz-linear-gradient(top, #444, #000);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#000000');}.black:active {color: #666;background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#444));background: -moz-linear-gradient(top, #000, #444);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#666666');}#pp{height: 28px;}#lable1{margin-left: 2px;}javascript代码：
var i=1;var j=3;var array1=new Array;var array2=new Array;var array3="";var sumMoney=0;function zhuanhuan(){ var p1=document.getElementById('xin1').value; var p2=parseInt(document.getElementById('xin2').value); var p3=parseInt(document.getElementById('xin3').value); var xxx=document.getElementById('x').value; if(p3==0) { alert(xxx); return; } document.getElementById('steps'+j).style.display=''; var p4=String(document.getElementById('xiala').value); var p5; if(p4="斤") { p5=p2/(p3/2); document.getElementById('pq'+i+'1').value=p1+" "+p5.toFixed(2); array1[i]=p2; array2[i]=p1; } var p6; if(p4="两") { p6=p2/(p3/20); document.getElementById('pq'+i+'1').value=p1+" "+p6.toFixed(2); array1[i]=p2; array2[i]=p1; } var p7; if(p4="克") { p7=p2/(p3/1000); document.getElementById('pq'+i+'1').value=p1+" "+p7.toFixed(2); array1[i]=p2; array2[i]=p1; } var p8; if(p5="千克") { p8=p2/p3; document.getElementById('pq'+i+'1').value=p1+" "+p8.toFixed(2); array1[i]=p2; array2[i]=p1; } i++; j++; document.getElementById('xin1').value=""; document.getElementById('xin2').value=""; document.getElementById('xin3').value=""; document.getElementById('navigation').style.display='';}function result(){var sum=0;//var j=1;document.getElementById('jghz').style.display='';document.getElementById('navigation').style.display='none';document.getElementById('navigation2').style.display='';for(var m=1,n=1;m<17,n<17;m++,n++){ if(document.getElementById('pq'+m+3).checked==true) { //alert("hello"); sum=sum+parseInt(document.getElementById('pq'+m+2).value)*array1[m]; // alert(array1[i]); array3=array3+"\n"+array2[m]+":"+array1[m]+" yuan"; document.getElementById('l'+m).innerHTML=array2[m]; document.getElementById('l'+m).style.display=''; document.getElementById('i'+m).value=array1[m]*parseInt(document.getElementById('pq'+m+2).value)+" yuan"; document.getElementById('i'+m).style.display=''; // document.getElementById('shuchu').value=array2[i]+" "+array1[i]; document.getElementById('pq'+m+3).checked=false; }}for(var x=3;x<17;x++){ document.getElementById('steps'+x).style.display="none";}//alert(sum);//array3=array3+"\n"+"sumMoney:"+sum.toString()+" yuan";//document.getElementById('shuchu').value=array3;sumMoney=sumMoney+sum;document.getElementById('l20').innerHTML=document.getElementById('xxx').value+sumMoney.toString()+" yuan";document.getElementById('l20').style.display='';//alert(sumMoney);}function jie1(){ document.getElementById('jiemian1').style.display='none'; document.getElementById('wrapper').style.display='';}function jie2(){document.getElementById('jiemian1').style.display='none'; document.getElementById('jiemian3').style.display='';}function fanhui1(){ document.getElementById('wrapper').style.display='none'; document.getElementById('jiemian1').style.display='';}function fanhui2(){ document.getElementById('jiemian3').style.display='none'; document.getElementById('jiemian1').style.display='';}var sum=0;function goumai(){var cur; cur=parseInt(document.getElementById('ipt1').value); // alert(cur); var temp=parseInt(document.getElementById('ipt2').value); sum+=temp; // alert(sum); document.getElementById('ipt2').value=""; if(sum>=cur) { document.getElementById('shang1').style.display='none'; document.getElementById('ipt2').style.display='none'; document.getElementById('shang2').style.display=''; document.getElementById('ipt3').style.display=''; document.getElementById('ipt3').value=sum; } }- html5 的一个应用
- 给你的HTML5应用添加一个漂亮的Tooltip
- 一个简单的表单（应用到一点HTML5）
- 搭建一个全栈式的HTML5移动应用框架
- 搭建一个全栈式的HTML5移动应用框架
- 天气窗件展示 -一个HTML5 地理位置应用的例子
- html5 touch引发的一个应用以及营销
- HTML5的精彩应用
- html5 webworker的应用
- 一个html5的小游戏
- MM应用引擎——一个支持HTML5的互联网应用开发运行托管平台
- [html5+css3] 什么是HTML5,html5应用的领域
- 神奇的HTML5画图应用
- HTML5的File API应用
- HTML5 智能表单的应用
- html5中webSql的应用
- HTML5多媒体素材的应用
- html5 bootstrap分页的应用
- xen,xenserver,xcp 的区别
- goodbloglink
- Core Graphics 101: 阴影和光泽效果
- 总结阐述Cocos2d-X与Cocos2d-iphone区别
- 线程的同步--信号量
- html5 的一个应用
- Core Graphics 101: 弧线和轨迹
- 第二章 构造和运行模块
- 如何在ubuntu 12.10 eclipse juno上运行map-redude程序
- Java的一些高级特性（三）——类部分
- c++ 类、对象和内存1 类、对象和内存
- Core Graphics 101: 光滑的按钮
- Core Graphics 101: 模版
- 关于tomcat startup.bat启动后一闪而过的问题(转)
