请老师检查作业
来源：2-12 编程练习
BT103
2019-09-05 21:29:59
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>检测6</title>
<style>
*{margin:0;padding:0;text-decoration: none;list-style: none;}
li{font-size:25px;color:#fff;font-weight: bold;}
.Left p a,.Middle p a{font-size:23px;color:#000;font-weight: bold;}
div.Nav a,div.Footer a{color:white}
div.Left span{background-color: pink;}
/* base-setting */
div.Nav{width:100%;height:100px;background-color: #000;position: fixed;}
div.Middle{width:100%;height:2000px;padding-top: 100px;}
div.Footer{width:100%;height:100px;background-color: #000;position: fixed;bottom:0;}
/* position-setting */
div{overflow:hidden;zoom:1;}
div.Nav img{float: left;}
div.Nav ul{padding-right:80px;}
div.Nav li{float:right;line-height:100px;margin:0 60px;}
/* Nav-seeting */
div.Footer ul{text-align: center;}
div.Footer li{display:inline-block;line-height:100px;margin:0 80px;}
/* Footer-setting */
div.Left{width:30%;height:2000px;float:left;padding-top: 100px;background-color: #33ddff;}
div.Left-1{margin-top:40px;margin-left:100px;}
div.Left-1 h2{margin-left:30px;}
div.Left-1 p{margin:30px 30px;}
/* Body-left-setting */
div.Middle{width:30%;height:2000px;float:left;padding-top: 100px;background-color: #33ddff;}
div.Middle-1{margin-top:40px;margin-left:100px;}
div.Middle-1 h2{margin-left:30px;}
div.Middle-1 p{margin:30px 30px;}
/* Body-middle-setting */
div.Line{width:1%;height:2000px;float:left;padding-top:100px;background-color: orange;}
div.Right{width:39%;height:2000px;float:right;padding-top: 100px;background-color: #33ddff;}
div.Right-1{margin:40px 300px;}
/* Body-right-setting */
div input{display:block;width:100%;height:40px;margin:30px auto;}
div .I3{background: red}
</style>
</head>
<body>
<div class="All">
<div class="Nav">
<img src="http://climg.mukewang.com/59093e9c00016ce303000100.png"/>
<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 class="Body">
<div class="Left">
<div class="Left-1">
<h2>课程推荐</h2>
<p><span>课程路径</span> <a href="#">课程路径课程路径</a></p>
<p><span>课程路径</span> <a href="#">课程路径课程路径</a></p>
<p><span>课程路径</span> <a href="#">课程路径课程路径</a></p>
<p><span>课程路径</span> <a href="#">课程路径课程路径</a></p>
<p><span>课程路径</span> <a href="#">课程路径课程路径</a></p>
</div>
</div>
<div class="Middle">
<div class="Middle-1">
<h2>课程推荐</h2>
<p><a href="#">课程路径</a> <a href="#">课程路径</a> <a href="#">课程路径</a></p>
<p><a href="#">课程路径</a> <a href="#">课程路径</a> <a href="#">课程路径</a></p>
<p><a href="#">课程路径</a> <a href="#">课程路径</a></p>
</div>
</div>
<div class="Line"></div>
<div class="Right">
<div class="Right-1">
<h2>登录</h2>
<form>
<input class="I1" type="text" name="admit" placeholder="请输入用户名/手机号">
<input class="I2" type="password" name="psw" placeholder="输入6-16位密码/不能为空格">
<input class="I3" type="submit" name="login" value="登录">
</form>
</div>
</div>
</div>
<div class="Footer">
<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回答
-
好帮手慕夭夭
2019-09-06
你好同学，代码如下完善：
1.导航只给li设置浮动，但是它的父容器ul还是在原位置上，并且由于子元素脱离文档流， 导致它高度塌陷：
建议参考如下调整：
2.输入框宽度太小
如下调整：
3.尾部链接之间间距太大，如下调整更好
祝学习愉快，望采纳。
0
