老師~我遇到幾個問題
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
*{margin: 0; padding: 0; list-style: none;}
.nav{
width: 100%;
height: 100px;
background: black;
position: fixed;
}
.nav img{
float: left;
display: block;
}
.nav ul{
}
.nav ul li{
float: right;
line-height: 100px;
margin: 0 40px;
text-decoration: none;
}
li a{
color: white;
text-decoration: none;
}
.main img{
width: 100%;
display: block;
}
.main .top{
padding-top:100px;
}
.foot{
width: 100%;
height: 100px;
background: black;
position: fixed;
}
.foot ul{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right:0 ;
margin: auto auto;
}
.foot li{
float: left;
margin: 50px;
}
</style>
<title></title>
</head>
<body>
<div class="nav">
<a href="#"><img src="http://img1.sycdn.imooc.com\/climg/58c0d2d900016ce303000100.png"></a>
<ul>
<li><a href="#" class="nav-1">手記</a></li>
<li><a href="#" class="nav-1">猿問</a></li>
<li><a href="#" class="nav-1">實戰</a></li>
<li><a href="#" class="nav-1">職業路徑</a></li>
<li><a href="#" class="nav-1">課程</a></li>
</ul>
</div>
<div class="main">
<img class="top" src="http://img1.sycdn.imooc.com//climg/58c0eda50001e12416000480.jpg">
<img src="http://img1.sycdn.imooc.com\/climg/58c0edb80001c9f216000480.jpg">
<img src="http://img1.sycdn.imooc.com\/climg/58c0edc9000100d516000480.jpg">
</div>
<div class="foot">
<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>為什麼頁腳部分position設fixed就頁腳就不見了? 如何將頁腳置中
如何將頁腳的li置中得如作業標準一樣?
為什麼我的nav列如果縮小視窗就變得無法全部顯示呢?
19
收起
正在回答
2回答
同学你好，关于同学的问题回答如下：
1、头部导航项的顺序写反了：
应该是整体右浮动，单个左浮动：
2、跟第一张图片是同样的道理，由于底部设置固定定位不占位置，导致第三张图片下移，部分被遮挡：
可以给主体部分整体设置上下间距：
3、页脚部分，没有实现垂直居中显示：
不建议同学使用间距实现，因为这样是很难计算准确且很麻烦的。建议同学使用行高等于高度实现：
4、ul实现水平居中，可以通过将自身转换为行内块，给父元素设置text-align:center实现：
5、当窗口缩小时，宽度不足以放下内容，布局就会错乱。可以给其设置最小宽度：
当页面宽度小于最小宽度时，布局就不会再发生变化。
如果我的回答帮助了你，欢迎采纳。祝学习愉快~
weixin_慕雪0272820
2020-06-10 14:14:02
老師 問題1解決了。 2 3 再麻煩你。
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星