老师,help?

老师,help?

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
    /*此处写代码*/
    *{
        margin:0;
        padding:0;
        font-family:"微软雅黑";
        font-size:16px;
        color:#000;
    }
    .clearfloat{
        zoom:1;
    }
    .clearfloat:after{
        content:".";
        display:block;
        height:0px;
        visibility:hidden;
        clear:both;
    }
    .top{
        width:100%;
        min-width:1100px;
        text-align:center;
        height:100px;
        background:#000;
    }
    .logo{
        float:left;
    }
    .logo a{
            display:inline-block;
            width:300px;
            height:100px;
            }
    .nav{
        line-height:100px;
        margin-right:20px;
    }
    .nav li{
        list-style:none;
        float:right;
        margin-right:20px;
    }
    a{
        text-decoration:none;
        color:#FFF;
        font-weight:bold;
    }
    .content{
        width: 100%;
        min-height: 430px;
        min-width: 1100px;
        background:#B4EFFF;
    }
    .wrap{
        margin-left:20px;
        padding-top:50px; 
    }
 
    .left ,.right{
        float: left;
        margin: 0 50px;
        line-height: 50px;
    }
    .left i{
        font-style: normal;
        display: inline-block;
        background-color: #FA9C87;
        font-size: 14px;
        line-height: 14px;
    }
    .left a,.right a{
        color: #000;
    }
    .footer{
            width: 100%;
            min-width: 1100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            background-color: #000;
    }
    .footer ul{
            display: inline-block;
            margin: 0 auto;
    }
    .footer li{
            float: left;
            list-style-type: none;
            margin:0 20px;
    }  
    .footer li a{
                color: #FFF;
    }
    .form{
			float:left;
			text-align:center;
			border-left:3px orange solid;
			min-height:430px;
			margin-top:-50px;
			} 
	form{
		 padding-top:155px;
		 padding-left:80px;
		 font-size:16px;
		 }    
 
 	input{
			height:30px;
			width:280px;
			}
	#submit{
			background:red;
			color:#FFF;
			}
  </style>
     
</head>
<body>
  <!-- 此处写代码 -->
  <div class="top clearfloat">
      <div class="logo">
          <a href="#"><img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png" alt="logo"/></a>
      </div>
      <div class="nav">
          <ul>
              <li><a href="#">课程</a></li>
              <li><a href="#">职业路径</a></li>
              <li><a href="#">实战</a></li>
              <li><a href="#">猿问</a></li>
              <li><a href="#">手记</a></li>
          </ul>
      </div>
  </div>
  <div class="content">
  <div class="wrap">
      <div class="left clearfloat">
          <dl>
              <dt><h3>课程推荐</h3></dt>  
              <dd><i>职业路径</i><a href="#">HTML5和CSS3实现动态网页</a></dd>
              <dd><i>职业路径</i><a href="#">零基础入门Android语法与界面</a></dd>
              <dd><i>职业路径</i><a href="#">IOS基础语法和常用控件</a></dd>
              <dd><i>职业路径</i><a href="#">PHP入门开发</a></dd>
              <dd><i>职业路径</i><a href="#">JAVA入门开发</a></dd>
          </dl>
      </div>
      <div class="right clearfloat">
          <dl>
              <dt><h3>相关课程</h3></dt>
              <dd>
              <a href="#">HTML</a>
              <a href="#">CSS</a>
              <a href="#">JAVASCRIPT</a>
              </dd>
              <dd>
              <a href="#">HTML5</a>
              <a href="#">CSS3</a>
              <a href="#">jquery</a>
              </dd>
              <dd>
              <a href="#">移动端基础</a>
              <a href="#">移动端app开发</a>
              </dd>
          </dl>
          </div>
		  <div class="form">
		  	<form>
				<h3>登录</h3>
				<input type="text" " placeholder="请输入登录邮箱/手机号"/><br/>
				<br/>
				<input type="password" placeholder="6-16位密码,区分大小写,不能用空格"/><br/>
				<br/>
				<input id="submit" type="submit" value="登录"/>
			</form>
		  </div>
  </div>
  </div>
<div class="footer">
    <ul>
        <li><a href="#">网页首站</a></li>
        <li><a href="#">企业合作</a></li>
        <li><a href="#">人才招聘</a></li>
        <li><a href="#">联系我们</a></li>
        <li><a href="#">常见问题</a></li>
        <li><a href="#">友情链接</a></li>
    </ul>
</div>
</body>
</html>

老师打开页面后,点击登录按钮发声跳动,不知道是什么原因?麻烦看看

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

2回答
提问者 qq_天天_66 2017-07-14 22:29:45

老师不是按钮跳动,是整个页面布局发生变化,这是怎么个情况

好帮手慕糖 2017-07-14 16:30:30

你好,登录按钮是submit提交按钮,有个提交的过程,很正常,若想效果不那么明显可以把边框去掉。例:border:none;祝学习愉快!

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36713    个

从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师