1为什么会出现空隙 2当缩小屏幕时为什么导航栏的文字会掉框 3 如何设置form方框的高度
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin: 0; padding: 0;}
.container{width: 100%;height:auto;max-width: 900px;margin: 0 auto;}
.header{width: 100%;height: 100px;background: #000;}
.header .logo{float: left;}
.header img{width:300px; height: 80px;padding: 10px 10px; }
.nav{float: right;}
li{ color:#fff;list-style-type:none; width:100px; line-height: 100px;
float: right;
}
.main {width: 100%;max-width: 900px;min-height:500px;margin: 0 auto;}
.left {width: 30%;min-height:500px;background: red;float: left;}
.middle{width:40%;min-height:500px;background:pink;float: left; }
.right{width: 30%;min-height: 500px;background: blue; float: right;}
.middle img{width: 300px;height:300px;padding: 100px 30px;}
.footer{width: 100%;height: 100px;background: #000;float: left;text-align: center;}
a{text-decoration: none;color: #fff;font-size:15px;line-height: 100px;padding: 0 20px;}
.left1{padding: 50px 0 50px 30px;}
.left2{padding: 10px 0;font-size:8px;color: #fff;}
.lj{padding-right: 10px;background:green;}
.right1{padding: 50px 0 50px 20px;}
h3{color: #fff;}
td{padding: 20px 0; color:#000;}
.d1{text-align: center;color: #fff;}
.d2{background: red; text-align: center;color: #fff;}
</style>
</head>
<body>
<div class="container">
<div class="header">
<div class="logo">
<img src="http://img1.sycdn.imooc.com/climg//590037f600016ce303000100.png" alt="">
<div class=nav>
<ul>
<li>课程</li>
<li>职业路径</li>
<li>实战</li>
<li>猿问</li>
<li>手记</li>
</ul>
</div>
</div>
</div>
<div class="main">
<div class="left">
<div class="left1">
<h3>课程推荐</h3>
<div class="left2">
<span class="lj">职业路径</span>
<span>HTMl5与CSS3实现动态网页</span>
</div>
<div class="left2">
<span class="lj">职业路径</span>
<span>零基础入门Andaoid语法与界面</span>
</div>
<div class="left2">
<span class="lj">职业路径</span>
<span>ios基础语法与常用控件</span>
</div>
<div class="left2">
<span class="lj" >职业路径</span>
<span>php入门开发</span>
</div>
<div class="left2">
<span class="lj">职业路径</span>
<span>java入门开发</span>
</div>
</div>
</div>
<div class="middle">
<img src="http://img1.sycdn.imooc.com/climg//590037e00001fab706000400.jpg" alt="">
</div>
<div class="right">
<div class="right1">
<h3>登录</h3>
<form>
<table>
<tr>
<td><input type="text" name="telephone" size="28px" placeholder="请输入登录邮箱/手记号码" class="d1"></td>
</tr>
<tr>
<td><input type="text" name="telephone" size="28px" placeholder="6-16位密码，区分大小写，不能用空格" class="d1"></td>
</tr>
<tr >
<td ><input type="text" name="telephone" size="28px" placeholder="登录" class="d2"></td>
</tr>
</table>
</form>
</div>
</div>
</div>
<div class="footer">
<a href="http://www.imooc.com/">网站首页</a>
<a href="http://www.imooc.com/">合作企业</a>
<a href="http://www.imooc.com/">人才招聘</a>
<a href="http://www.imooc.com/">联系我们</a>
<a href="http://www.imooc.com/">常见问题</a>
<a href="http://www.imooc.com/">友情链接</a>
</div>
</div>
</body>
</html>
正在回答 回答被采纳积分+1
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36712 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧