请检查 登录为什么不一样高
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body{margin:0;padding:0;list-style-type: none;}
.nav{background:black;
width:100%;
height:100px;
color:#fff;
font-size:25px;
margin:0 auto;
position:fixed;
top: 0;
z-index: 99;}
.logo{float:left;
width:100px;}
.logo img{display: block;}
.right{float:right;
}
li{display:inline-block;
margin:0px 25px;
height: 100px;}
.footer{background:black;
width:100%;
height:100px;
color:#fff;
font-size:25px;
margin:0 auto;
text-align: center;
position:fixed;
bottom: 0;}
.main{background:#0cf;
width: 100%;
height: 1000px;
padding:100px 0;
}
.one{float:left;
width:20%;
position: absolute;
top:25%;
left:15%;
}
.two{float:left;
width: 20%;
position: absolute;
top:25%;
left: 35%;
}
.three{float: right;
padding-left:5%;
width: 20%;
padding-top:5%;
margin-right: 15%;
border-left: thick solid orange;
height: 100%
}
.three input{border: 1px solid gray;
padding:7%;
margin: 10% 0;
width: 80%;
}
.inp{
background: red;
color:#fff;
font-size:25px;
}
.one p span{background:pink;}
</style>
</head>
<body>
<div class="nav">
<div class="logo"><img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png"/>
</div>
<div class="right">
<ul>
<li>课程</li>
<li>网页路径</li>
<li>实战</li>
<li>猿问</li>
<li>手记</li>
</ul>
</div>
</div>
<div class="main">
<div class="one">
<h2>课程推荐</h2>
<p><span>职业路径</span> HTML课程课程</p>
<p><span>职业路径</span> 零基础课程课程</p>
<p><span>职业路径</span> ios课程课程</p>
<p><span>职业路径</span> PHP课程课程</p>
<p><span>职业路径</span> JAVA课程课程课程</p>
</div>
<div class="two">
<h2>相关课程</h2>
<p>HTML CSS JavaScript</p>
<p>HTML5 CSS3 Jquery</p>
<p>移动端基础 移动端APP开发</p>
</div>
<div class="three">
<h2>登录</h2>
<form>
<input type="text" name="name" placeholder="请输入登录邮箱/手记号" /><br/>
<input type="password" name="word" placeholder="6-16位密码，区分大小写，不能用空格" maxlength="16" /><br/>
<input class="inp" type="submit" value="登录"/>
</form>
</div>
</div>
</div>
<div>
</div>
<div class="footer">
<ul>
<li>网页首页</li>
<li>企业合作</li>
<li>人才招聘</li>
<li>联系我们</li>
<li>常见问题</li>
<li>友情链接</li>
</ul>
</div>
</body>
</html>
正在回答 回答被采纳积分+1
你好同学，这里会涉及一个你还没接触到的属性，老师简单给你说一下，暂时作为了解，后面阶段课程中会有讲解的。
单行文本框与按钮的 box-sizing属性值默认不一样，可以按F12查看：
content-box 在宽度和高度之外绘制元素的内边距和边框，即padding和border都不计算在宽度80%之中，所以上面的单行文本框实际宽度大于80%。
border-box 为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制，即按钮的padding和border都计算在宽度80%中，所以按钮的实际宽度就是80%。
综上，按钮与单行文本框宽度不一样哦。所以可以给它们统一设置box-sizing属性，让它们的实际宽度一致：
祝学习愉快，望采纳。
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星