Question

我在我的主页上使用了这个页脚并且工作正常，但将其复制并粘贴到另一个网页上完全破坏了它的所有样式，这很奇怪，因为标题（我也从同一页面复制）是完全没有变化。有什么想法吗？这里是所有代码的小提琴：

好吧，所以我只是将它放入小提琴中并且工作正常，但是当我通过Sublime Text在Chrome中打开它时它仍然无法正常工作。

以下是所有代码：

HTML

<body>
    <div class="header">
        <div class="navbar">
            <a href="index.html"><p class="navwords nonactive">Home</p></a>
            <a href="ourteam.html"><p class="navwords active">Our Team</p></a>
            <a href="weddings.html"><p class="navwords nonactive">Weddings</p></a>
            <a href="events.html"><p class="navwords nonactive">Events</p></a>
            <a href="contact.html"><p class="navwords nonactive">Contact</p></a>
        </div>
        <div class="headerlogo">
            <a src="#"><img id="background" src="assets/BlurryFlowers.png"></a>
            <a href="index.html"><img id="logo" src="assets/Logo.png"></a>
        </div>
    </div>

    <div class="ourteam">
        <div class="employee" id="brax">
            <h2>Brax</h2>
            <img src="assets/Braxpic.png">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae arcu quis risus elementum auctor in eu erat. Nullam sodales pulvinar eros, semper euismod elit pretium sit amet. Vestibulum vestibulum libero id ipsum viverra, condimentum vulputate urna volutpat. In lobortis sit amet risus id vehicula. Praesent in risus at urna mollis eleifend vel et arcu. Quisque urna leo, porta non turpis sit amet, gravida sagittis erat. Curabitur eu convallis purus. Vestibulum feugiat purus ac urna aliquet rutrum.</p>
        </div>
        <div class="employee" id="ryan">
            <h2>Ryan</h2>
            <img src="assets/Ryanpic.png">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae arcu quis risus elementum auctor in eu erat. Nullam sodales pulvinar eros, semper euismod elit pretium sit amet. Vestibulum vestibulum libero id ipsum viverra, condimentum vulputate urna volutpat. In lobortis sit amet risus id vehicula. Praesent in risus at urna mollis eleifend vel et arcu. Quisque urna leo, porta non turpis sit amet, gravida sagittis erat. Curabitur eu convallis purus. Vestibulum feugiat purus ac urna aliquet rutrum.</p>
        </div>
    </div>

    <div class="footer">
        <div class="favicon">
            <a href="index.html"><img id="favicon" src="assets/favicon.png"></a>
        </div>
        <div class="footernav">
            <a href="index.html"><p>Home</p></a>
            <a href="ourteam.html"><p>Our Team</p></a>
            <a href="weddings.html"><p>Weddings</p></a>
            <a href="events.html"><p>Events</p></a>
            <a href="contact.html"><p>Contact</p></a>
        </div>
        <div class="socialmedia">
            <a href="https://www.facebook.com/yourstorybookmemory/"><img class="social" src="assets/facebook.png"></a>
            <a class="socialText" href="https://www.facebook.com/yourstorybookmemory/"><p>Storybook Memories</p></a><br/>
            <a href="https://www.instagram.com/yourstorybookmemory/"><img class="social" src="assets/instagram.png"></a>
            <a class="socialText" href="https://www.instagram.com/yourstorybookmemory/"><p>yourstorybookmemory</p></a><br/>
            <a href="https://twitter.com/sbvideography"><img class="social" src="assets/twitter.png"></a>
            <a class="socialText" href="https://twitter.com/sbvideography"><p>@sbvideography</p></a><br/>
            <a href="https://www.youtube.com/channel/UCcMVbKyDIJN0Ht-6VjDiFKA"><img class="social" src="assets/youtube.png"></a>
            <a class="socialText" href="https://www.youtube.com/channel/UCcMVbKyDIJN0Ht-6VjDiFKA"><p>Storybook Memories</p></a><br/>
            <a href="mailto:inquiries@yourstorybookmemory.com"><img class="social" src="assets/mail.png"></a>
            <a class="socialText" href="mailto:inquiries@yourstorybookmemory.com"><p>inquiries@yourstorybookmemory.com</p></a><br/>
        </div>
    </div>
</body>

CSS

/* PAGE SETUP */

*{
    font-weight: 100;
}

body {
    font-family: 'Lato', 'sans-serif';
    width: 100%;
    margin: 0px;
}

/* HEADER FOR ALL PAGES */

.header {
    width: 100%;
}

.headerlogo {
    top: 0;
    left: 0;
    position: relative;
}

#background {
    width: 100%;
    z-index: 2;
}

#logo {
    z-index: 1;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.navbar {
    width: 100%;
    background-color: rgba(96,150,38,0.4);
    text-align: right;
    position: absolute;
    height: 55px;
    top: 0;
    left: 0;
    z-index: 3;
}

.nonactive {
    color: white;
}

.active {
    color: black;
    cursor: ;
}

.navwords {
    display: inline-block;
    margin: 15px;
    vertical-align: middle;
    font-size: 1em;
    transition: .3s color;
    font-weight: 300;
    cursor: pointer;
}

.navwords:hover {
    color: black;
}

/* OUR TEAM SECION */



/* FOOTER SECTION */

.footer {
    background-color: #5c0e13;
    color: white;
    display: inline-block;
    width: 100%;
}

.favicon, .footernav, .socialmedia {
    float: left;
}

.favicon {
    margin-left: 1%;
    margin-top: 1%;
    margin-right: 1%;
}

.footernav a {
    text-decoration: none;
    color: white;
    transition: .3s color;
}

.footernav a:hover {
    color: #db1421;
}

.socialmedia {
    margin-left: 50%;
    position: relative;
    transform: translateY(10%);
}

.socialmedia p {
    margin: 6px;
    padding: 0;
}

.social {
    width: 20px;
    margin-right: 10px;
    vertical-align: middle;
}

.socialmedia a {
    text-decoration: none;
    color: white;
    transition: .3s color;
    vertical-align: middle;
}

.socialmedia a:hover {
    color: #db1421;
}

.socialText{
    display:inline-block;
}

编辑：以下是它现在正在做的事情的截图：

这里有一个小例子，它有一个工作的例子（有点，那个栗色的背景意味着它正在工作，因为这不适用于截图）。

https://jsfiddle.net/f26w8boe/

CSS不是底部Div但是排在前一位

0 个答案: