fixed问题
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*此处写代码*/
*{padding: 0;margin: 0;}
.div{width:1100px; margin: 0 auto}
.header{height: 100px;width:1100px;background-color: #14191e;position:fixed; z-index: 999;}
.header_img{position: relative;}
img{display: block;}
.header_content a{
text-decoration: none;
font-size: 20px;
color: orange;
position: relative;
left: 450px;
padding: 0 20px;
top:-60px;
}
.footer{
background-color: #14191e;
width: 1100px;
height: 100px;
text-align: center;
line-height: 100px;
/*position: fixed;*/
}
.footer a{
text-decoration: none;
font-size: 20px;
color: orange;
padding: 0 50px;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="div">
<div class="header">
<div class="header_img"><img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png"/></div>
<div class="header_content">
<a href="#">课程</a>
<a href="#">职业路径</a>
<a href="#">实践</a>
<a href="#">猿问</a>
<a href="#">手记</a>
</div>
</div>
<div class="container">
<div class="pic1">
<img src="http://img1.sycdn.imooc.com/climg//58c0eda50001e12416000480.jpg" width="100%"/>
</div>
<div class="pic1">
<img src="http://img1.sycdn.imooc.com/climg//58c0edb80001c9f216000480.jpg" width="100%"/>
</div>
<div class="pic1">
<img src="http://img1.sycdn.imooc.com/climg//58c0edc9000100d516000480.jpg" width="100%"/>
</div>
</div>
<div class="footer">
<a href="#">联系我们</a>
<a href="#">联系我们</a>
<a href="#">联系我们</a>
<a href="#">联系我们</a>
<a href="#">联系我们</a>
</div>
</div>
</body>
</html>
按照2-4的基础来写width应为1100px，不是100%。我的问题是为啥给foot添加position:fixed，该层就不显示出来了，还是我没搞懂定位的原理
正在回答
同学你好，
1、顶部导航项没有实现垂直居中显示，代码中定位复杂了，左右两侧浮动就可以，行高实现垂直居中，如下：
2、不能只给元素添加固定定位哦，还需要设置方位属性 ，将元素固定在哪个位置，如下：
3、container中需要设置上下间距，可以不用相对定位，用margin上下间距就可以，如下：
4、需要将1100px修改成宽度为100%哦。
自己再测试下，祝学习愉快！
欢迎采纳~
css样式里面还应加个
.container{position: relative;top:100px;}
footer的fixed问题还是没弄明白
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星