css (Media Queries)我在使用media queries/flex时做错了什么？

我正在创建一个主页，但我的div部分没有调整或缩小网页，因为我缩小它，他们只是停留在原地，并保持相同的大小。我做错了什么？
我只能在屏幕尺寸达到768 px时调整导航栏。
HTML

<!doctype html>
<html lang="en">
<head>
        <meta charset="utf-8" >
        <title>Betta Emporium</title>
        <link rel="stylesheet" type="text/css" href="bettastyles.css">
</head>
<body>
    <header>
        <div id="header1">
            <img src="cover1.jpg" alt="header" >
        </div>
    </header>
    <div id="navigation">
        <div id="navi">
            <nav>
                <ul>
                    <li><a href="#">HOME</a></li> 
                    <li><a href="#">PRODUCT</a></li>
                    <li><a href="#">CONTACT</a></li>
                    <li><a href="#">F.A.Q</a></li>
                </ul>
            </nav>
        </div>
        <div id="headsearch">
            <input id="search" name="search" type="text"><button id="searchbut">Search</button>
        </div>
    </div>
    <section>
        <div id="container1">
            <div id="intro">
                <h1>Welcome to Betta Emporium!</h1>
                <p>With 10+ years of experience in the industry we aim to provide quality Bettas and Plants throughout Canada!
                <br>
                <br>
                Make your first purchase today and receive a coupon of 15% off your next purchase!
                <br>
                <br>
                Free shipping for orders $150+ (before taxes)</p>
            </div>
        </div>
        <div id="container2">
            <div id="content1">
                <img src="male.jpg" alt="male">
            </div>
            <div id="content2">
                <h1>Variety of Males Available!</h1>
            
        
            </div>
        </div>
        <div id="container3">
            <div id="content3">
                <img src="female.jpg" alt="female">
            </div>
            <div id="content4">
                <h1>Check out our Selection of Females!</h1>
                <p>So many to choose from, you'll want more than one!</p>
                <br>
                <button id="femaleshop">Shop Now!</button>
            </div>
        </div>
        <div id="container4">
            <div id="content5">
                <img src="java-fern-594933.png" alt="java-fern">
            </div>
            <div id="content6">
                <h1>Plants!</h1>
                <p>Plants for beginners to those with green thumbs, see what we have in store for you!</p>
                <br>
                <button id="plantshop">Shop Now!</button>
            </div>
        </div>
    </section>
    <footer>
        <div id="footerlinks">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Product</a></li>
                <li><a href="#">Contact</a></li>
                <li><a href="#">F.A.Q</a></li>
            </ul>
        </div>
        <div id="footer1">
            <p>Copyright © 2023 Betta Emporium
            <br>
             </p>
        </div>
    </footer>
</body>
</html>

---

CSS

---

    html{
        background-color: #00;
    }

    body{
        background-color: #000;
        position: relative;
        top: 0px;
        left: 150px;
        width: 1600px;
        padding: 5px;
        border: 2px solid #000;
        border-radius: 5px;
    }

    header #header1{
        position: relative;
        top: 0px;
        height:500px;
        width: 1700;
        overflow: hidden;
    }
    
        #header1 > img{
            position: absolute;
            top: -50px;
            left: 300px;
            width: 900px;
        }

    nav ul{
        list-style: none;
        padding: 0px;
    }

        nav ul li{
            padding: 10px;
            border: none;
        }

        nav ul li a{
            color: #F9C001;
            text-decoration: none;
            font-size: 1.3em;
        }

        nav ul li:hover, nav ul li:focus{
            text-decoration: underline;
        }

        #headsearch {
            position: relative;
            top: 17px;
            left: 465px;
            width: 500px;
        }

        #search{
            width: 200px;
            height: 30px;
            font-size: 18px;
        }
    
        #searchbut {
            position: relative;
            top: -3px;
            left: 5px;
            width: 100px;
            height: 37px;
            box-shadow:inset 0px 1px 0px 0px #fff6af;
            background:linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
            background-color:#ffec64;
            border-radius:6px;
            border:1px solid #ffaa22;
            display:inline-block;
            cursor:pointer;
            color:#333333;
            font-family:Arial;
            font-size:15px;
            font-weight:bold;
            padding:6px 24px;
            text-decoration:none;
            text-shadow:0px 1px 0px #ffee66;
    }

            #searchbut:hover {
                background:linear-gradient(to bottom, #ffab23 5%, #ffec64 100%);
            background-color:#ffab23;
            }

            #searchbut:active {
            position:relative;
            top:1px;
            }

    #container1{
        display: flex;
        justify-content: space-between;
    }
        #intro{
            text-align: center;
                flex-basis: 100%;
        }

        #intro > h1{
            font-size: 80px;
            text-decoration: underline;
            color: #F9C001;
        }

        #intro > p{
            font-size: 30px;
        }

    h1{
        color: #F9C001;
        font-size: 40px;
    }

    p{
        color: #FFF;
        font-size: 20px;
    }

    #container2{
        display: flex;
    }

        #content1{
            position: relative;
            top: 0px;
            left: 100px;
            width: 800px;
            height: 580px;
            flex: 1;
            order: 1;
        }

        #content1 > img{
                width: 798px;
        }

        #content2{
            position: relative;
            top: 200px;
            left: 0px;
            width: 600px;
            height: 200px;
            text-align: center;
            flex: 1;
            order: 2;
        }
            
            #maleshop{
                position: relative;
                top: 10px;
                box-shadow:inset 0px 1px 0px 0px #fff6af;
                background:linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
                background-color:#ffec64;
                border-radius:6px;
                border:1px solid #ffaa22;
                display:inline-block;
                cursor:pointer;
                color:#333333;
                font-family:Arial;
                font-size:15px;
                font-weight:bold;
                padding:6px 24px;
                text-decoration:none;
                text-shadow:0px 1px 0px #ffee66;
            }

            #maleshop:hover {
                background:linear-gradient(to bottom, #ffab23 5%, #ffec64 100%);
                background-color:#ffab23;
            }

            #maleshop:active {
                position:relative;
                top:1px;
            }

    #container3{
        display: flex;
    }

        #content3{
        /*      position: relative;
            top: -222px;
            left: 750px;*/
            /*width: 800px;
            height: 533px;*/
            flex: 1;
            order: 2;
        }

        #content3 > img{
            width: 798px;
        }

        #content4{
            position: relative;
            top: 150px;
            left: 50px;
            width: 600px;
            height: 200px;
            text-align: center;
            flex: 1;
            order: 1;
        }

            #femaleshop {
                box-shadow:inset 0px 1px 0px 0px #fff6af;
                    background:linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
                background-color:#ffec64;
                border-radius:6px;
                border:1px solid #ffaa22;
                display:inline-block;
                cursor:pointer;
                color:#333333;
                font-family:Arial;
                font-size:15px;
                font-weight:bold;
                padding:6px 24px;
                text-decoration:none;
                text-shadow:0px 1px 0px #ffee66;
            }
            #femaleshop:hover {
                background:linear-gradient(to bottom, #ffab23 5%, #ffec64 100%);
                background-color:#ffab23;
            }
            #femaleshop:active {
                position:relative;
                top:1px;
            }

    #container4{
        display: flex;
    }

        #content5{
            position: relative;
            top: 0px;
            left: 100px;
            width: 798px;
            height: 602px;
            flex: 1;
            order: 1;
    }

    #content5 > img{
        /*position: relative;
        top: 0px;
        left: 100px;*/
        width: 600px;
        }

        #content6{
            position: relative;
            top: 200px;
            left: -90px;
            width: 600px;
            height: 200px;
            text-align: center;
            border: 1px solid #000;
            flex: 1;
            order: 2;
        }

            #plantshop {
                box-shadow:inset 0px 1px 0px 0px #fff6af;
                background:linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
                background-color:#ffec64;
                border-radius:6px;
                border:1px solid #ffaa22;
                display:inline-block;
                cursor:pointer;
                color:#333333;
                font-family:Arial;
                font-size:15px;
                font-weight:bold;
                padding:6px 24px;
                text-decoration:none;
                text-shadow:0px 1px 0px #ffee66;
            }
            #plantshop:hover {
                background:linear-gradient(to bottom, #ffab23 5%, #ffec64 100%);
                background-color:#ffab23;
            }
            #plantshop:active {
                position:relative;
                top:1px;
            }

    footer{
        position: relative;
        top: 50px;
        text-align: center;
    }

        #footerlinks ul{
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-evenly;
        }

        #footer1{
            position: relative;
            top: 0px;
            left: ;
            width: ;
            height: ;
            padding: 10px;
        }

            #footer1 > p{
                font-size: 15px;
            }

    @media(min-width: 768px){
        nav ul{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
        }

        nav ul li:hover, nav ul li a:focus{
            background-color: #000;
            text-decoration: underline;
        }
    }
    #container1{
        display: flex;
        justify-content: space-between;
    }
我尝试了不同的Flex属性变体，如justify-content、flex-basis、align-items、flex-direction：列和其他一些。我猜我没有应用正确的东西，但我很难弄清楚什么是正确的方式编码在一起`
css (Media Queries)我在使用media queries/flex时做错了什么？

1条答案

相关问题

热门标签

最新问答
