如何使此页面响应以及如何在标题中对齐徽标?

问题描述 投票:0回答:0

嗨,团队,对 HTML/CSS 还很陌生,这是我第一次参加网络开发课程。

我需要让这个页面响应,以便在减小屏幕尺寸时不同的部分堆叠起来。我不知道如何去做。

我还需要将该徽标放置在左上角的标题框中,并将标题“玩具店”放置在框的中央。已经尝试了几天,但没有运气。

我的作业要求我只使用我使用过的 1 个 div 并使用语义 HTML。 提前致谢。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Toy | Store</title>
<link href="test.css" rel="stylesheet">
</head>
<body>


    <div id="wrapper">

<header>
    <img class="logo" src="images/teddyicon2.png" alt="">
    <h1>Toy Store</h1> 
    
</header>

<nav>
    <ul class="nav_links">
        <li><a href="#">Home</a></li>
        <li><a href="#">Prices</a></li>
        <li><a href="#">Options</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">Contacts</a></li>
       </ul>
</nav>

<main>
    <article id="main_content1">
        <h2>Toy Pictures</h2>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odit mollitia incidunt et. Modi repellat eaque reiciendis architecto rerum tenetur, natus quia, ab ratione id, velit eligendi quod. Nam, atque aspernatur. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos, repellat. </p>
    </article>

    <article id="main_content2">
        <h2>Toy Prices</h2>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odit mollitia incidunt et. Modi repellat eaque reiciendis architecto rerum tenetur, natus quia, ab ratione id, velit eligendi quod. Nam, atque aspernatur. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos, repellat. </p>
    </article>

    <article id="main_content3">
        <h2>Toy Options</h2>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odit mollitia incidunt et. Modi repellat eaque reiciendis architecto rerum tenetur, natus quia, ab ratione id, velit eligendi quod. Nam, atque aspernatur. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos, repellat. </p>
    </article>
    <article id="main_content4">
        <h2>Toy News Article</h2>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odit mollitia incidunt et. Modi repellat eaque reiciendis architecto rerum tenetur, natus quia, ab ratione id, velit eligendi quod. Nam, atque aspernatur. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos, repellat. </p>
    </article>


    <aside id="main_aside">

            <img src="images/teddy_in_front_fence.jpg" alt="Teddy bear in front of fence">
 
        <h2>Toy Breaking News</h2>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odit mollitia incidunt et. Modi repellat eaque reiciendis architecto rerum tenetur, natus quia, ab ratione id, velit eligendi quod. Nam, atque aspernatur.</p>

        <hr>

        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odit mollitia incidunt et. Modi repellat eaque reiciendis architecto rerum tenetur, natus quia, ab ratione id, velit eligendi quod. Nam, atque aspernatur.</p>

        <hr>

        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odit mollitia incidunt et. Modi repellat eaque reiciendis architecto rerum tenetur, natus quia, ab ratione id, velit eligendi quod. Nam, atque aspernatur.</p>

        <hr>

        <img id="teddy2" src="images/teddy1.png" alt="3 teddy bears having a party">
        
    </aside>
</main>

<footer>
    <section id="footer1">&copy Copyright 2023</section>
    <section id="footer2" class="bg-dark-1">
    <p>Name & email here</p>
    </section>
     
    </section>

</footer>


</div>
</body>
@import url('https://fonts.googleapis.com/css2?family=Fontdiner+Swanky&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');


* {
    margin: 3px;
    padding: 0;
    
    }

    body {
        margin: 0.5em;
        background-image: url(./images/background_image_wallpaper.jpg);
        /* font-family: 'Courier New', Courier, monospace; */
        font-family: 'Montserrat', sans-serif;
        font-size: 16px;
    }

    #wrapper {
        
        max-width: 1000px;
        min-height: 130vh; 
        margin: auto;
        opacity: 90%;

        /* main content grid */
        display: grid;
        grid-template-areas:
        "header"
        "nav"
        "main"
        "footer";
        grid-template-columns: 1fr;
        grid-template-rows: 100px 50px minmax(650px, auto) 100px;
        }


    #wrapper header, #wrapper footer, #wrapper main {
       /* border: solid; */
       border-radius: 0.5em;
        }



header{
    grid-area: header;
    font-family: 'Fontdiner Swanky', cursive;
    font-size: 42px;
    border: solid;
    display: flex;
    

}

header h1 {
    display: flex;
    justify-content: left;
    padding-top: 10px;
    font-size: 42px;
    
}

.logo{
    width: 80px;
    height: 80px;
    text-align: left;
    background: #ffffff;
    }


nav {
    background-color: #8a5831;
    border-radius: 2em;
    grid-area: nav;
    }

       
nav ul{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    list-style: none;
    padding-top:9px;
    }

nav a {
    text-decoration: none;
    color: antiquewhite;
    transition: 0.5s ease-in-out;
    }
    
nav a:hover,
nav a:active {
        transform: scale(1.2);
        color: rgb(40, 156, 156);
    } 


main {
    background-color: #264e2c;
  
    grid-area: main;
            
            
     /* This is the Sub-Grid */
    display: grid;
     grid-template-areas: 
            
     'article1 aside'
    'article2 aside'
     'article3 aside'
     'article4 aside'
       
        }

       
        



     
        #main_content1 {
            background-color: antiquewhite;
            grid-area: article1;
            margin: 7px;
            padding: 10px;
            margin-left: 10px;
            margin-top: 10px;
            border-radius: 0.5em;
            
            
            
        }

        #main_content2 {
            background-color: antiquewhite;
            grid-area: article2;
            margin: 7px;
            padding: 10px;
            margin-left: 13px;
            border-radius: 0.5em;

        }

        #main_content3 {
            background-color: antiquewhite;
            grid-area: article3;
            margin: 7px;
            margin-left: 13px;
            padding: 10px;
            border-radius: 0.5em;
        }

        #main_content4 {
            background-color: antiquewhite;
            grid-area: article4;
            margin: 7px;
            margin-left: 13px;
           margin-bottom: 13px;
           border-radius: 0.5em;
        }

        #main_aside {
            background-color: antiquewhite;
            grid-area: aside;
            padding: 10px;
            margin: 7px;
            margin-bottom: 13px;
            margin-right: 12px;
            margin-top: 10px;
            border-radius: 0.5em;
            
          
        }

        footer {
            /* border: solid; */
            background-color: #264e2c;
                    grid-area: footer;
        
                     /* This is the Sub-Grid */
                     display: grid;
                     grid-template-areas: 
                     
                    'footer1 footer2'
                    
                }

        #footer1 {
    grid-area: footer1;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    gap: 0.5em;
    padding: 1em;
    border: 1px solid #000;
    border-radius: 0.5em;
    background-color: #faebd7;
    margin: 5px;
        }

        #footer2 {
            grid-area: footer2;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-evenly;
            align-items: center;
            gap: 0.5em;
            padding: 1em;
            border: 1px solid #000;
            border-radius: 0.5em;
            background-color: #faebd7;
         
            
        }
      
        p {
            padding: 10px;
            padding-top: 15px;
        }

        h2 {
            position:relative; 
            left:9px; top: 11px;
            font-weight: bold;
            font-size: 24px;
        }


        img {
            display: block;
            margin-left: auto;
            margin-right: auto;
            width: 95%;
            padding-top: 5px;
          }

         #teddy2 {
            border-radius: 50%;
            width: 50%;
            margin-top: 20px;
            display: flex;
            justify-content: center;
            box-shadow: 10px 10px 8px #888888;
         }

    

我试过研究媒体查询,但我迷路了。我不知道如何堆叠不同的部分以使其在不同尺寸的屏幕上响应。

html css layout css-grid
© www.soinside.com 2019 - 2024. All rights reserved.