La 13.ª Copa Blue Bridge (grupo web), la quinta pregunta [diseño de página] es la página de inicio del sitio web

El diseño de la página utiliza principalmente el diseño flexible, justify-content y align-item pueden centrar el contenido, estos dos atributos se utilizan más.

El nombre de la clase correspondiente también se agrega en el html (mire con atención), el diseño de esta página es un poco defectuoso, explore la imagen debajo del contenido, el color de fondo más externo (gris) no se muestra (es cierto, no lo hago). sé por qué), algunos amigos lo saben. Cuéntamelo.

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>Document</title>
</head>
<link rel="stylesheet" href="./css/style.css">

  <body id="body">
    <!--header start-->
    <header class="headerbox">
      <!--nav start-->
      <nav class="navbox">
        <img src="./images/logo.png" alt="">
        <div class="navright">
          <a class="on" href="#body">app下载</a>
          <a href="#tabtitle">浏览内容</a>
        </div>
      </nav>
      <!--nav end-->
    </header>
    <!--header end-->
    <!--banner start-->
    <section class="banner">
      <div class="container">
        <div class="">
          <img
            src="./images/phone_sample.png"
            alt="知乎日报应用截屏"
            class="phoneimg loaded"
          />
        </div>
        <div class="content">
          <h2>每天三次 每次七分钟</h2>
          <div class="info">
            在中国，资讯类移动应用的人均阅读时长是 5
            分钟，而在知乎日报，这个数字是 21。
          </div>
        </div>
      </div>
    </section>
    <!--banner end-->
    <!--tabtitle start-->
    <section class="tabtitle" id="tabtitle">
      <h3>浏览内容</h3>
      <h4>最新内容</h4>
    </section>
    <!--tabtitle end-->
    <!--list start-->
    <section class="list">
      <ul>
        <li style="margin-top: 0;">
          <a href="#">
            <img src="images/1.jpg" alt="" />
            <p>怎样使金属变得很脆？</p>
          </a>
        </li>
        <li class="ma-le" style="margin-top: 0;">
          <a href="#">
            <img src="images/2.jpg" alt="" />
            <p>有哪些对你很有冲击力的设计？</p>
          </a>
        </li>
        <li class="ma-le" style="margin-top: 0;">
          <a href="#">
            <img src="images/3.jpg" alt="" />
            <p>有哪些很重要，教练却没有教的驾驶技巧？</p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="images/5.jpg" alt="" />
            <p>谢谢天上掉的玩具</p>
          </a>
        </li>
        <li class="ma-le">
          <a href="#">
            <img src="images/6.jpg" alt="" />
            <p>火车上的「最大上沙量」标识是什么意思？</p>
          </a>
        </li>
        <li class="ma-le">
          <a href="#">
            <img src="images/7.jpg" alt="" />
            <p>翼龙可以当飞行坐骑么？</p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="images/1.jpg" alt="" />
            <p>怎样使金属变得很脆？</p>
          </a>
        </li>
        <li class="ma-le">
          <a href="#">
            <img src="images/2.jpg" alt="" />
            <p>有哪些对你很有冲击力的设计？</p>
          </a>
        </li>
        <li class="ma-le">
          <a href="#">
            <img src="images/3.jpg" alt="" />
            <p>有哪些很重要，教练却没有教的驾驶技巧？</p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="images/5.jpg" alt="" />
            <p>谢谢天上掉的玩具</p>
          </a>
        </li>
        <li class="ma-le">
          <a href="#">
            <img src="images/6.jpg" alt="" />
            <p>火车上的「最大上沙量」标识是什么意思？</p>
          </a>
        </li>
        <li class="ma-le">
          <a href="#">
            <img src="images/7.jpg" alt="" />
            <p>翼龙可以当飞行坐骑么？</p>
          </a>
        </li>
      </ul>
      <div class="more">
        <a href="#">更多精彩内容请在APP中查看</a>
      </div>
    </section>
    <!--list end-->
    <!--footer start-->
    <footer class="footer">
      <div class="footerBox">
        <div class="footerL">
          <p style="margin-top: 0;">
            知乎日报是一款拥有千万用户的资讯类客户端，每日提供来自知乎社区的精选问答，还有国内一流媒体的专栏特稿。
          </p>
          <p>
            主题日报包括动漫、设计、大公司、游戏、财经、电影、电子音乐、互联网安全等丰富内容，为业内人和资深爱好
            者推荐各领域最精彩文章，满足高质量阅读需求。
          </p>
          <p>在知乎日报，告别浮躁，重获阅读的愉悦。</p>
          <p>© 2020 知乎</p>
        </div>
        <div class="footerR">
          <img src="images/qr.png" alt="" />
          <p>扫描下载客户端</p>
        </div>
      </div>
    </footer>
    <!--footer end-->
  </body>
</html>

CSS:

* {
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
}

a {
    color: black
}

#body {
    width: 1024px;
    margin: 0 auto;
}

.navbox {
    display: flex;
    height: 78px;
    width: 1024px;
    justify-content: space-between;
}

.navbox>img {
    margin-left: 30px;
}

.navright {
    display: flex;
    align-items: center;
    width: 250px;
    margin-right: 30px;
    justify-content: space-around;
}

.on {
    width: 120px;
    height: 32px;
    line-height: 32px;
    color: #0099f2;
    background: #F0F9FF;
    text-align: center;
}

.banner {
    background: #008BED;
}

.container {
    display: flex;
    justify-content: space-around;
}

.content {
    width: 400px;
    margin-top: 110px;

}

.content>h2 {
    font-size: 40px;
    line-height: 40px;
    color: #fdfdfd;

}

.content>.info {
    margin-top: 10px;
    font-size: 16px;
    line-height: 26px;
    color: #99d1f8;
}

/* tab start */
.tabtitle {
    margin: 0 auto;
    width: 960px;
    height: 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tabtitle h3 {
    font-size: 24px;
    color: #000000;
}

.tabtitle h4 {
    font-size: 24px;
    color: #cccccc;
}

/* list  */
.list {
    margin: 0 auto;
    width: 1024px;
    background-color: #F9F9F9;
    display: flex;
    flex-wrap: wrap;
}

.list ul {
    background-color: #F9F9F9;
    display: flex;
    flex-wrap: wrap;
}

.list li {
    flex: 1;
    margin-top: 20px;
    width: 300px;
    background-color: white;
    display: flex;
    height: 374px;
    /* align-items: center; */
    justify-content: center;
}

.list li a {
    justify-content: center;
    margin-top: 20px;
}

.list img {
    width: 260px;
    height: 260px;

}

.ma-le {
    margin-left: 30px;
}

.more {
    margin-top: 20px;
    width: 100%;
    font-size: 20px;
    line-height: 62px;
    background-color: #E8EEF2;
    display: flex;
    justify-content: center;
    align-items: center;
}

.more a {
    justify-content: center;
    color: #59ABDF;
}

.footer {
    margin-top: 30px;
    width: 100%;
    height: 265px;
    background-color: #E5E5E5;
}

.footerBox {
    display: flex;
    margin-left: 15px;
}

.footerL {
    width: 710px;
    height: 210px;
    margin-top: 32px;
}


.footerL p {
    font-size: 14px;
    line-height: 25px;
    color: #000000;
}

.footerR {
    height: 152px;
    margin-left: 100px;
    margin-top: 25px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.footerR img {
    height: 141px;
    width: 141px;
}

La 13.ª Copa Blue Bridge (grupo web), la quinta pregunta [diseño de página] es la página de inicio del sitio web

Supongo que te gusta