麻烦老师帮我看看还有哪里可以修正的!!!

来源：2-7 编程练习

谨年sure

2020-03-03 17:58:38

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{margin: 0px;padding: 0px;}
        .header_nav{
            width: 100%;
            height: 100px;
            background: black;
            position: fixed;
            overflow: hidden;
        }
        
        /* 头部导航的样式 */
        .header_nav_container{
            position: relative;
            right: 0px;
            top: -100px;
        }
        .header_nav_logo img{
            display: block;
        }
        .header_nav_container ul{
            list-style: none;
            color: white;
            font-size: 1.6em;
            line-height: 100px;
            position: absolute;
            right: 0px;
            text-align: center;
        }
        .header_nav_container ul li{
            float: left;
            margin-right:80px ;
        }
        .header_nav_container ul a{
            color: white;
            text-decoration: none;
        }
        /* 内容样式 */
        .main{
            padding-top: 100px;
            padding-bottom:70px;
        }
        .main img{
            width: 100%;
            display: block;
        }


        /* 网页脚部 */
        .foot{
            width: 100%;
            background: black;
            height: 70px;
            position: fixed;
            bottom: 0px;
        }
        .foot ul{
            width: 80%;
            list-style:none;
            text-align: center;
            margin: 0px auto;
        }
        .foot ul a{
            color: white;
            text-decoration: none;
            font-size: 1.6em;
            line-height: 70px;
            float: left;
            padding: 0px 30px;
        }
    </style>
</head>
<body>
    <!-- 头部导航 -->
    <div class="header_nav">
        <div class="header_nav_logo">
        <!-- logo图片 -->
            <img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png" alt="">
        </div>
        <!-- 导航内容 -->
        <div class="header_nav_container">
            <ul>
                <a href="#"><li>课程</li></a>
                <a href="#"><li>职业路径</li></a>
                <a href="#"><li>实战</li></a>
                <a href="#"><li>猿问</li></a>
                <a href="#"><li>手记</li></a>
            </ul>
        </div>
    </div>
    <!-- 页面主体 -->
    <div class="main">
        <img src="http://climg.mukewang.com/58c0eda50001e12416000480.jpg" alt="">
        <img src="http://climg.mukewang.com/58c0edb80001c9f216000480.jpg" alt="">
        <img src="http://climg.mukewang.com/58c0edc9000100d516000480.jpg" alt="">
    </div>

    <div class="foot">
        <ul>
            <a href="#"><li>网站首页</li></a>
            <a href="#"><li>企业合作</li></a>
            <a href="#"><li>人才招聘</li></a>
            <a href="#"><li>联系我们</li></a>
            <a href="#"><li>常见问题</li></a>
            <a href="#"><li>友情链接</li></a>
        </ul>
    </div>
</body>
</html>

写回答

1回答

好帮手慕慕子

2020-03-03

已采纳

同学你好，对于代码中存在的问题解答如下：

如下所示，使用li包裹a标签，让代码更加规范
顶部通过定位实现效果是可以的，老师这里提供另一种实现思路。如下：通过浮动让元素在一排显示。
如下所示，页脚内容没有水平居中显示。
建议：调整为li包裹a标签。
去掉a标签的浮动属性，给li设置display属性为line-block，让其在一排显示，结合ul的text-align属性让内容水平居中显示。