Web实验八弹性布局

最新推荐文章于 2025-05-17 18:19:21 发布
烦躁的黄色汉堡诶
最新推荐文章于 2025-05-17 18:19:21 发布
阅读量380
点赞数 4
文章标签：前端 css javascript
本文链接：https://blog.csdn.net/m0_70331091/article/details/134416883
版权
Web实验八弹性布局

一、实验目的：

1、掌握CSS+DIV进行页面布局
2、掌握弹性布局
二、实验内容：

可参考以下设置完成实验：
“热门”的字体大小为20px，字体颜色为rgb(24, 25, 28)，上下间距设置为16px。“首页”、“搞笑”等文字的字体大小为15px，字体颜色为#61666D。
排行榜中奇数行的背景颜色设置为#FFFFFF;偶数行的背景颜色设置为#F6F7F8。数字的字体大小为14px，字体为Avenir，字体样式为斜体，字体加粗为600。数字的宽度为20px，右边距为6px，水平居中对齐。“1”的字体颜色为#ff473d;“2”的字体颜色为#ff6a29;“3”的字体颜色为#ff9214;其他数字的字体颜色为#C9CCD0;标题的字体大小为14px，字体颜色为#18191C，行间距为18px。
三、实验步骤及结果：

<html>
  <head>
    <style>
      li{
        list-style: none;margin: 4px 0;
      }
      .channel-nav-sub-ul{
        padding: 0;
        display: flex;
        justify-content: space-around;
        width: 620px
      }
     
      a{
        text-decoration: none;
      }
      body {
        margin: 0;
        padding: 0;
        font-family: Arial, sans-serif;
      }

      .container {
        margin: 0 auto;
        padding: 64px;
        
      }
      .channel-nav {
        display: flex;
        align-items: center;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .08);
      }
      .channel-nav-name {
        display: flex;
        align-items: center; /* 垂直居中 */
      }

      .channel-nav-name a {
        font-size: 22px;
        color: #18191C;
        margin-right: 20px;
 
      }
      .channel-nav-sub {
        display: flex;
        align-items: center;
      }
      .channel-nav-sub-item a {
        font-size: 15px;
        color: #61666D;
      }
      .video-card-image img {
        border-radius: 6px;
        height: 200px;
      }

      .area-header {
         margin: 16px 0;
      }
      .area-header span {
        font-size: 20px;
        color: rgb(24, 25, 28);
       
      }

      .video-card-info-tit a {
        color: #18191C;
      }

      .video-card-info-bottom a {
        font-size: 13px;
        color: rgb(148, 153, 160);
      }
      .grid{
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-row-gap: 20px;
        grid-column-gap: 12px;
      }
      .video-card-body{
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-row-gap: 20px;
        grid-column-gap: 12px;
      }
      .video-card-list{
        grid-column: span 4;
      }
      .video-card {
        border-radius: 6px;
        overflow: hidden;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }
      .aside-head span {
        font-size: 20px;
        color: rgb(24, 25, 28);
        margin-top: 16px;
        margin-bottom: 16px;
      }
      a {
        font-size: 15px;
        color: #61666D;
      }
      .aside-head{
        margin: 16px 0;
      }

      .rank-list-video{
        padding: 0px;
      }
      .rank-list-video-item:nth-child(odd) {
        background-color: #FFFFFF;
      }

      .rank-list-video-item:nth-child(even) {
        background-color: #F6F7F8;
      }

      .rank-list-video-item-index {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        font-family: Avenir;
        font-style: italic;
        font-weight: 600;
        width: 20px;
        margin-right: 6px;
        text-align: center;
        float: left;
      } 
     
      .rank-list-video-item:nth-child(1) .rank-list-video-item-index{
        color: #ff473d;
      }

      .rank-list-video-item:nth-child(2) .rank-list-video-item-index{
        color: #ff6a29;
      }

      .rank-list-video-item:nth-child(3) .rank-list-video-item-index{
        color: #ff9214;
      }

      .rank-list-video-item:not(:nth-child(1)):not(:nth-child(2)):not(:nth-child(3)) .rank-list-video-item-index {
			  color: #C9CCD0;
			}


      .rank-video-card-info-tit {
        display: block;
        font-size: 14px;
        color: #18191C;
        line-height: 18px;
      }
      .rank-list-video-item-wrap {
        display: flex;
        align-items: center;
      }
      
    </style>
  </head>
  <body>
    <div class="container">
      <div class="fix-wrapper">
        <div class="channel-nav">
          <div class="channel-nav-name"><a href="">生活</a></div>
          <div class="channel-nav-sub">
            <ul class="channel-nav-sub-ul">
              <li class="channel-nav-sub-item"><a href="">首页</a></li>
              <li class="channel-nav-sub-item"><a href="">搞笑</a></li>
              <li class="channel-nav-sub-item"><a href="">亲子</a></li>
              <li class="channel-nav-sub-item"><a href="">出行</a></li>
              <li class="channel-nav-sub-item"><a href="">三农</a></li>
              <li class="channel-nav-sub-item"><a href="">家居房产</a></li>
              <li class="channel-nav-sub-item"><a href="">手工</a></li>
              <li class="channel-nav-sub-item"><a href="">绘画</a></li>
              <li class="channel-nav-sub-item"><a href="">日常</a></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="channel-layout">
        <div class="grid">
          <div class="video-card-list">
            <div class="area-header"><a href=""><span>搞笑</span></a></div>
            <div class="video-card-body">

              <div class="video-card">
                <div class="video-card-image">
                  <img src="https://i2.hdslb.com/bfs/archive/cf1400c8a93d270e2dcc398603f95693bc38e023.jpg@320w_200h_1c_!web-space-index-myvideo.avif" alt="领导说干不了就滚">
                </div>
                <div class="video-card-info">
                  <h4 class="video-card-info-tit"><a href="https://www.bilibili.com/video/BV1nC4y1G7qx/?spm_id_from=333.1073.sub_channel.dynamic_rank_video.click">领导说干不了就滚</a></h4>
                  <div class="video-card-info-bottom">
                    <a href="https://space.bilibili.com/5294454">
                      <span class="video-card-info-author">逗比的雀巢</span>
                      <span class="video-card-info-date">· 10-14</span>
                    </a>
                  </div>
                </div>
              </div>

              <div class="video-card">
                <div class="video-card-image">
                  <img src="https://i2.hdslb.com/bfs/archive/416e0d76ae544e4dbd1e313f17ceadeb1eb7181c.jpg@320w_200h_1c_!web-space-index-myvideo.avif" alt="公司要爆炸了 好难过">
                </div>
                <div class="video-card-info">
                  <h4 class="video-card-info-tit"><a href="https://www.bilibili.com/video/BV1hw41117wh/?spm_id_from=333.999.0.0">公司要爆炸了 好难过</a></h4>
                  <div class="video-card-info-bottom">
                    <a href="https://space.bilibili.com/5294454">
                      <span class="video-card-info-author">逗比的雀巢</span>
                      <span class="video-card-info-date">· 10-1</span>
                    </a>
                  </div>
                </div>
              </div>

              <div class="video-card">
                <div class="video-card-image">
                  <img src="https://i2.hdslb.com/bfs/archive/c98651d66ca02ffc5f4aab37e07a1fe61f66537e.jpg@320w_200h_1c_!web-space-index-myvideo.avif" alt="这可比手术刀好用多了">
                </div>
                <div class="video-card-info">
                  <h4 class="video-card-info-tit"><a href="https://www.bilibili.com/video/BV1XN411873W/?spm_id_from=333.999.0.0">这可比手术刀好用多了</a></h4>
                  <div class="video-card-info-bottom">
                    <a href="https://space.bilibili.com/5294454">
                      <span class="video-card-info-author">逗比的雀巢</span>
                      <span class="video-card-info-date">· 8-14</span>
                    </a>
                  </div>
                </div>
              </div>
  
              <div class="video-card">
                <div class="video-card-image">
                  <img src="https://i0.hdslb.com/bfs/archive/b3d043827eb0fd54cf261bf282d1840756e73034.jpg@320w_200h_1c_!web-space-index-myvideo.avif" alt="用浏览记录绑架你">
                </div>
                <div class="video-card-info">
                  <h4 class="video-card-info-tit"><a href="https://www.bilibili.com/video/BV14V411L7GV/">用浏览记录绑架你</a></h4>
                  <div class="video-card-info-bottom">
                    <a href="https://space.bilibili.com/5294454">
                      <span class="video-card-info-author">逗比的雀巢</span>
                      <span class="video-card-info-date">· 7-23</span>
                    </a>
                  </div>
                </div>
              </div>
  
              <div class="video-card">
                <div class="video-card-image">
                  <img src="https://i1.hdslb.com/bfs/archive/3e6d0217919e4148a7dae1d9e491b88ba0be8ef9.jpg@320w_200h_1c_!web-space-index-myvideo.avif" alt="答非所问（奥义超级版）">
                </div>
                <div class="video-card-info">
                  <h4 class="video-card-info-tit"><a href="https://www.bilibili.com/video/BV1CN41147Eo/?spm_id_from=333.1073.sub_channel.dynamic_rank_video.click">答非所问（奥义超级版</a></h4>
                  <div class="video-card-info-bottom">
                    <a href="https://space.bilibili.com/5970160">
                      <span class="video-card-info-author">小潮院长</span>
                      <span class="video-card-info-date">· 10-16</span>
                    </a>
                  </div>
                </div>
              </div>

              <div class="video-card">
                <div class="video-card-image">
                  <img src="https://i0.hdslb.com/bfs/archive/c608616167a75cf9d7883d5824e5774835f6b67a.jpg@440w_276h_1c_!web-space-index-topvideo.avif" alt="谋 权 篡 位（番外篇①）">
                </div>
                <div class="video-card-info">
                  <h4 class="video-card-info-tit"><a href="https://www.bilibili.com/video/BV1aG411W7zm/?spm_id_from=333.999.0.0">谋 权 篡 位（番外篇①）</a></h4>
                  <div class="video-card-info-bottom">
                    <a href="https://space.bilibili.com/5970160">
                      <span class="video-card-info-author">小潮院长</span>
                      <span class="video-card-info-date">· 7-9</span>
                    </a>
                  </div>
                </div>
              </div>

              <div class="video-card">
                <div class="video-card-image">
                  <img src="https://i2.hdslb.com/bfs/archive/3bcf9c1e0eab672fc3b73a344ea587ca6e2b691d.jpg@320w_200h_1c_!web-space-index-myvideo.avif" alt="谋 权 篡 位（番外篇②）">
                </div>
                <div class="video-card-info">
                  <h4 class="video-card-info-tit"><a href="https://www.bilibili.com/video/BV1YF41197Lj/?spm_id_from=333.999.0.0">谋 权 篡 位（番外篇②）</a></h4>
                  <div class="video-card-info-bottom">
                    <a href="https://space.bilibili.com/5970160">
                      <span class="video-card-info-author">小潮院长</span>
                      <span class="video-card-info-date">· 7-15</span>
                    </a>
                  </div>
                </div>
              </div>

              <div class="video-card">
                <div class="video-card-image">
                  <img src="https://i1.hdslb.com/bfs/archive/0766766addfb2f917b7f86995b4ae037969d5988.jpg@320w_200h_1c_!web-space-index-myseries.avif" alt="【误 入 大 电 音 寺】">
                </div>
                <div class="video-card-info">
                  <h4 class="video-card-info-tit"><a href="https://www.bilibili.com/video/BV16C4y1G7Nk/?spm_id_from=333.999.0.0">【误 入 大 电 音 寺】</a></h4>
                  <div class="video-card-info-bottom">
                    <a href="https://space.bilibili.com/3380239">
                      <span class="video-card-info-author">神奇的老皮</span>
                      <span class="video-card-info-date">· 10-17</span>
                    </a>
                  </div>
                </div>
              </div>

            </div>
          </div>
          

          <div class="aside-wrap">
            <div class="aside-head">
              <a href=""><span>热门</span></a>
            </div>
            <div class="aside-body">
              <ul class="rank-list-video">

                <li class="rank-list-video-item">
                  <div class="rank-list-video-item-wrap">
                    <span class="rank-list-video-item-index">1</span>
                    <a class="rank-video-card" href="https://www.bilibili.com/video/BV1nC4y1G7qx/?spm_id_from=333.1073.channel.secondary_floor_rank.click">
                      <div class="rank-video-card-info">
                        <h3 class="rank-video-card-info-tit">领导说干不了就滚</h3>
                      </div>
                    </a>
                  </div>
                </li>

                <li class="rank-list-video-item">
                  <div class="rank-list-video-item-wrap">
                    <span class="rank-list-video-item-index">2</span>
                    <a class="rank-video-card" href="https://www.bilibili.com/video/BV1s841167EX/?spm_id_from=333.1073.channel.secondary_floor_rank.click">
                      <div class="rank-video-card-info">
                        <h3 class="rank-video-card-info-tit">遗憾终究是遗憾</h3>
                      </div>
                    </a>
                  </div>
                </li>

                <li class="rank-list-video-item">
                  <div class="rank-list-video-item-wrap">
                    <span class="rank-list-video-item-index">3</span>
                    <a class="rank-video-card"  href="https://www.bilibili.com/video/BV1Zw411c7ya/">
                      <div class="rank-video-card-info">
                        <h3 class="rank-video-card-info-tit">不多说了，请看vcr</h3>
                      </div>
                    </a>
                  </div>
                </li>

                <li class="rank-list-video-item">
                  <div class="rank-list-video-item-wrap">
                    <span class="rank-list-video-item-index">4</span>
                    <a class="rank-video-card" href="https://www.bilibili.com/video/BV1CN41147Eo/?spm_id_from=333.1073.channel.secondary_floor_rank.click">
                      <div class="rank-video-card-info">
                        <h3 class="rank-video-card-info-tit">答非所问（奥义超级版）</h3>
                      </div>
                    </a>
                  </div>
                </li>

                <li class="rank-list-video-item">
                  <div class="rank-list-video-item-wrap">
                    <span class="rank-list-video-item-index">5</span>
                    <a class="rank-video-card" href="https://www.bilibili.com/video/BV16G411m7QY/?spm_id_from=333.1073.channel.secondary_floor_rank.click">
                      <div class="rank-video-card-info">
                        <h3 class="rank-video-card-info-tit">默契兄弟</h3>
                      </div>
                    </a>
                  </div>
                </li>

                <li class="rank-list-video-item">
                  <div class="rank-list-video-item-wrap">
                    <span class="rank-list-video-item-index">6</span>
                    <a class="rank-video-card" class="rank-video-card"  href="https://www.bilibili.com/video/BV16C4y1G7Nk/?spm_id_from=333.1073.channel.secondary_floor_rank.click">
                      <div class="rank-video-card-info">
                        <h3 class="rank-video-card-info-tit">【误 入 大 电 音 寺】</h3>
                      </div>
                    </a>
                  </div>
                </li>

                <li class="rank-list-video-item">
                  <div class="rank-list-video-item-wrap">
                    <span class="rank-list-video-item-index">7</span>
                    <a class="rank-video-card" class="rank-video-card" href="https://www.bilibili.com/video/BV1Wj411t7SQ/?spm_id_from=333.1073.channel.secondary_floor_rank.click">
                      <div class="rank-video-card-info">
                        <h3 class="rank-video-card-info-tit">你的童年遗憾有哪些?</h3>
                      </div>
                    </a>
                  </div>
                </li>

                <li class="rank-list-video-item">
                  <div class="rank-list-video-item-wrap">
                    <span class="rank-list-video-item-index">8</span>
                    <a class="rank-video-card" href="https://www.bilibili.com/video/BV1Py4y1N72x/?spm_id_from=333.1073.channel.secondary_floor_rank.click">
                      <div class="rank-video-card-info">
                        <h3 class="rank-video-card-info-tit">各地人的娱乐项目</h3>
                      </div>
                    </a>
                  </div>
                </li>
              </ul>
            </div>
          </div>

        </div>
      </div>
    </div>
  </body>       
</html>