请老师检查下，有什么地方需要改进的
来源：3-3 编程练习
qq_終奌傷起奌
2019-09-09 18:22:28
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
body{
min-width: 700px;
}
/*头部*/
.header,.footer{
width:100%;
height:100px;
margin:0 auto;
background:black;
}
.logo{
width:300px;
height:100px;
float:left;
}
.nav{
position:absolute;
right:100px;
}
ul li{
list-style:none;
line-height: 100px;
}
.nav ul li{
float:left;
margin-left:50px;
}
.nav-a{
color:#fff;
text-decoration: none;
font-size:20px;
}
.nav-a:hover{
color:orange;
}
/*内容*/
.container{
padding:0 300px 0 350px;
height:800px;
}
.left,.middle,.right{
position:relative;
float:left;
min-height:800px;
}
.middle{
width:100%;
background: pink;
}
.middle-img{
margin-left:200px;
margin-top:150px;
}
.left{
width:350px;
background:#ffefdb;
margin-left: -100%;
left:-350px;
}
.left p{
line-height: 3em;
}
.p1{
font-size:30px;
margin-top:100px;
}
.sa{
background:#ff9999;
margin-left: 20px;
}
a{
text-decoration: none;
}
.a{
color:black;
}
.right{
width:300px;
background:#add8e6;
margin-right:-300px;
}
.or{
background:red;
cursor:pointer;
}
input{
display: inline-block;
width:250px;
height:40px;
margin-top: 30px;
margin-left: 20px;
}
/*页脚*/
.footer{
margin:0 auto;
text-align: center;
}
.footer ul li{
display:inline-block;
margin:0 30px;
}
.a1{
color:#fff;
font-size:20px;
margin:0 auto;
}
</style>
</head>
<body>
<div class="header">
<div class="logo">
<a href="#"><img src="http://climg.mukewang.com/590037f600016ce303000100.png"></a>
</div>
<div class="nav">
<ul>
<li><a href="#" class="nav-a">课程</a></li>
<li><a href="#" class="nav-a">职业路径</a></li>
<li><a href="#" class="nav-a">实战</a></li>
<li><a href="#" class="nav-a">猿问</a></li>
<li><a href="#" class="nav-a">手记</a></li>
</ul>
</div>
</div>
<div class="container">
<div class="middle">
<img src="http://climg.mukewang.com/590037e00001fab706000400.jpg" class="middle-img">
</div>
<div class="left">
<p class="p1">课程推荐</p>
<p><span class="sa">职业课程</span> <a href="#" class="a">HTML与CSS实现动态网页</a></p>
<p><span class="sa">职业课程</span> <a href="#" class="a">零基础入门Android语法与界面</a></p>
<p><span class="sa">职业课程</span> <a href="#" class="a">IOS基础语法与常用控件</a></p>
<p><span class="sa">职业课程</span> <a href="#" class="a">PHP入门开发</a></p>
<p><span class="sa">职业课程</span> <a href="#" class="a">JAVA入门开发</a></p>
</div>
<div class="right">
<p class="p1">登录</p>
<div class="login">
<input type="text" placeholder="请输入登录邮箱/手机号" name="user"/><br/>
<input type="password" placeholder="6-16密码,区分大小写,不能用空格" maxlength="16" name="pwd"/><br/>
<input type="button" class="or" value="登 录"/>
</div>
</div>
</div>
<div class="footer">
<ul>
<li><a href="#" class="a1">网页首页</a></li>
<li><a href="#" class="a1">企业合作</a></li>
<li><a href="#" class="a1">人才招聘</a></li>
<li><a href="#" class="a1">联系我们</a></li>
<li><a href="#" class="a1">常见问题</a></li>
<li><a href="#" class="a1">友情链接</a></li>
</ul>
</div>
</body>
</html>写回答
1回答
-
同学你好，
1，主体左侧文字和边框之间的距离过小，建议添加一个padding-left的值。
2， 因为浏览器默认给input标签添加了2px的border值，另外浏览器默认type类型为submit的input标签设置的width值包括了border值，所以要实现按钮和输入框宽度一致，需要调整按钮的width值，包括border哦~
修改为：
效果：
如果我的回答帮助了你，欢迎采纳，祝学习愉快~
0
相似问题