老师检查一下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*此处写代码*/
*{margin:0;padding:0;}
.page{width: 100%;margin: 0 auto;}
.header{width: 100%;height: 100px;background-color: black;}
.logo{float: left;}
.logo img{display: block;}
.nav{float: right;}
.nav li{list-style-type: none;display: block;float: left;padding-right: 40px;font:bold 20px "微软雅黑";line-height: 100px;text-align: center;}
a{text-decoration: none;color: #fff;}
.bodyer{width: 100%;height: 800px;background-color: #ADD8E6;}
.left{width: 67%;height: 800px;float: left;}
h3{font:bold 30px "微软雅黑";margin-top: 80px;}
span{background-color: #FF9999;}
p{margin-top: 20px;}
.list1{margin-left: 100px;float: left;line-height: 40px;}
.list2{margin-left: 100px;float: left;line-height: 40px;}
.right h3{margin-left: 50px;margin-bottom: 40px;}
.middle{width: 1%;height: 800px;float: left;background-color: #EE9572;}
.right{width: 32%;height: 800px;float: right;}
input{display:block;width: 280px;height: 35px;margin-left: 70px;}
.button{background-color: #FF0000;border: none;color: white;}
.button:hover{color: blue;}
.footer{width: 100%;height: 100px;line-height: 100px;text-align: center;background-color: black;}
.footer li{display: inline-block;font:bold 20px "微软雅黑";padding-left: 40px;}
.nav li:hover a,.footer li:hover a{color: orange;}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="page">
<div class="header">
<div class="logo"><img src="http://img1.sycdn.imooc.com/climg//59093e9c00016ce303000100.png"/></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="bodyer">
<div class="left">
<div class="list1">
<h3>课程推荐</h3>
<p><span>职业路径</span> HTML与CSS实现动态网页</p>
<p><span>职业路径</span> 零基础入门Android语法与界面</p>
<p><span>职业路径</span> IOS基础语法与常用控件</p>
<p><span>职业路径</span> PHP入门开发</p>
<p><span>职业路径</span> JAVA入门开发</p>
</div>
<div class="list2">
<h3>相关课程</h3>
<p>HTML CSS JavaScript</p>
<p>HTML5 CSS3 jQuery</p>
<p>移动端基础 移动端APP开发</p>
</div>
</div>
<div class="middle"></div>
<div class="right">
<h3>登录</h3>
<form>
<input type="text" name="user" placeholder="请输入登录邮箱/手机号"><br>
<input type="password" name="pwd" placeholder="6~12位密码，区分大小写，不能用空格" minlength="6" maxlength="16"><br>
<input type="button" class="button";name="button" value="登录" >
</form>
</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>
</div>
</body>
</html>
正在回答
同学你好，关于同学的问题解答如下：
1、因为第三个输入框是button类型，而按钮的边框是包含在宽度里面的：
2、所以加上边框样式也是会比input输入框小一些，同学也可以调大按钮的宽度为284px：
同学可以自己调整一下试试，看看结果。
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星