社交媒体按钮在使用默认模板的页面上“不可见”。？

Question

你好，我是CSS和html的新手，如果这是SUPER basic，那么对不起，但是我已经尝试过tinkernet中的一些东西，但找不到能起作用的东西（它可能是一个简单的解决方案，而我却把它弄复杂了）]

基本上，我希望页面（Resp）顶部和底部的导航栏和社交媒体按钮显示在'about'和'cv'页面上，这两个页面均使用默认布局。他们看起来好像在使用CSS，但是唯一不起作用的社交媒体按钮。它们是“有”可点击链接，但不可见..有任何想法吗？

css：

.xx-socialmedia-buttons .fa {
    font-size: 2.25rem;
    align-content: center;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    border-radius: 50%;
    padding: 0px 15px;
    font-weight: 400;
    color: #fff;
}

.fa-facebook {
    width: 11px;
    height: 13px;
}

.fa:hover {
    opacity: 0.3;
}

nav ul, footer ul {
    font-family:'Helvetica', 'Arial', 'Sans-Serif';
    padding: 0px;
    list-style: none;
    font-weight: bold;
}

nav ul li, footer ul li {
    display: inline;
    margin-right: 0px;
}
    *FOOTER*/
    .xx-main-footer {
        background-color: rgb(161, 216, 238);
        align-content: center;
        align-items: center;
        text-align: center;
        justify-content: center;
        margin: 0 auto;
    }

    .xx-main-footer ul {
        margin: 0px auto;
        padding: 1rem 1rem 1rem 1rem;
    }

    .xx-main-footer .xx-socialmedia-buttons .fa {
        color: rgb(79, 41, 88);
        padding: 0px 30px;
    }

    .xx-main-footer .xx-socialmedia-buttons a { 
        opacity: 0.6;
        color: rgb(79, 41, 88);
        cursor: pointer;
        text-decoration: none;
        justify-self: center;
        padding: 0px 30px;
    }

    .xx-main-footer .xx-socialmedia-buttons .fa:hover,
    .xx-main-footer .xx-socialmedia-buttons a:hover {
        opacity: 0.3;
    } 

html：

<footer class="xx-main-footer">
    <div class="xx-socialmedia-buttons">
        <ul>
            <li><a href="xxx">email me</a></li>
            <!-- <li><a href="xxx">github.com/xx</a></li> -->
            <li><a href="xxx" target="_blank" class="fa fa-github"></a></li>
            <li><a href="xxx"rel="noopener noreferrer" target="_blank" class="fa fa-linkedin"></a></li>
            <li><a href="xxx"rel="noopener noreferrer" target="_blank" class="fa fa-facebook"></a></li>
            <li><a href="https://www.instagram.com/xxx"rel="noopener noreferrer" target="_blank" class="fa fa-instagram"></a></li>
            <li><a href="https://xxx"rel="noopener noreferrer" target="_blank" class="fa fa-youtube"></a></li>
            <li><a href="https://xxx"rel="noopener noreferrer" target="_blank" class="fa fa-pinterest"></a></li>
        </ul>
    </div>
</footer>

我用x替换了我的命名约定和链接，所以希望不要混淆...

我只是想知道，是否有一种特殊的方法可以使它显示在每个页面上，因为我认为我做得不正确...

Answer 1

您的注释FOOTER，应该包裹起来以打开和关闭注释/*FOOTER*/，如果它在您的实时代码中，则*FOOTER*/之后的每个规则都将不起作用