CSS卡项目

问题描述 投票：0回答：1

这是CSS代码：

*{margin:0;

  padding:0;

  box-sizing:border-box;

}



img{

  display:block;

  max-width:100%;

  height:auto;

}



html{

  scroll-behavior:smooth;

}







body{

  min-height:100vh;

  font-family:fantasy;

  font-size:1.125rem;

  display:flex;

  flex-direction:column;

  background-color:#BF4F51;

  background-image:linear-gradient(315deg, #BF4F51 0%, #00C6A7 74%);}



header,footer{

  background-color:#333;

  color:#fff;

  padding:1rem;

  position:sticky;

  text-align:center;



}

header{

  top:0;

  font-size:3rem;

}



footer{

  bottom:0;

  font-size:1.5rem;

}



nav{

  background-color:papayawhip;

  padding:1rem;

  display:flex;

  justify-content:space-evenly;

  text-align:center;

  font-size:1.5rem;

  margin-bottom:1rem;

  margin-top:1rem;

}



nav a,

nav a:visited{

  color:black;

  text-decoration:none;

}



nav a:hover, nav a:focus{

  color:brown;

}





main{

  flex-grow:1;

  display:flex;

  flex-direction:column;

  gap:2rem;

  padding:0.5rem;

  justify-content:center;

  align-items:center;

  

}



.card{

  scroll-margin-top:8rem;

  width:min(100%, 400px);

  background-color:beige;

  border:2px solid black;

  border-radius:20px;

  padding:3rem;

  display:flex;

  flex-direction:column;

  text-align:center;

  

}



.card img{

  border:2px solid black;

  border-radius:1000px;

}



.card figcaption{

  margin:1rem;

  font-weight:bolder;



<html>



<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width">

  <title>Laylatul Qadr</title>

  <link href="style.css" rel="stylesheet">

</head>



<body>

  <header>

    <h1>Laylatul Qadr</h1>

  </header>

  <nav>

      <a href="#Qirat">Qirat</a>

      <a href="#Qiyam">Qiyam</a>

      <a href="#Siyam">Siyam</a>

  </nav>

  <main>

    <article id="Qirat" class="card">

      <figure>

        <img src="feea4181f154cb619ce78d6f10b310f0.jpg" height="1308" width="736" alt="Qirat">

        <figcaption>Qirat</figcaption>

        <p><q>Reflect on the ayahs.</q></p>

      </figure>

    </article>

    

    



    <article id="Qiyam" class="card">

      <figure>

        <img src="1c6c718d1b3a84f33af850da377ed593.jpg" height="853" width="640" alt="Qiyam">

        <figcaption>Qiyam</figcaption>

        <p><q>Engage more in Qiyam Al layl.</q></p>

      </figure>

    </article>

    <article id="Siyam" class="card">

      <figure>

        <img src="eb538cd47834af92764559818a1434cc.jpg" height="989" width="736" alt="Siyam">

        <figcaption>Siyam</figcaption>

        <p><q>Fast with the intention of your sins being forgiven.</q></p>

      </figure>

    </article>

  </main>

  <footer>

    <p>Make The Most Out Of This Last 10 days!</p>

  </footer>

</body>



</html>

当不在 chrome 桌面视图中查看时，页眉、导航和页脚元素、背景颜色不会覆盖页面的 100% 宽度 它只覆盖了一半的视图 让我展示一下without desktop view

这是没有桌面视图的情况。

桌面视图的在这里：here with desktop view

我是CSS新手，我不太明白这里出了什么问题？我尝试添加媒体采石场，但这不起作用..？请好心人花点时间指出这里出了什么问题吗？

java html css flexbox css-selectors
1个回答
0
投票

我在页眉、页脚和导航中添加了 width: 100% 并删除了一些属性。

正确的方法是使用媒体查询，它会根据屏幕尺寸应用不同的样式

希望有帮助

*{margin:0;

  padding:0;

  box-sizing:border-box;

}



img{

  display:block;

  max-width:100%;

  height:auto;

}


body{

  min-height:100vh;

  font-family:fantasy;

  font-size:1.125rem;

  display:flex;

  flex-direction:column;

  background-color:#BF4F51;

  background-image:linear-gradient(315deg, #BF4F51 0%, #00C6A7 74%);}



header,footer{

  background-color:#333;

  color:#fff;

  padding:1rem;

  text-align:center;

width: 100%; /* full width */


}


nav{

  background-color:papayawhip;

  padding:1rem;

  display:flex;

  justify-content:space-evenly;

  text-align:center;

  font-size:1.5rem;

width: 100%; /* full width */

}



nav a,

nav a:visited{

  color:black;

  text-decoration:none;

}



nav a:hover, nav a:focus{

  color:brown;

}





main{

  flex-grow:1;

  display:flex;

  flex-direction:column;

  gap:2rem;

  padding:0.5rem;

  justify-content:center;

  align-items:center;

  

}



.card{

  scroll-margin-top:8rem;

  width:min(100%, 400px);

  background-color:beige;

  border:2px solid black;

  border-radius:20px;

  padding:3rem;

  text-align:center;

  

}



.card img{

  border:2px solid black;

  border-radius:1000px;

}



.card figcaption{

  margin:1rem;

  font-weight:bolder;
<html>



<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width">

  <title>Laylatul Qadr</title>

  <link href="style.css" rel="stylesheet">

</head>



<body>

  <header>

    <h1>Laylatul Qadr</h1>

  </header>

  <nav>

      <a href="#Qirat">Qirat</a>

      <a href="#Qiyam">Qiyam</a>

      <a href="#Siyam">Siyam</a>

  </nav>

  <main>

    <article id="Qirat" class="card">

      <figure>

        <img src="feea4181f154cb619ce78d6f10b310f0.jpg" height="1308" width="736" alt="Qirat">

        <figcaption>Qirat</figcaption>

        <p><q>Reflect on the ayahs.</q></p>

      </figure>

    </article>

    

    



    <article id="Qiyam" class="card">

      <figure>

        <img src="1c6c718d1b3a84f33af850da377ed593.jpg" height="853" width="640" alt="Qiyam">

        <figcaption>Qiyam</figcaption>

        <p><q>Engage more in Qiyam Al layl.</q></p>

      </figure>

    </article>

    <article id="Siyam" class="card">

      <figure>

        <img src="eb538cd47834af92764559818a1434cc.jpg" height="989" width="736" alt="Siyam">

        <figcaption>Siyam</figcaption>

        <p><q>Fast with the intention of your sins being forgiven.</q></p>

      </figure>

    </article>

  </main>

  <footer>

    <p>Make The Most Out Of This Last 10 days!</p>

  </footer>

</body>



</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.