老师，我这个没实现，有好多问题

<!DOCTYPE html>

<html>

<head>

/*此处写代码*/

margin:0;

padding:0;

font-family:"微软雅黑";

}

.container{

width:100%;

height:auto;

}

.head{

width:100%;

height:100px;

background:black;

position:fixed;

}

.nav ul{

color:black;

float:left;

}

.nav ul li{

}

.foot{

width:100%;

height:100px;

background:black;

line-height:20px;

text-align:center;

position:fixed;

bottom:0px;

}

font-size:18px;

color:white;

float:left;

padding:50px;

}

.bottom{

margin-left: 200px;

}

</style>

</head>

<body>

</ul>

</div>

</div>

</div>

</body>

</html>

老师麻烦问一下，我导航部分的文字在<ul>标签里，然后<ul>标签也在<head>标签内部啊，但是为什么我的这个列表就上不去head黑色框内呢，正常<ul>在<head>之内，那他的内容不就应该在<head>这个大容器里面吗？

还要我看别人代码有好多地方没看懂

有好多在head标签还是ul标签里加position：absolute；这个网页布局的时候，一般遇到什么情况，或者说我要实现什么东西，才要加这个啊？

2.有在head里加清除浮动的overflow：hidden，老师我问一下，清除浮动是不是就是里面所有东西都设置浮动了，比如说这里，logo和右边导航文字，我全设置浮动了，然后head盒子还没设高度，这样才用清除浮动来保证head还有空间啊？如果head容器设置高度了，即使全浮动，是不是也不用设置清除浮动啊？

3.还有人说，设置浮动的话没法居中，要设置成display：inline-block；这种，才能实现居中，这个是什么意思啊，还有一般什么时候用到这个inline-block啊？

问题有点多，麻烦老师了

weixin_慕标4228902 2019-03-02

源自：CSS网页布局基础 2-7 编程练习

收起

3回答

好帮手慕夭夭回答被采纳获得+3积分 2019-03-05 09:35:46

你好同学 , 代码是很灵活的 , 实现方式并不是唯一的 .老师给你参考 ,可能会限制同学的思路 .不过老师看你这么爱学习 , 破例为你写一次 . 但是下次希望同学能够根据自己写的代码去修改 ,如果哪里不知道怎么做 ,也可以在问答区域提问 ,老师会帮你提供一个思路 ,这样也可以帮助同学提升自己的能力哦 .

代码参考 :

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }
    a{
        text-decoration: none;
        color: white;
    }

    .header {
        width: 100%;
        height: 100px;
        background-color: black;
        position: fixed;
        top: 0;
    }

    .nav {
        float: right;
        word-spacing: 35px;
        height: 100px;
        line-height: 100px;
    }

    .logo {
        float: left;
    }

    ul li {
        display: inline;
        margin-right: 35px;
    }

    .banner {
        width: 100%;
        margin: 100px auto;
        height: 900px;
    }

    .banner img {
        width: 100%;
        float: left;
    }

    .footer {
        width: 100%;
        height: 100px;
        line-height: 100px;
        background-color: black;
        position: fixed;
        bottom: 0;
        text-align: center;
    }
    </style>
</head>

<body>
    <div>
        <div class="header">
            <div class="logo">
                <a href="#">
                    <img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.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="banner">
            <img 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="footer">
                <ul>
                    <li><a href="#">网站首</a></li>
                    <li><a href="#">企业合作</a></li>
                    <li><a href="#">人才招聘</a>
                    <li><a href="#">联系我们</a></li>
                    <li><a href="#">常见问题</a></li>
                    <li><a href="#">友情链接</a></li>
                </ul>
            </div>
        </div>
</body>

</html>

祝学习愉快 ,望采纳 .

收起回答

weixin_慕标4228902 提问者 #1

老师ul li{display:inline}这一步，为什么要转成内联元素啊，正常块级的不行嘛？

2019-03-06 19:14:55
好帮手慕夭夭回复提问者 weixin_慕标4228902 #2

你好同学 , 可以观察一效果图 , 导航是排列在一行显示的 . 而块级元素每一个都是自占一行的 , 所以要么给li设置浮动 ,要么直接让它变为行内元素也能在一行显示 .建议同学按照老师提供的参考自己实际的去练习一下 ,只有在练习的过程中 ,才能让你更好的理解和掌握呢 ,加油 !

2019-03-07 09:34:41

好帮手慕夭夭 2019-03-04 11:07:30

你好同学 , 以下老师给你一个结构参考哦 :

希望对你有帮助 , 祝学习愉快 ,望采纳 .

收起回答

提问者 weixin_慕标4228902 #1

老师不好意思，我主要是想看一下css样式设置那一块。。

2019-03-04 18:27:21

好帮手慕夭夭 2019-03-03 14:38:37

你好同学，解答如下：

1，导航是在head里面，但是代码中给head设置了固定高度，logo图片高度正好100px ,所以导航内容超出了父容器，内容溢出了，你可以把head高度去掉，让里面的元素撑开它的高度就明白了。不过这里需要固定高度，而导航与图片在一行显示，所以需要给logo设置左浮动，nav设置右浮动。然后导航里面的li也需要设置左浮动在一行排列。

2 .因为代码实现的方式是比较多的，因为元素在正常的文档流中排列是从上往下排列。就行同学的代码中，导航正常是显示在图片下面的。想要导航显示在右边，有一些同学可能就使用定位实现，有一些会像老师第一个问题中使用浮动实现。所以什么时候使用定位，结合实际需求即可。想要使用定位去控制元素的位置，那么就去使用它。

3.关于清除浮动，同学理解的是可以的，如果给父元素里面的子元素都设置浮动，脱离文档流，那么父元素高度就塌陷了，这个时候给父元素设置overflow：hidden解决高度塌陷问题。如果父元素设置了高度，就不需要加了

4.并不是说设置浮动了就没法居中。如果说你的代码中设置居中的内容是块元素，而且要使用 text-align: center;让内容居中，那么就需要把元素设置成display：inline-block；，因为text-align: center;只能让文本内容或者行内元素或者行内块元素居中，你使用的属性不能作用在块元素上，就可以把它转换为行内块元素。当然，这只是其中一种情况，具体情况还是要具体分析的，同学如果以后遇到此类情况，可以按照老师上面讲解的进行分析。这样提升自己独立思考以及分析问题的能力。加油！

祝学习愉快，望采纳。

收起回答