麻烦老师检查下有没有问题谢谢！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
.header{
width: 100%;
height: 80px;
background: black;
overflow: hidden;
position: fixed;
}
.logo{
float: left;
}
.header li,.footer li{
float: left;
margin: 0 40px;
}
.header ul{
float: right;
line-height: 80px;
}
.header a{
color: white;
display: block;
height: 80px;
}
.header img{
display: block;
height: 80px;
}
.container a{
color: black;
}
.container{
width: 100%;
height: 800px;
background: #99cccc;
}
.left{
width: 70%;
height: 800px;
float: left;
line-height: 40px;
}
.right{
width: 29.5%;
height: 800px;
float: right;
}
.middle{
width: 0.5%;
height: 800px;
background: orange;
float: left;
}
.con1{
float: left;
padding-top: 160px;
padding-left: 120px
}
.con2{
float: right;
padding-top: 160px;
padding-right: 120px;
}
.con1 span{
background: #ff6666;
}
.right .inp{
padding-top: 160px;
padding-left: 60px;
}
.right .name,.right .pas{
width: 180px;
height: 30px;
font-size: 10px;
border-style: none;
}
.right .sub{
width: 180px;
height: 30px;
background: red;
border-style: none;
color: white;
}
.footer{
width: 100%;
height: 80px;
background: black;
line-height: 80px;
text-align: center;
position: fixed;
bottom: 0;
}
.footer a{
color: white;
}
.footer ul{
display: inline-block;
}
</style>
</head>
<body>
<div class="header">
<div class="logo"><a href="#"><img src="http://img1.sycdn.imooc.com/climg//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="container">
<div class="left">
<div class="con1">
<h2>课程推荐</h2>
<ul>
<li><span>职业路径</span> <a href="#">HTML5与CSS3实现动态网页</a></li>
<li><span>职业路径</span> <a href="#">零基础入门Android语法与界面</a></li>
<li><span>职业路径</span> <a href="#">iOS基础语法与常用控件</a></li>
<li><span>职业路径</span> <a href="#">PHP入门开发</a></li>
<li><span>职业路径</span> <a href="#">Java入门开n发</a></li>
</ul>
</div>
<div class="con2">
<h2>相关课程</h2>
<ul>
<li><a href="#">HTMM</a> <a href="#">CSS</a> <a href="#">JavaScript</a></li>
<li><a href="#">HTMM5</a> <a href="#">CSS3</a> <a href="#">jQuery</a></li>
<li><a href="#">移动端基础</a> <a href="#">移动端APP开发</a></li>
</ul>
</div>
</div>
<div class="middle"></div>
<div class="right">
<div class="inp">
<h2>登录</h2><br>
<form method="get">
<input type="text" class="name" placeholder="请输入姓名/手机号"><br><br>
<input type="password" class="pas" placeholder="6-16位密码 区分大小写 不能用空格"><br><br>
<input type="submit" class="sub" 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>
</body>
</html>
正在回答
同学你好，代码的大致效果已经实现了哦，在这给同学题两个优化建议：
1、网友中间的内容右侧，表单区域，建议增加input输入框的宽度，让其里面的文字占位符全部显示出来：
2、网页中间的部分跟底部有空白间隙：
这是因为中间内容区域高度过低，同学可以将中间内容部分container调大一点，或者将底部的固定定位去掉，让其自动排版，这里建议去掉底部的固定定位，因为这样就不用再进行计算要给中间内容多少高度了：
希望我的回答能够帮助到你，望采纳，祝学习愉快！
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星