壮士！看一下，我做了改动，有很多地方实现的方法可能不好，都是自己试出来的，指导指导，问题在注释中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>123456</title>
<style type="text/css">
body{
padding: 0;
margin: 0;
}
/*页头logo导航*/
.header,
.footer{
width: 100%;
height: 80px;
background: #483d8b;
text-align: center;
font-size: 20px;
}
/*使用绝对定位来将原本在顶端的footer元素进行移动，有没有更好的办法？？？*/
.footer{
position: absolute;
top: 850px;/*页头+主体=50+800=850*/
}
.logo{
float: left;
}
.nav{
float: right;/*父元素设置浮动，下面的子元素也要设置浮动，解决导航由块元素排列问题*/
}
.nav-li{
line-height: 80px;
margin-right: 30px;
float: right;
}
.footer-li{
display: inline-block;/*解决页脚导航块元素排列问题*/
line-height: 80px;
margin-right:30px;
}
.center,
.left,
.right{
background: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1509504596724&di=bda103a949aac19e465873271559fea0&imgtype=0&src=http%3A%2F%2Fimg000.hc360.cn%2Fy2%2FM00%2F16%2FAC%2FwKhQdFRtGimEH4RHAAAAABneA68280.jpg);/*设置背景图片*/
}
.center{
width: 35%;
height: 800px;
float: left;
text-align: center;/*文本居中*/
}
.right{
width: 29.5%;
height: 800px;
float: right;
text-align: center;
/*对应.feng 设置相对定位，解决元素塌陷*/
position: relative;
margin-top: -801px;/*右边栏顶部设为800时出现1px白色边框线，可能与.feng 有关 没找到具体解决方法 只能把-800设成-801或将.feng高度降1*/
}
.left{
width: 35%;
height: 800px;
float: left;
text-align: center;
}
.center-li{
margin-top: 30%;
}
/*添加一个DIV,设置它的左边框 慕课老师说：16px=1% 这是一个只剩下左边框的盒子，它已经不能装彩虹糖了*/
.feng{
width: 0.5%;
height: 800px;
float: left;
border-left: 8px solid #008080;
}
.input{
width: 180px;
height: 25px;
/*border-radius: 15px;*/
outline: #2e8b57 solid 3px ;/*设置轮廓样式*/
}
.input-li{
width: 90px;
height: 30px;
/*border-radius: 15px;*/
color: #fff;
font-family: "微软雅黑";
background:#008b8b;
border: 1px solid #66cdaa;/*设置按钮边框样式*/
}
.form{
margin-top: 34%;/*.form相对于.input就是父元素，所以通过这种方法设置位置*/
}
/*设置文字共同样式*/
.main-inner,
.main-li{
line-height: 30px;
font-size: 18px;
font-weight: bold;
color: #daa520;
}
span{
background: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1509505096996&di=0cceb138ba883a8157ae55d023dea3eb&imgtype=0&src=http%3A%2F%2Fpic32.photophoto.cn%2F20140816%2F0008020286054467_b.jpg);
color: #ff4500;
font-size: 20px;
}
h2{
color: #008080;
}
a{
text-decoration: none;/*设置a标签取消下划线，并对其文字进行颜色设置*/
color: #000;
font-family: "楷体";
}
</style>
</head>
<body>
<!--页头-->
<div class="header">
<div class="logo">
<img < width="220px" src="http://img1.sycdn.imooc.com/climg//59093e9c00016ce303000100.png" alt="">
</div>
<div class="nav">
<div class="nav-li"><a href="http://class.imooc.com/">手记</a></div>
<div class="nav-li"><a href="http://class.imooc.com/">猿问</a></div>
<div class="nav-li"><a href="http://class.imooc.com/">实战</a></div>
<div class="nav-li"><a href="http://class.imooc.com/">职业路径</a></div>
<div class="nav-li"><a href="http://class.imooc.com/">课程</a></div>
</div>
</div>
<!--主体-->
<div class="main">
<!--左侧-->
<div class="left">
<div class="center-li">
<h2>课程推荐</h2>
<div class="main-inner"><span class="span">HOT</span> <a href="http://class.imooc.com/">HTML5与CSS3实现动态网页</a></div>
<div class="main-inner"><span class="span">HOT</span> <a href="http://class.imooc.com/">零基础入门Android语法与界面</a></div>
<div class="main-inner"><span class="span">HOT</span> <a href="http://class.imooc.com/"> ios基础语法与常用控件</a></div>
<div class="main-inner"><span class="span">HOT</span> <a href="http://class.imooc.com/">php入门开发</a></div>
<div class="main-inner"><span class="span">HOT</span> <a href="http://class.imooc.com/">Java入门开发</a></div>
</div>
</div>
<!--中间-->
<div class="center">
<div class="center-li">
<h2>相关课程</h2>
<div class="main-li"><a href="http://class.imooc.com/">HTML CSS JavaScript</a></div>
<div class="main-li"><a href="http://class.imooc.com/">HTML CSS jQuery</a></div>
<div class="main-li"><a href="http://class.imooc.com/">移动端基础 移动端开发</a></div>
</div>
</div>
<!--右侧夹缝-->
<div class="feng"></div>
<!--右侧-->
<div class="right">
<form class="form">
<h2>登录</h2>
<input class="input" type="text" name="username" placeholder="请输入账号" autofocus required><br/><br/>
<input class="input" type="password" name="psw" placeholder="请输入密码" required><br/><br/>
<input class="input-li" type="submit" name="登录" value="登录" />
<input class="input-li" type="submit" name="注册" value="注册" />
</form>
</div>
</div>
<!--页脚-->
<div class="footer">
<div class="footer-li">
<div class="footer-li"><a href="http://www.imooc.com/">网站首页</a></div>
<div class="footer-li"><a href="http://class.imooc.com/">企业合作</a></div>
<div class="footer-li"><a href="http://class.imooc.com/">人才招聘</a></div>
<div class="footer-li"><a href="http://class.imooc.com/">联系我们</a></div>
<div class="footer-li"><a href="http://class.imooc.com/">常见问题</a></div>
<div class="footer-li"><a href="http://class.imooc.com/">友情链接</a></div>
<p>京 ITC 备 6666666号 -1 2017-2030 CPLASF.com 版权所有</p>
</div>
</div>
</body>
</html>60
收起
正在回答
3回答
从你的代码中能看出来你努力了。还有一些技巧性的东西没有运用的不是很好。我给你一一指出来：
1、头部的导航菜单，你做的没有问题，正确的一般来说的话，就是这么写的。我表示没有看懂你这句话的意思“/*父元素设置浮动，下面的子元素也要设置浮动，解决导航由块元素排列问题*/”
2、footer中的这句p标签的不需要，题目中没有要求，如果要加这么一个东西的话，需要放到他的它父元素外，并且把p标签改成div，然后再设置div的宽高等样式。而且，上面的div怎么能和父元素的class名一样呢？
3、主题部分的右侧，不需要用定位来实现的，你在未使用定位之前产生错位的原因是这几个块的宽度和超过了100%，把右边的宽度改一下就能显示在一行了。因为有些标签会有一些默认的填充，一不小心就会超长，所以，在这里你不需要再给feng设置0.5%的宽度了，不给他设置的话，他会自动的显示100%剪去其他块的宽度，因此也不会超长，这样一来，right中的定位就可以去掉了：
4、主题部分，因为你中间的内容使用了浮动，在最后就要清楚浮动，不然父元素会塌陷，会撑不起来，后面的元素就会网上窜，你的底部部分在上面就是因为这个原因，记得要在几个元素的后面，父元素的内部最后清楚，参考下面的写法：
5、根据第4点，你应该知道了，你给父元素设置定位是因为之前浮动没有清楚，导致后面的元素网上窜了，原因是浮动的元素脱离了文档流，而父元素也没有设置宽高，所以就会网上走，清楚浮动之后，footer中的定位内容就不需要了，：
以上就是你作业中出现的问题，虽然已经被你拐弯抹角的解决了，但是都是画蛇添足了，这么一解释你应该都明白了， 另外，主题部分的这个背景图片不需要，换成背景颜色就可以了，这都是小问题。加油！
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36712 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星