老师帮忙指导一下吧
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*此处写代码*/
*{margin: 0;padding: 0;}
body{min-width: 900px;}
div.header{
height: 100px;
width: 100%;
background: black;
}
.logo{
float: left;
font-size: 0;
}
.nav{
float: right;
color: white;
}
.nav li{float: left;list-style: none;padding:0 20px;line-height: 100px;height: 100px;}
.nav li:hover{color: orange;cursor: pointer;}
.container{
background: green;
/* width: 100%; */
padding: 0 300px 0 300px;
overflow: hidden;
}
.middle,.left,.right{
/* position: relative; */
float: left;
min-height: 500px;
position: relative;
}
.middle{
/* display: table-cell; */
/* vertical-align: middle; */
background: #FFC0CB;
text-align: center;
width:100%;
/* font-size: 0; */
}
.middle img{width: 300px;}
/* .middle img{vertical-align: middle;} */
.middle img{position: absolute;top: 0;right: 0;bottom: 0;left: 0;margin: auto;}
.left{
width: 300px;
background: #FFEFDB;
margin-left: -100%;
left: -300px;
}
.left div{
margin-top: 100px;
margin-left: 10px;
}
.right{
width: 300px;
background: #ADD8E6;
margin-left: -300px;
right: -300px;
}
.left h2{margin: 1em 0 1em 0;}
.left ul li{
margin-top: 1em;
}
.left ul li span{
background: #FF9999;
margin-right: 0.5em;
}
.right form{
margin-top: 100px;
margin-left: 10px;
margin-right: 10px;
}
.right form p{
margin: 20px 0;
}
.right form p input{
height: 40px;
}
.right form p:nth-child(4) input{
color: white;
font-size: 20px;
background: #ff0000;
}
.right input{width: 100%;}
.footer{height: 100px;width: 100%;background: black;}
.footer ul{height: 100px;line-height: 100px;margin:0 auto;width: 80%;color: white;text-align: center;}
.footer ul li{list-style: none;padding:0 20px 0 20px;display: inline;}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="header">
<div class="logo">
<img src="http://img1.sycdn.imooc.com/climg//590037f600016ce303000100.png" alt="">
</div>
<ul class="nav">
<li>课程</li>
<li>职业路径</li>
<li>实战</li>
<li>猿问</li>
<li>手记</li>
</ul>
</div>
<div class="container">
<div class="middle">
<img src="http://img1.sycdn.imooc.com/climg//590037e00001fab706000400.jpg" alt="">
</div>
<div class="left">
<div>
<h2>课程推荐</h2>
<ul>
<li><span>职业路径</span>HTML5和css3实现动态网页</li>
<li><span>职业路径</span>零基础入门Android语法与界面</li>
<li><span>职业路径</span>ios基础语法与常用控件</li>
<li><span>职业路径</span>Java入门开发</li>
<li><span>职业路径</span>PHP入门开发</li>
</ul>
</div>
</div>
<div class="right">
<form action="#" method="post">
<h1>登录</h1>
<p>
<input type="text" name="" id="" placeholder="请输入登录邮箱/手机号">
</p>
<p>
<input type="password" placeholder="6-16位密码，区分大小写，不能输入空格">
</p>
<p>
<input type="submit" value="登录">
</p>
</form>
</div>
</div>
<div class="footer">
<ul>
<li>网站首页</li>
<li>企业合作</li>
<li>人才招聘</li>
<li>联系我们</li>
<li>常见问题</li>
<li>友情链接</li>
</ul>
</div>
</body>
</html>0
收起
正在回答
2回答
你好同学，这个会涉及到你目前没有学过的一个知识点，老师简单给你讲讲，你了解一下即可。
上面文本框的的box-sizing属性值为content-box;，意思是在宽度和高度之外绘制padding或者border ，即border不会计算在100%之中
而按钮的box-sizing属性值为border-box，意思是把border或者padding的绘制计算到width之中。所以按钮默认的边框是计算在100%之内的。
所以上面的输入框宽度实际超出父容器的100%（超出了4px） ，按钮的宽度才是正常的100%。但是因为同学还没有学习到box-sizing这个属性，所以老师才让同学暂时把按钮的宽度与输入框的设置成一致的(这里输入框宽度虽然超出了，但是没有影响）。同学在学到后面的课程会讲解这个属性，那个时候就可以直接设置如下解决此问题：
祝学习愉快，望采纳。
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星