老师这道题做完了帮我看下这段代码的实现对不对，有没有什么改进人地方？我发现整体板块设计很重要

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>这是一个HTML文件</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}

		.bodybody{
			width:100%;
			margin-top: 100px;
			margin-bottom: 80px;
		}

		.headernav li,.footernav li,.left .left2list,.left .left1list{
			list-style: none;
		}

        .header{
            background:#000;
            width: 100%;
            height: 100px;
            min-width: 800px;
            position: fixed;
            top:0;
        }

        .pic{
			background:url("http://img1.sycdn.imooc.com/climg//59093e9c00016ce303000100.png") no-repeat;
			width:300px;
			height:100px;
			float:left;
		}

		.headernav{
			display: inline-block;
			float: right;			
		}      

		.headernav li{
			line-height:100px;
			color:#fff;
            float:left;
            margin-right:40px; 
		}

		.left{
			width: 60%;
			height: 600px;
			background: #6cf;
            float: left;
		}

		.left1{
			float: left;
			margin-top:70px;
			margin-left: 110px;
			height: 10px;
			line-height: 40px;
		}

		.left1list span{
			background: pink;
		}

		.left2{
			float: left;
			margin-top:70px;
			margin-left: 140px;
			list-style:none;
			line-height: 40px;
		}

		.bodybody .middle{
			width: 1%;
			height: 600px;
			background:#f9c;
			float:left;
		}
        
        .bodybody .right{
           width: 39%;
           height: 600px;
           background: #6cf;
           float:right;
        }

		 .footer{
            width: 100%;
            height: 80px;
            background: #000;
            position: fixed;
            bottom:0;
        }

         .footernav{ 	
         	text-align:center;
         }

         .footernav li{
         	display:inline-block;  
         	color:#fff;        	
         	line-height:80px;  
         	margin:0 20px;
         }


         /*input::-webkit-input-placeholder{
            color:#999;
        }*/

        .form{
        	color: #999;
            display: block;
            width: 150px;
            height: 25px;
        }

        .bottom{
        	width:150px;
        	height:25px;
        	background: pink;
        	display: block;
        }

        .login{
        	margin-top:70px;
        	margin-left:70px;
        	line-height: 30px;
        }

        h2,.form,.bottom{
            margin: 20px;
        }
        	        
	</style>
</head>
<body>
	<div class="header">
		<div class="pic"></div>
		<ul class="headernav">
			<li>课程</li>
			<li>职业路径</li>
			<li>实战</li>
			<li>原文</li>
			<li>手记</li>
		</ul>
	</div>

	<div class="bodybody">
		<div class="left">
			<div class="left1">
				<h2>课程推荐</h2>
			    <ul class="left1list">
			    	<li><span>职业路径</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;实现动态网页</li>
			    	<li><span>职业路径</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;实现动态网页</li>
			    	<li><span>职业路径</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;实现动态网页</li>
			    	<li><span>职业路径</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;实现动态网页</li>
			    	<li><span>职业路径</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;实现动态网页</li>
			    </ul>
			</div>
			<div class="left2">
				<h2>相关课程</h2>
			    <ul class="left2list">
			    	<li>HTML CSS JAVASCRIPT</li>
			    	<li>HTML5 CSS3 JAVASCRIPT</li>
			    	<li>移动端基础 移动APPA开发</li>
			    </ul>
			</div>
		</div>
		<div class="middle"></div>
		<div class="right">
			<div class="login">
			<h2>登录</h2>
			<input type="text" class="form" placeholder="请输入邮箱或手机">
			<input type="password" class="form" placeholder="请输入6-16位密码">
			<input type="submit" class="bottom"  name="bottom" value="登录">
		    </div>
		</div>
	</div>

	<div class="footer">
		<ul class="footernav">
			<li>网站首页</li>
			<li>企业合作</li>
			<li>人才招聘</li>
			<li>联系我们</li>
			<li>常见问题</li>
			<li>友情链接</li>
		</ul>
	</div>

</body>
</html>

Di1860 2019-04-18

源自：CSS网页布局基础 2-12 编程练习

收起

1回答

好帮手慕慕子回答被采纳获得+3积分 2019-04-18 11:20:41

同学你好， 1、表单里的输入框和按钮右边没有对齐显示。另外按钮边框太粗，显示效果不好看，建议如下修改：为input标签设置统一的border值，调整按钮的宽度，示例：

2、中间内容与页脚之间有部分空白，显示不好看建议优化：可以适当增加中间内容的高度

同学理解的很棒，整体板块板块设计的好，在编写CSS样式的时候思路会更加清晰。继续努力哦~~~

如果帮助到了你，欢迎采纳

祝学习愉快~~~

收起回答

Di1860 提问者 #1

老师，是不是给button设置的边框是包含在给button设置的width里面的，所以为了对齐需要设置152px；而form的width只是他的长度，不包含边框，所以设置150px，然后如果给form设置了边框，这个时候其实整个form真正展现的长度应该是width+两个border的长度。我这样理解对不对呢？那如果是的话button和form的计算还真不一样

2019-04-19 10:18:00
好帮手慕慕子回复提问者 Di1860 #2

同学理解的很对。继续努力哦~~~

2019-04-19 10:19:33