麻烦老师帮忙看一下哪里需要改进
来源：2-12 编程练习
程序员小张
2020-04-07 12:44:44
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
*{margin: 0;padding: 0;}
.container{
width: 100%;
}
.head,.foot{
background-color: black;
height: 100px;
}
.body{
overflow: hidden;
zoom: 1;
}
.foot{
text-align: center;
}
.logo img{
display: block;
float: left;
}
.nav ul{
float: right;
}
li{
display: inline-block;
height: 100px;
line-height: 100px;
}
li a{
text-decoration: none;
font-size: 20px;
color: white;
margin-left: 20px;
margin-right: 20px;
}
.left,.middle,.right,.line{
display: block;
float: left;
height: 458px;
}
.line{
width: 1%;
background-color: orange;
}
.left,.middle,.right{
width: 33%;
background-color: cadetblue;
}
table{
border-spacing: 10px;
}
table,.r,.left h3,.middle h3{
position: relative;
left: 40px;
top:40px;
}
.text,.sub{
width: 250px;
height: 30px;
margin-top: 10px;
margin-bottom: 10px;
}
.sub{
background-color: red;
border: 0px;
color: white;
}
.sub:hover{
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<div class="head">
<div class="logo">
<a href="#"><img src="http://climg.mukewang.com/59093e9c00016ce303000100.png" /></a>
</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="body">
<div class="left">
<h3>课程推荐</h3>
<table class="tab1">
<tr>
<td bgcolor="pink">职业路径</td>
<td>HTML5与CSS3实现动态网页</td>
</tr>
<tr>
<td bgcolor="pink">职业路径</td>
<td>零基础入门Android语法与界面</td>
</tr>
<tr>
<td bgcolor="pink">职业路径</td>
<td>iOS基础语法与常用控件</td>
</tr>
<tr>
<td bgcolor="pink">职业路径</td>
<td>PHP入门开发</td>
</tr>
<tr>
<td bgcolor="pink">职业路径</td>
<td>JAVA入门开发</td>
</tr>
</table>
</div>
<div class="middle">
<h3>相关课程</h3>
<table class="tab2">
<tr>
<td>HTML CSS JavaScript</td>
</tr>
<tr>
<td>HTML5 CSS3 Jquery</td>
</tr>
<tr>
<td>移动端基础 移动端APP开发</td>
</tr>
</table>
</div>
<div class="line"> </div>
<div class="right">
<div class="r">
<h3>登录</h3>
<input placeholder="请输入登录邮箱/手机号" class="text"/>
<br>
<input placeholder="6-16位密码,区分大小写，不能用空格" class="text"/>
<br>
<input type="submit" value="登录" class="sub">
</div>
</div>
</div>
<div class="foot">
<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回答
-
同学你好，内容的表单部分，输入款跟按钮的宽度不一致：
同学可以将其设置为相等的宽度。
祝学习愉快~
0
相似问题