请老师批改2-9编程练习
来源：2-10 编程练习
yjw123
2017-09-25 17:05:22
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{padding:0;margin:0;font-family: "微软黑体";}
.header{
width:100%;
height:100px;
background: black;
}
a{text-decoration: none;color:white;font-size: 25px;margin-left: 30px;}
.navigation{
position:absolute;
top:0;
left:63%;
line-height: 100px;
}
.main{
width:100%;
padding-top:100px;
background: #7ecef4;
width:100%;
height:350px;
}
.footer{
width:100%;
background: black;
height:80px;
text-align: center;
line-height: 80px;
}
.main1{
width:50%;
height:350px;
float:left;
font-size: 20px;
}
.main2{
width:50%;
height: 350px;
float: right;
font-size: 20px;
}
.div1{
position: absolute;
left:200px;
}
.div2{
position: absolute;
left:800px;
}
</style>
</head>
<body>
<div class="header">
<!-- logo -->
<div class="logo">
<a href="#"><img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png" alt=""></a>
</div>
<!-- 导航 -->
<div class="navigation">
<a href="#">课程</a>
<a href="#">职业路径</a>
<a href="#">实战</a>
<a href="#">猿问</a>
<a href="#">手记</a>
</div>
</div>
<div class="main">
<div class="main1">
<div class="div1">
<h3>课程推荐</h3> <br>
<p><span>课程推荐</span> HTML5与CSS实现动态网页</p> <br>
<p><span>课程推荐</span> 零基础入门Android语法与界面</p> <br>
<p><span>课程推荐</span> ios基础语法与常用控件</p> <br>
<p><span>课程推荐</span> PHP入门开发</p> <br>
<p><span>课程推荐</span> JAVA入门开发</p>
</div>
</div>
<div class="main2">
<div class="div2">
<h3>相关课程</h3> <br>
<p>HTML CSS JavaScript</p> <br>
<p>HTML5 CSS3 Jquery</p> <br>
<p>移动端基础 移动端APP开发</p>
</div>
</div>
</div>
<div class="footer">
<a href="#">网站首页</a>
<a href="#">企业合作</a>
<a href="#">人才招聘</a>
<a href="#">联系我们</a>
<a href="#">友情链接</a>
</div>
</body>
</html>
3回答
-
div1是main1的子元素，你现在想让div1进行绝对定位，如果父元素上不写position：relative的话，是相对浏览器窗口来定位的，如果你给父元素设置了relative，那么将将对于父元素来进行绝对定位。div2和main2也是一样的道理。这是定位这门课就该学会的，如果你还没有听懂我讲的，建议再去重新学习《CSS定位（position）》这门课。祝学习愉快！
0h017-09-25 -
yjw123
提问者
2017-09-25
可以解释一下吗
0 -
Miss路
2017-09-25
可以添加一个相对的参考，是相对于各自的父级进行了定位。祝学习愉快！
0
相似问题