我怎样才能阻止我的导航溢出到我的股利

时间：2019-10-31 00:45:25

标签： html css responsive-design media-queries

我正在学习前端Web开发，并且始终坚持如何使我的网站具有响应能力。我目前正在尝试阻止导航重叠到下一个div容器。我该怎么做，如果您对如何使我的网站具有响应能力有其他建议，将非常感谢。

我是否正确使用媒体查询？我现在知道我应该使用移动优先方法，但是起初我只是复制在网上看到的模型，所以我不得不反过来做。

我的代码在Codepen上，这里：https://codepen.io/wmufunde/pen/vYYWOBy 

<html>
<head>
    <title>Best Bakery Company</title>

    <link href="https://fonts.googleapis.com/css?family=Jomolhari|Tangerine|Work+Sans&display=swap" rel="stylesheet">

</head>

<header>
    <nav>
        <ul>
            <li id="logo-top"><a href="#">Best Bakery Company</a></li>
            <li class= "nav"><a href="#">WELCOME</a></li>
            <li class= "nav"><a href="#">MENU</a></li>
            <li class= "nav"><a href="#">RESERVATIONS</a></li>
            <li class= "nav"><a href="#">NEWS</a></li>
            <li class= "nav"><a href="#">CONTACT</a></li>
            <li class= "nav"><i class="fab fa-twitter"></i></li>
            <li class= "nav"><i class="fab fa-facebook-f"></i></li>
            <li><i class="fab fa-instagram"></i></li>
        </ul>
    </nav>

    <div id="headings">
        <h1>Pastry with love</h1>
        <h2>We're bringing you fresh ingredients<br> everyday in ways you can't resist.</h2>
        <button class="btn">Menu</button>
    </div>
</header>

<body>

    <div class="row" id="background1">
        <div class="column">
            <h1>Art of cakes</h1>
            <h2>We create delicious memories</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Adipiscing elit pellentesque habitant morbi. Mauris augue neque gravida in fermentum et sollicitudin ac.</p>
            <h3>Chef cook</h3>
            <div = id="chef"><img src="img/chef.jpg" align="middle"></div>
            <p id="cursive">Unique creatives for unique reasons</p>

        </div>

        <div class="column" id="relative">
            <div class ="row-pastry" id="padding">
                <img src="http://wadzanai.co.uk/100daysofcode/Day7/img/pastry1.jpg">
                <img src="http://wadzanai.co.uk/100daysofcode/Day7/img/pastry2.jpg">
            </div>
            <div class="row-pastry">
                <img src="http://wadzanai.co.uk/100daysofcode/Day7/img/pastry3.jpg">
                <img src="http://wadzanai.co.uk/100daysofcode/Day7/img/pastry4.jpg">
            </div>
            <div id="icon"><p>TASTES SO <br>GOOD!</p></div>
        </div>

    </div>

    <div class="row" id="background2">

        <div class="column center"id="white">

            <h1>Tasty Pancakes</h1>
            <h2>Season Favourites</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Adipiscing elit pellentesque habitant morbi. Mauris augue neque gravida in fermentum et sollicitudin ac.</p>
            <div class="image-circle">
                <img src="http://wadzanai.co.uk/100daysofcode/Day7/img/blueberry.jpg">
                <img src="http://wadzanai.co.uk/100daysofcode/Day7/img/pancake.jpg">
                <img src="http://wadzanai.co.uk/100daysofcode/Day7/img/pancake2.jpg">
            </div>
        </div>
    </div>

    <div class="row" id="background3">
        <div class="column breakfast">
            <h1>Breakfast</h1>
            <p>7AM Breakfast? We're Open!</p>

            <h2>Full Breakfast</h2>
            <p>Lorem ipsum dolor sit amet</p>
            <h3>£12.50</h3>

            <h2>Toast and Jam</h2>
            <p>Lorem ipsum dolor sit amet</p>
            <h3>3.50</h3>

            <h2>Muffins</h2>
            <p>Lorem ipsum dolor sit amet</p>
            <h3>£4.99</h3>
        </div>
    </div>

    <div class="row" id="background4">

        <div class="column meal">
            <img src="http://wadzanai.co.uk/100daysofcode/Day7/img/page4/wheat.jpg">
            <h1>Wheat</h1>
            <img src="http://wadzanai.co.uk/100daysofcode/Day7/img/page4/eggs.jpg">
            <h1>Eggs</h1>
            <img src="http://wadzanai.co.uk/100daysofcode/Day7/img/page4/cheese.jpg">
            <h1>Cheese</h1>
        </div>

        <div class="column sandwich">
            <h1>The Jibarito Sandwich</h1>
            <h2>The Best Sandwich you've Ever Tasted!</h2>
            <img src="http://wadzanai.co.uk/100daysofcode/Day7/img/page4/sandwich.jpg">
        </div>
    </div>
<script src="https://kit.fontawesome.com/5b02610863.js" crossorigin="anonymous"></script>
</body>

<footer>
    <ul>
        <li><a href ="#">Our Menu</a></li>
        <li><a href ="#">Gallery</a></li>
        <li><a href ="#">Culture</a></li>
        <li id="logo-footer"><a href ="#">Best Bakery Company</a></li>
        <li><a href ="#">Events</a></li>
        <li><a href ="#">Catering</a></li>
        <li><a href ="#">Visit Us</a></li>
    </ul>
</footer>


    /* ==========================================
                                            Page 1 & Navigation
============================================ */
header {
    background-image: url("http://wadzanai.co.uk/100daysofcode/Day7/img/header.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    width: 100%;
}


nav {
    position: fixed;
    top: -20px;
    z-index: 1500;
    width: 100%;
    /* display: block; */

}

nav ul {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: wrap;
    background: rgba(0,0,0, 0.5);
    height: 50px;
}

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

 nav ul li  {
    list-style: none;
    color: white;
    padding-top: 1%;
    font-family: 'Work Sans', sans-serif;
}

#logo-top {
    font-family: 'Tangerine', cursive;
    font-size: 45px;
    padding-top: 0;
    flex-grow: 5;
}

nav ul li {
    flex-grow: 1;
}

header h1 {
    font-family: 'Jomolhari', serif;
    color: white;
    font-size: 50px;
    letter-spacing: 5px;
}

header h2 {
    font-family: 'Work Sans', sans-serif;
    font-size: 20px;
    color: white;
    letter-spacing: 5px;
}
#headings {
    display: flex;
    min-height: 80vh;
    width: 100%;
    flex-direction: column;
}

#headings h1,h2, .btn {
    margin: auto;
}

.btn {
    padding: 20px 80px;
    background: rgba(0,0,0, 0.5);
    border-radius: 50px;
    border-color: black;
    color:white;
}

.row {
    display: flex;
    justify-content: flex-start;
    position: relative;
    height: 100vh;
}

/* ==========================================
                                            Page2
============================================ */
#background1 {
    background-color: beige;
}

.column{
    width:50vw;

}

.column h1, h2 {
        font-family: 'Jomolhari', serif;
}

.column h1, h2, h3, p, #chef img {
    text-align: center;
}
.column h1 {
    font-size: 50px;
    color: #330000;

}

.column h2 {
    font-size: 25px;
    color: saddlebrown;

}

.column p {
    font-family: 'Work Sans', sans-serif;

}

#cursive{
    font-family: 'Tangerine', cursive;
    font-size:50px;
}
#chef img{
    border-radius: 50%;
    width: 15vw;
    height: 20vh;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.row-pastry img {
    height: 25vh;
    width: 150%;

}

.row-pastry {
    width: 25%;
    display: flex;
    padding-left: 5vw;
}

#padding {
    padding-top: 15vh;
}

#icon{
    width: 50%;
    position: absolute;
  top: 27%;
  right: 26.5%;
    background-color: white;
    height: 200px;
    display: flex;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);


}

#icon p{
    padding-top: 20%;
    padding-left: 35%;
}

#relative {
    position: relative;
}

/* ==========================================
                                        Page 3
============================================ */
#background2 {
     background-image: url(http://wadzanai.co.uk/100daysofcode/Day7/img/background2.jpg);
    background-repeat: no-repeat;
    background-size: cover;

}

.center {
    margin: auto;
}

#white {
background: white;
    height:60%;
    width:50vw;
    margin: auto;
    padding: 2%;

}

.image-circle { 
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    min-height: 50vh;
}
.image-circle img {
    height: 10vh;
    width: 5vw;
    border-radius: 50%;
}

/* ==========================================
        Page 4 - Breakfast Menu
============================================ */

#background3 {
     background-image: url(http://wadzanai.co.uk/100daysofcode/Day7/img/background3.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    min-width: 50vw;
}

.breakfast {
    background:rgba(255, 255, 255, 0.75);
    margin:auto;
    width: 25vw;
    height: 100vh;
}

/* ==========================================
        Page 5 - Sandwich
============================================ */

#background4 {
    background: beige;
    padding: 2%;
}
.meal {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 50vw;

}
.meal img {
    width: 10vw;
    border-radius: 50%;
    margin: auto;
}

.meal h1 {
    font-size: 25px;
    text-align: left;
    margin: auto;
}

.sandwich img {
    width: 33vw;

}

/* ==========================================
                                            Footer
============================================ */

footer {
 background-color: saddlebrown;
}
footer ul li {
    list-style: none;
    color:black;
    font-size: 25px;
    font-family: 'Work Sans', sans-serif;
    flex-grow: 1;
}

footer ul {
    display: flex;
    justify-content: space-between;
    align-items: center;

}

#logo-footer {
    font-family: 'Tangerine', cursive;
    font-size: 45px;
    flex-grow: 2;
}

/* ==========================================
                                            Transitions and Transforms
============================================ */

li a:hover {
    color: yellow;
}

 .btn {
    transition-duration: 2s;
    transition-property: scale;
}

.fab {
    transition-duration: 0.5s;
    transition-property: scale;
}

.fab:hover, .btn:hover {
    transform: scale(1.2);
}

/* Page 2 */

.image-circle img {
    transition-duration: 1s;
    transition-property: transform;
}

.image-circle img:hover {
    transform: rotate(30deg);
}

/* ==========================================
                                            Page 1 & Navigation Media Queries
============================================ */

@media screen and (max-width: 850px) {

    nav ul {
    display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        height: 250px;
        text-align: center;
        }

    footer ul {
        flex-direction: column;
        flex-wrap: nowrap
        }

    .breakfast {
        width: 50vw;
        }

    .center h1 {
        font-size: 30px;
        }

    .center h2 {
        font-size: 20px;
        }

    .center p {
        font-size: 15px;
    }
    }

@media screen and (max-width: 625px) {
    .sandwich h1 {
        font-size: 30px;
    }

    .sandwich h2 {
        font-size: 20px;
    }
}

@media screen and (max-width: 600px) {

    .row-pastry {
        flex-direction: column;

    }

    .row-pastry img {

    height: auto;
    }

    #icon {
        display: none;
    }
}

0 个答案:

没有答案
相关问题
最新问题