为啥我这个按钮看起来这么不正常，求大神解释

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body,input,form,button,div{margin:0;
padding:0;}
    form{width:250px;
        background:rgb(140,160,150);
        border:1px solid black;}
    .mid{display:block;
        margin:10px auto;
        border:1px solid black;
        height:20px;
        width:200px;
    }
    p{  font-size:13px;
        display:inline;}
    a{  text-decoration:none;
        margin-left:20px;
    }
    .btn{
        width:180px;
        height:42px;
        margin:10px auto;
        
        display:block;
        background-image:url(http://img.mukewang.com/539a972b00013e9102280177.jpg);
    }
    #btn1{
        background-position:0px 0px;
    }
    #btn2{
        background-position:0px -39px;
    }
    
    #text{margin-left:20px;} 
    div{
        margin-top:20px;
    }
    
</style>
</head>

<body>

<form>
<div>
    <input class="mid" type="text" name="username" placeholder="邮箱/手机号/用户名"><br/>
    <input class="mid" type="password" name="pwd" placeholder="请输入密码"><br/>
    <input id="text" type="radio" name="radio"><p>下次自动登录</p>  
    <a href="#">忘记密码？</a>
    <button class="btn" id="btn1" type="button"></button>
    <button class="btn" id="btn2" type="button"></button>
   </div> 
</form>

</body>
</html>

qq_安仁斗辣椒_0

浏览 1507回答 4

4回答

Microhuu

你要的效果估计是这样的吧

0 0

Microhuu

你要什么效果？你要按钮长什么样子？

0 0

荼酒

你想要什麼效果啊

0 0

随时随地看视频慕课网APP