请问如何让页脚内容在垂直方向居中显示

来源：2-10 编程练习

慕莱坞1035141

2020-02-14 20:05:11

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    *{
        font-family:"微软雅黑";
        padding:0;
        margin:0;
    }
    ul{
        list-style:none;
    }
    a{
        text-decoration:none;
    }
    a:link{color:white;}
    a:visited{color:white;}
    a:hover{color:orange;font-size:30px;}
    .header{
        background:black;
        height:120px;
        overflow:hidden;
        zoom:1;
    }
    .header img{
        float:left;
        height:120px;
        cursor:pointer;
    }
    .header ul{
        width:40%;
        float:right;
        line-height:120px;
        font-size:25px;
    }
    .header ul li{
        float:left;
        margin:0 40px;
    }
    .footer{
        background:black;
        overflow:hidden;
        zoom:1;
        height:100px;
    }
    .footer ul{
        width:70%;
        line-height:100px;
        margin:0 auto;
    }
    .footer ul li{
        text-align:center;
        float:left;
        margin:0 30px;
    }
    .main{
        background:#add8e6;
        line-height:30px;
        height:300px;
    }
    
    .left{
        width:50%;
        height:300px;
        float:left;
    }
    .content1{
        margin-left:400px;
        padding-top:50px;
    }
    .right{
        height:300px;
        width:50%;
        float:right;
    }
    .content2{
        margin-left:200px;
        padding-top:50px;
    }
  </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png"/>
            <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 class="main">
            <div class="left">
                <div class="content1">
                    <h2>课程推荐</h2>
                    <ul>
                        <li>HTML5</li>
                        <li>HTML5</li>
                        <li>HTML5</li>
                        <li>HTML5</li>
                        <li>HTML5</li>
                    </ul>
                </div>
            </div>
            <div class="right">
                <div class="content2">
                    <h2>相关课程</h2>
                    <p>HTML CSS JavaScript</p>
                    <p>HTML CSS JavaScript</p>
                    <p>HTML CSS JavaScript</p>
                    <p>HTML CSS JavaScript</p>
                </div>
            </div>
        </div>
        <div class="footer">
            <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>
    </div>
</body>
</html>

还有为什么main定义的文字颜色不起作用？

    *{
        font-family:"微软雅黑";
        padding:0;
        margin:0;
        color:white;
    }
    .main{
        color:black;
    }

谢谢老师

写回答

1回答

好帮手慕星星

2020-02-15

已采纳

同学你好，代码中问题如下：

1、顶部右侧导航换行显示了

自己测试可能不是这种效果。由于每个显示器的分辨率不同，40%代表的宽度也会不同。所以建议设置为固定宽度，如下

2、页脚导航在垂直方向上居中显示了，但是水平方向上没有居中。可以将浮动改为行内元素，父容器中设置居中显示。如下

3、权重的问题。main设置字体颜色为黑色，但是main中（直接元素）是没有文字的，文字在h2，li和p标签中，继承main的字体颜色，权重低于*设置的颜色，所以显示还是白色的。

如果我的回答帮到了你，欢迎采纳，祝学习愉快~

0 学习 · 40143 问题

查看课程

相似问题

如何让页脚的字在页面居中显示？

回答 1

2-10请检查

回答 2

页脚宽度没撑开图片直接有行距设置固定定位之后页脚内容就不见了

回答 2

页脚有空隙怎么消除，在网页调整大小的时候，如何做到自适应

回答 2

页脚怎么垂直居中

回答 2

打开慕课网App查看更多内容