我不能修复我的底部菜单以任何方式在Chrome(而在Firefox工程完美)

wswtfjt7  于 2022-12-06  发布在  Go
关注(0)|答案(1)|浏览(78)

我是HTML/CSS3的新手，所以为了加强我在在线课程中学到的技能，我试图克隆著名网站的主页。
现在，我几乎完成了www.example.com的主页flickr.com，但我犯了一个愚蠢的错误：我只在Firefox上测试了它（在智能手机、平板电脑和桌面1920* 1080 p视图上运行流畅）。然后我在Chrome上试了一下，结果......简直是灾难。我的页脚部分不起作用：

  • 在平板电脑和桌面视图中，页脚和页面底部之间有一个间隙，我无法修复;
    *但是尽管我无法独自解决问题，但我还是设法找出了问题所在：它是页脚中靠近“英语”一词的小箭头（我需要它，因为当我点击它时，语言菜单会像在原始网站中一样弹出）。我几乎可以肯定，这与我在style.css文件中分配给该箭头的“position：absolute”属性有关（但我不能删除该属性，否则它看起来会很难看）;
  • 我试着用任何我能想到的方法来处理填充和边距，但是我不能解决这个问题，我不能告诉它是只是糟糕的样式还是这个问题与我的index.html文件中糟糕的框架有关。

我不知道是否有人愿意给我的作品看一看，任何帮助都将不胜感激。

  • 谢谢-谢谢
    index.html:
<div class="header-container">
        <header>
            <a class="logo" href="#">
                <img class="flickr" src="images/flickr-logo-2435.svg" alt="#">
                <p>flickr</p>
            </a>

            <nav>
                <div class="search-box">
                    <input class="search-txt" type="text" name="search" id="searchbar"
                        placeholder="Photos, people or groups">
                    <a class="search-icon" href="#">
                        <i class="fa-solid fa-magnifying-glass"></i>
                    </a>
                </div>

                <div class="nav-button-A">
                    <a href="#">Log In</a>
                </div>

                <div class="nav-button-B">
                    <a href="#">Sign Up</a>
                </div>
            </nav>
        </header>
    </div>

    <main>
        <div class="wrapper">
            <h1>Find your inspiration.</h1>
            <h2>Join the Flickr community, home to tens of billions of photos and 2 million groups.</h2>

            <div class="start-button">
                <a href="#">Start for free</a>
            </div>
        </div>

    </main>


    <footer>
        <div class="footer-nav1">
            <div class="footer-button">About</div>
            <div class="footer-button">Jobs</div>
            <div class="footer-button">Blog</div>
            <div class="footer-button">Developers</div>
            <div class="footer-button">Guidelines</div>
            <div class="footer-button">Help</div>
            <div class="footer-button">Help forum</div>
            <div class="footer-button">English

                <img class="arrow" src="/images/pngegg.png" alt="line down">
                
                <div class="language-nav" style="display: none;">
                    <a class="language" href="#">Italiano</a>
                    <a class="language" href="#">French</a>
                    <a class="language" href="#">Espanol</a>
                    <a class="language" href="#">Deutsch</a>
                    <a class="language" href="#">日本語</a>
                    <a class="language" href="#">Portugues</a>
                    <a class="language" href="#">한국어</a>
                </div>
            </div>

        </div>

        <div class="footer-nav2">
            <div class="footer-button">Privacy</div>
            <div class="footer-button">Terms</div>
            <div class="footer-button">Cookies</div>
            <div class="footer-button">
                <p>SmugMug+Flickr.</p>
                <p>Connecting people through photography.</p>
            </div>

            <div class="social-nav">
                <a class="social-button">
                    <i class="fa-brands fa-square-facebook"></i>
                </a>
                <a class="social-button">
                    <i class="fa-brands fa-twitter"></i>
                </a>
                <a class="social-button">
                    <i class="fa-brands fa-instagram"></i>
                </a>
            </div>
        </div>
    </footer>
</body>
</html>

style.css:

html {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    animation: animate 20s ease-in-out infinite;
    background-size: cover;
    background-position: center center;
    margin: 0;
    padding: 0;
}

@keyframes animate {

    0%,
    100% {
        background-image: url(images/0.jpg);
    }

    25% {
        background-image: url(images/1.jpg);
    }

    50% {
        background-image: url(images/4.jpg);
    }

    75% {
        background-image: url(images/3.jpg);
    }
}

/* GLOBAL MOBILE */
body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
}

.header-container {
    position: fixed;
    width: 100%;
}

header {
    background-color: rgba(53, 57, 57, 0.376);
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0px 20px 0 15px;
}

.logo {
    display: flex;
    text-decoration: none;
}

.flickr {
    width: 25px;
    height: 25px;
    align-items: center;
    padding-bottom: 5px;
    box-sizing: border-box;
}

.logo p {
    font-size: 1.6rem;
    font-weight: 700;
    margin-left: 5px;
    color: white;
}

.search-box {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background: #2f364000;
    height: 34px;
    border-radius: 3px;
    padding: 0px 0px;
}

.search-txt {
    border-radius: 3px 0px 0px 3px;
    border: none;
    padding: 0;
    background: #ffffffbd;
    outline: none;
    color: #4e5052;
    font-size: 12px;
    transition: 0.1s;
    line-height: 34px;
    width: 0px;
}

.search-icon {
    color: #ffffff;
    font-size: 1.2rem;
    font-weight: 700;
    width: 34px;
    height: 34px;
    border-radius: 0px 3px 3px 0px;
    background: #2f364000;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.1s;
    text-decoration: none;
}


.search-box:hover>.search-txt {
    display: inline-block;
    width: 130px;
    padding: 0 0 0 3px;
}

.search-box:hover>.search-icon {
    font-size: 1rem;
    color: #4e5052;
    background: #ffffffbd;
}

nav {
    display: flex;
}

a {
    color: white;
    text-decoration: none;
}

.nav-button-A,
.nav-button-B {
    font-size: 1rem;
    font-weight: 500;
}

.nav-button-A {
    border: 2px solid white;
    margin-left: 10px;
    padding: 7px 10px;
}

.nav-button-B {
    /*show only in TABLET and DESKTOP mode*/
    display: none;
    margin-right: 15px;
    border: 1.5px solid white;
    background-color: white;
    border-radius: 3px;
    margin-left: 10px;
    padding: 7px 10px;
}

.nav-button-B a {
    color: #000000;
}

.nav-button-B a:hover {
    color: #8b8c8d;
}

main {
    height: 100vh;
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.wrapper {
    display: block;
    text-align: center;
    color: white;
    padding: 0 30px;
}

.wrapper h1 {
    font-size: 3.5rem;
    font-weight: 500;
    margin-bottom: 18px;
    box-sizing: border-box;
}

/*to reactivate in TABLET and DESKTOP mode*/
.wrapper h2 {
    display: none;
    font-size: 1.56rem;
    font-weight: 500;
    margin: 30px 40px 50px 40px;
    line-height: 1.9rem;
    box-sizing: border-box;
}

.wrapper a {
    font-size: 1.45rem !important;
    color: black;
    font-weight: 700;
    background-color: white;
    padding: 17px 23px;
    border-radius: 3px;
    box-sizing: border-box;
}

.start-button {
    margin-top: 40px;
}

.start-button a:hover {
    color: #8b8c8d;
}

footer {
    background-color: #000000;
    color: white;
    font-weight: 300;
    width: 100%;
    margin: 0 auto;
    padding: 0 auto;
}

.footer-nav1 {
    display: block;
    padding: 0px 10px 0px 10px;
}

.footer-nav2 {
    display: block;
    padding: 0px 10px 15px 10px;
}

.footer-button {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.734);
    text-align: left;
    padding: 20px 20px;
    font-weight: 300;
    border-bottom: 1px solid rgba(255, 255, 255, 0.257);
}

.footer-button p {
    padding: 3px 0px;
    text-align: center;

}

.footer-button:hover {
    color: white;
    font-weight: 700;
}

.language-nav {
    position: absolute;
    margin-top: -240px;
    margin-left: -5px;
    margin-bottom: 100px;
}


.language {
    display: block;
    margin-left: 10px;
    padding: 10px 20px;
    color: #000000;
    background-color: white;
}

.language:first-child {
    border-radius: 4px 4px 0 0;
}

.language:last-child {
    border-radius: 0 0 4px 4px;
}

.language:hover {
    background-color: #e6eaec;
}

.arrow {
    position: absolute;
    width: 15px;
    padding-left: 5px;
    color: white;
    display: inline-block;
}

.arrow:hover>.language-nav {
    display: block;
}

.social-nav {
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
}

.social-button {
    color: #808080;
    display: inline-block;
    padding: 10px 20px;
    box-sizing: border-box
}

.social-button:hover {
    color: white;
    font-weight: 700;
}


/* TABLET */
@media (min-width: 444px) {

    .logo {
        font-size: 2rem;
    }

    .search-box:hover>.search-txt {
        width: 420px;
        padding-left: 10px;
    }

    .nav-button-B {
        display: inline-block;
        padding: 7px 20px;
    }

    .nav-button-A {
        border: none;
        padding: 7px 15px 7px 5px;
    }

    main {
        height: calc(100vh - 110px);
        width: 100%;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .wrapper {
        padding: 0 40px;
        box-sizing: border-box;
    }

    .wrapper h2 {
        display: block;
    }

    .start-button {
        margin-top: 70px;
    }

    .wrapper a {
        font-size: 1.35rem;
        font-weight: 700;
        background-color: white;
        padding: 18px 30px;
        border-radius: 3px;
    }

    .footer {
        margin: 0 auto;
        padding: 0 auto;
    }

    .footer-nav1 {
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid rgba(255, 255, 255, 0.257);
    }

    .footer-nav2 {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        padding: 0px 10px 0px 10px;
    }

    .footer-button {
        font-size: 0.85rem;
        border-bottom: none;
    }

    .footer-nav2>.footer-button {
        border-bottom: none;
        padding: 20px 15px;
    }

    .footer-button p {
        display: inline;
    }

    .language-nav {
        position: absolute;
        display: inline;
        margin-top: -265px;
        margin-left: -45px;
        margin-bottom: 100px;
    }
}



/* DESKTOP 1920x1080p */
@media (min-width: 1080px) {

    nav {
        width: 95%;
    }

    .search-box {
        justify-content: center;
        width: 85%;
        margin-right: auto;
        margin-left: auto;
    }

    .search-txt {
        border-radius: 3px 0px 0px 3px;
        border: none;
        padding-left: 15px;
        background: #ffffffbd;
        outline: none;
        color: #4e5052;
        font-size: 12px;
        transition: 0.1s;
        line-height: 34px;
        width: 1400px;
    }

    .search-icon {
        display: none;
    }

    .search-box:hover>.search-txt {
        display: inline-block;
        width: 1400px;
        padding-left: 15px;
    }

    main {
        /* background-color: beige; */
        height: calc(100vh - 60px);
        width: 100%;
        margin: 0 auto;
    }

    .wrapper {
        padding: 0 600px;
        box-sizing: border-box;
    }

    .wrapper h2 {
        line-height: 2.1rem;
    }

    footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 60px;
        margin: 0 auto;
        padding: 0 auto;
    }

    .footer-nav1 {
        display: flex;
        justify-content: space-between;
        flex-grow: 2;
        border-bottom: none;
    }

    

    .footer-nav2 {
        display: flex;
        justify-content: space-between;
        flex-grow: 1;
        align-items: center;
        padding: 0 auto;
        margin-left: 25px;
        box-sizing: border-box;
    }

    .footer-nav2>.footer-button p:last-of-type {
        display: none;
    }


    .footer-button {
        padding: 5px 10px;
        box-sizing: border-box;
    }

    .social-nav {
        display: flex;
        justify-content: space-between;
        flex-grow: 1;
        padding-left: 10px;
        padding-right: 10px;
        box-sizing: border-box;
    }

    .social-button {
        font-size: 1.5rem;
        color: #808080;
        padding: 0 auto;
        box-sizing: border-box;
    }

    .footer-nav2>.footer-button {
        border-bottom: none;
        padding: 20px 37px;
        box-sizing: border-box;
    }

    .social-nav {
        text-align: center;
        max-width: 300px;
        padding-top: 10px;
        padding-bottom: 10px;
        box-sizing: border-box;
    }

    .social-button {
        color: #808080;
        display: inline-block;
        padding: 10px 20px;
        box-sizing: border-box;
    }

}

jquery-nav.js:

$(document).ready(function(){
    $('.arrow').on('click', function(){
        $('.language-nav').toggle();
    })
});
google-chrome

1条答案

按热度按时间
xlpyo6sf

xlpyo6sf1#

你完全正确！是那个英语单词引起了问题...嗯，不是真正的英语单词，是它周围的div。
您必须关闭该div，如下所示：

<div class="footer-button">English

对此：

<div class="footer-button">English</div>
赞(0）分享  回复(0）举报  2022-12-06
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com