蓝桥杯web：5【页面布局】制作网站首页

考试需求

请完善
css/style.css
样式文件，让知乎日报首页呈现如下所示的效果（页面整体宽度
1024px
）：

关键尺寸批注如下：（可以通过在图片上右键-》“在新标签页打开图片”，或在右键-》复制图片地址后到浏览器新标签页打开并放大图片，查看关键尺寸）

HTML：


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
    />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <title>知乎日报 - 每天 3 次，每次 7 分钟</title>
    <link href="css/style.css" rel="stylesheet" />
  </head>

  <body id="body">
    <!--header start-->
    <header class="headerbox">
      <!--nav start-->
      <nav class="navbox">
        <h1>知乎日报</h1>
        <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>
          <a href="#">
            <img src="images/1.jpg" alt="" />
            <p>怎样使金属变得很脆？</p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="images/2.jpg" alt="" />
            <p>有哪些对你很有冲击力的设计？</p>
          </a>
        </li>
        <li>
          <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>
          <a href="#">
            <img src="images/6.jpg" alt="" />
            <p>火车上的「最大上沙量」标识是什么意思？</p>
          </a>
        </li>
        <li>
          <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>
          <a href="#">
            <img src="images/2.jpg" alt="" />
            <p>有哪些对你很有冲击力的设计？</p>
          </a>
        </li>
        <li>
          <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>
          <a href="#">
            <img src="images/6.jpg" alt="" />
            <p>火车上的「最大上沙量」标识是什么意思？</p>
          </a>
        </li>
        <li>
          <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>
            知乎日报是一款拥有千万用户的资讯类客户端，每日提供来自知乎社区的精选问答，还有国内一流媒体的专栏特稿。
          </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：

*{
    padding:0;
    margin:0;
}
a{
    text-decoration: none;
    color: #000000;
}
li{
    list-style: none;
}

body{
    width: 1024px;
    margin: auto;
}
.navbox{
    height: 78px;
    line-height: 78px;
}
.navbox h1{
    /*将h1里的字体大小调整为0px，设置h1宽高，再插入背景图片*/
    font-size: 0px;
    float: left;
    height: 50px;
    width: 145px;
    background-image:url('../images/logo.png');
}
.navright{
    float: right;
}

.navright a{
    /* 将a标签设置宽高，并且使文字居中 */
    display: inline-block;
    width: 120px;
    height: 32px;
    line-height: 32px;
    text-align: center;
}

.navright .on{
    color: #0099F2;
    background-color: #F0F9FF;
}

.banner{
    background-color: #008BED;
}
.container{
   position: relative;
}

.content{
    /* 不是很懂移动的距离怎么看出来的 */
    width: 410px;
    position: absolute;
    top:120px;
    left: 500px; 
}
.content h2{
    font-size: 40px;
    line-height: 40px;
    color: #fdfdfd;
}
.content .info{
    font-size: 16px;
    line-height: 26px;
    color: #99d1f8;
}
.tabtitle{
    width: 960px;
    height: 100px;
    line-height: 100px;
    margin: 0 auto;
}
.tabtitle h3{
    /* 单独只写h4float：right，h4会到下面，加上h3float：left才有效果 */
    font-size: 24px;
    float: left;
    color: #000000;
}
.tabtitle h4{
    font-size: 24px;
    color: #cccccc;
    float: right;
}

.list{
   margin: auto;
   display: flex;
   flex-wrap: wrap;
   flex-direction: column;
   width: 960px;
}
.list ul{
    background-color: #f9f9f9;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

}
.list ul li{
    width: 300px;
    height: 374px;
    margin-bottom: 20px;
    background-color: #ffffff;
    
}
.list li a{
    margin-left: 20px;
}
.list li img{
    width: 260px;
    height: 260px;
    margin-top: 20px;
}
.list li p{
    font-size: 14px;
    color:#333333;
    margin-left: 20px;
}
.more{
    color: #59abdf;
    height: 62px;
    line-height: 62px;
    font-size: 20px;
    text-align:center;
    background-color: #e8eef2;
}
.more a{
    color: #59abdf
}

.footer{
    overflow: hidden;
    width: 1024px;
    height: 265px;
    background-color: #E5E5E5;
    margin-top:30px;
}
.footerBox{
    display: flex;
    justify-content: space-around;
}
.footerL{
    width:710px;
    height: 210px;
    color: #000000;
    font-size: 14px;
    line-height: 25px;
    margin-top: 32px;
}
.footerL p{
    margin-bottom: 15px;
}
.footerR{
    margin-top: 30px;
    text-align: center;
}
.footerR img{
    width: 141px;
    height:162px;
}

原文链接：https://blog.csdn.net/weixin_51167834/article/details/123433943

考试需求

你可能也喜欢