html 代码 <html> <head> <meta charset="utf-8"/> <title>火车票投票登录</title> <style> *{padding:0px;margin:0px;list-style:none;} #box{width:960px;height:360px;margin:30px auto;} #left{width:680px;height:360px;float:left;border:1px solid blue;} #right{width:270px;height:360px; margin-left:6px;float:left;border:1px solid blue;} #l-1{width:157px;height:360px;float:left;} #l-2{width:515px;height:360px; float:left;position:relative;} #l-2 span{width:75px;height:30px;display:inline-block;margin: 10 -10px 0 20px; margin-top:6px;} .txt{width:315px;height:30px;margin-top:15px;background:#faffbd;border:1px inset orange;;} #l-1 ul li{margin-top:15px;color:#666666;font-size:14px;line-height:18px;margin-left:15px;} #l-1 h3{margin-top:50px;font-size:16px;margin-left:15px;} #yzm{width:313px;height:190px;border:1px solid red;} #y1{width:150px;height:20px;font-size:14px;font-weight:400;color:blue;} #yzm{position:absolute;left:84px;top:110px;} #yzm h4{margin-top:5px;margin-left:5px;} #yzm ul li{float:left;margin-left:6px;margin-top:5px;} #yzm ul li img{width:70px;height:70px;} #re img{width:50px;height:30px;position:absolute;left:250px;top:0px;cursor:pointer;} .s1{margin-left:325px;font-size:14px;font-weight:400;color:blue;} .btn{left:85px;position:absolute;top:318px;width:156px;height:30px;border:none; display:block;line-height:30px;background:#ff8000;} .btn2{left:245px;background:#ccc;} #right img{width:80px;height:80px;} #right li{position:relative;margin:33px 47px 28px 30px;width:40px;height:40px;float:left;} #right span{left:9px;top:78px;display:inline-block;position:absolute;width:72px;} #line{width:1px;height:350px;position:absolute;background-color:#ccc;left:200px;top:40px;} </style> </head> <div id="box"> <div id="left"> <div id="l-1"> <h3>温馨提示：</h3> <ul> <li> 1,12306.cn网站自3月16日起启用图形验证码 </li> <li> 2,12306.cn网站每日06:00~23:00提供服务 </li> <li> 3,在12306.cn网站购票，改签和退票须不晚于开车前30分钟；办理"变更到站"业务时，请不 要晚于开车前48小时。 </li> </ul> <div id="line"></div> </div> <div id="l-2"> <span>登录名：</span><input type="text" class="txt" placeholder="用户名/邮箱/手 机号"/><br/> <span>密码：</span><input type="text" class="txt"/> <strong id="y1">忘记用户名/密码</strong></br/> <span>验证码：</span><div id="yzm"> <h4>请点击下图中的所有鞭炮</h4> <hr style="margin-top:10px"/> <ul><li><img/src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=70aef885aac5981ea0b3e518895fd864"/></li> <li><img/src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=09d7d3cad8aa7b96fcf31a826666d5ca"/></li> <li><img/src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=cd599a4020301809cc5b769490457188"/></li> <li><img/src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=bd05c3362243aec90acec1f310b29126"/></li> <li><img/src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=971b45cf380bd2c27741e0989f47730d"/></li> <li><img/src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=872d455da2a4d41c21ecd948de6ef39e"/></li> <li><img/src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=0edb30d73c1a246ed77364643f3abb59"/></li> <li><img/src="img/p8.pnghttp://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=b3539465484a0634da3eacaa5c815a27"/></li> </ul> <div id="re"><img src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=8a53a89b2969a907decdd83c98c27af3"></div> </div><strong class="s1">验证码如何使用</strong> <input class="btn" type="button" value="登录"/> <input class="btn btn2" type="button" value="快速注册"/> </div> </div> <div id="right"> <ul> <li><img src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=8e8b01608004b9ba7f73e17043667e44"/><span>车站查询</span></li> <li><img src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=8e8b01608004b9ba7f73e17043667e44"/><span>车站查询</span></li> <li><img src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=8e8b01608004b9ba7f73e17043667e44"/><span>车站查询</span></li> <li><img src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=8e8b01608004b9ba7f73e17043667e44"/><span>车站查询</span></li> <li><img src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=8e8b01608004b9ba7f73e17043667e44"/><span>车站查询</span></li> <li><img src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=8e8b01608004b9ba7f73e17043667e44"/><span>车站查询</span></li> </ul> </div> </div> </html>
评论 (0 )
最新评论
暂无评论
赶紧努力消灭 0 回复