前端综合复现实战-youtube网站首页-主页面(1)

Dan want to learn

已于 2024-04-17 21:22:15 修改

阅读量775

点赞数 8

文章标签：前端

于 2024-04-12 13:00:23 首次发布

本文链接：https://blog.csdn.net/m0_58777269/article/details/137071509

版权

本次想要复刻的网页如上，本次只是想复现这个页面展示效果，不会太重视图文对的上，

如果有能力的人可以自己下载一些想要图片和文字来复刻

方法如下：在官网上鼠标右键选择“检查/Inspect”

一、html的一些display(block/inline)框架

1.block element：块元素（一整行，在资源里是橘黄色）[display：block]

一般默认上面下面都有一个空闲行

2.inline element（like<strong></strong> 这种文字内部的框框）[display:inline]

尽可能占用少的空间，贴近别的人，就算你修改了对应高宽还是要占用最小的来算

3.inline-block element（实际占用的，理解为字多少就占多少）[display:inline-block]

相比于inline，你修改对应的高宽是可以发现对应的内容高宽有改变

4.none 如果有的display被设置这个，那么后面的东西都会被设置到移动前面，它本身这个内容将不显示而已，如果有抓取类型的行为，该部分还是可以被抓到的

5.flex 很灵活，建议看别人的详细说明

一般<p></p>默认的block element都是直接占一整行,为了改正这种情况，我们需要css里面应用“display”这个参数来修改布局

display:inline-block 如果这个display后面跟的内容一致，就是保证他们都在同一个框框里面

实际实现过程中需要注意不同元素内容之间的先后顺序保证布局不会紊乱

二、div 小盒子

div很多时候就是为了限制一些block元素不要去占一整行空间来设置的内容

集合之前几个笔记里面写过的：vertical-align：top

ps：当你发现你两个div虽然其他格式都设置一样，但是两个高低不同的时候，需要选择来使用以上这个参数代码保持位置一致；或者调整margin参数

一些小练习如下：有图文+div+文字+按钮

（待补充代码）

那需要注意到每次在设计一个网页以前你需要对你设置多少个div有一定的了解，防止错位，防止最后格子不够用，可以使用一些绘图软件对最开始的设计网站应用horizonal 和 vertical 两个逻辑主线来划分格子。

最后绘制的结果就是这样：

可以看到一个小型的视频展示页面初步被我忽略了时长小框，我将vertical设置红色，hortizonal设置为了蓝色，我设计逻辑为先利用垂直空间划分出大致区域，然后再划分水平（蓝色）的分布区见，然后反复如此，最后确定出div的所处位置和应有区域。

可以看出先设置垂直格子两个，一个div图片，一个information介绍div；

然后在information的格子里面设置两个水平的div，一个放置图片，一个里面设置文字内容的div；

然后文字内容的div里面又有三个div；

这样就算是设置完成，实现图示html代码如下：

<!DOCTYPE html>
<html>

<head>
  <title>Youtube.com</title>
  <link rel="stylesheet" href="video.css">
  <link rel="stylesheet" href="header.css">
  <link rel="stylesheet" href="general.css">
  <link rel="stylesheet" href="sidebar.css">
</head>


<body>
  <div class="header">

    <div class="left-section">
      <img class="icons-list" src="../photos/列表2.png">
      <img class="icons-youtube" src="../photos/youtube.png">
      Youtube
    </div>

    <div class="middle-section">
      <input class="search-box" type="text" placeholder="Search">
      <button class="search-button"> <img class="icons-search" src="../photos/搜索.png"> </button>
      <button class="voice-search-button"> <img class="icons-microphone" src="../photos/麦克风.png"> </button>
    </div>

    <div class="right-section">
      <img class="icons-video" src="../photos/视频播放.png">
      <img class="icons-picture" src="../photos/图标.png">
      <div class="icons-rings-container">
        <img class="icons-rings" src="../photos/提示.png">
        <div class="icons-rings-number"> 3</div>
      </div>

      <img class="present-user" src="../photos/personal-photo.jpeg">
    </div>

  </div>

  <div class="sidebar">
    sidebar
  </div>

  <!--第一行放置三个div视频的，调整好就直接复制粘贴的-->
  <div class="first-row">
    <!--第一个视频-->
    <div class="video-preview">

      <div>
        <img class="thumbnail" src="../photos/thumbnail1.webp">
      </div>

      <div class="video-time">
        <strong>14:50</strong>
      </div>

      <div class="video-info-grid">

        <div class="personal">
          <img style="width: 50px ; height: 50px;" src="../photos/personal-photo.jpeg">
        </div>

        <div class="video-info">
          <p class="video-title"><strong>How The Dinosaurs Actually Died</strong></p>
          <p class="video-author">Kurzgesagt-In a Nutshell </p>
          <p class="video-stats">116万次观看 &#183; 12小时前</p>
        </div>

      </div>

    </div>

    <!--第二个视频-->
    <div class="video-preview">

      <div>
        <img class="thumbnail" src="../photos/thumbnail2.webp">
      </div>

      <div class="video-time">
        <strong>8:20</strong>
      </div>

      <div class="video-info-grid">

        <div class="presonal">
          <img style="width: 50px ; height: 50px;" src="../photos/personal-photo.jpeg">
        </div>

        <div class="video-info">
          <p class="video-title"><strong> Race For AI Robots Just Got Real (OpenAI, NVIDIA and more)</strong></p>
          <p class="video-author">ColdFusion </p>
          <p class="video-stats">62万次观看 &#183; 1天前</p>
        </div>

      </div>

    </div>

    <!--第三个视频-->
    <div class="video-preview">
      <!--上面放置图片的div-->
      <div class="pictures">
        <img class="thumbnail" src="../photos/thumbnail3.webp">
      </div>
      <!--上面放置图片事件的div-->
      <div class="video-time">
        <strong>20:50</strong>
      </div>
      <!--下面放置图片事件的div-->
      <div class="video-info-grid">

        <div class="presonal">
          <img style="width: 50px ; height: 50px;" src="../photos/personal-photo.jpeg">
        </div>

        <div class="video-info">
          <p class="video-title"><strong>SHOW about how to choose shoes that suitable for you</strong> </p>
          <p class="video-author">Merdon Krits</p>
          <p class="video-stats">30万次观看 &#183; 2小时前</p>
        </div>

      </div>

    </div>

  </div>


  <!--第二行放置三个div视频的，调整好就直接复制粘贴的-->
  <div class="second-row">
    <!--第一个视频-->
    <div class="video-preview">

      <div>
        <img class="thumbnail" src="../photos/thumbnail4.webp">
      </div>

      <div class="video-time">
        <strong>14:50</strong>
      </div>

      <div class="video-info-grid">

        <div class="personal">
          <img style="width: 50px ; height: 50px;" src="../photos/personal-photo.jpeg">
        </div>

        <div class="video-info">
          <p class="video-title"><strong>How The Dinosaurs Actually Died</strong></p>
          <p class="video-author">Kurzgesagt-In a Nutshell </p>
          <p class="video-stats">116万次观看 &#183; 12小时前</p>
        </div>

      </div>

    </div>

    <!--第二个视频-->
    <div class="video-preview">

      <div>
        <img class="thumbnail" src="../photos/thumbnail5.webp">
      </div>

      <div class="video-time">
        <strong>8:20</strong>
      </div>

      <div class="video-info-grid">

        <div class="presonal">
          <img style="width: 50px ; height: 50px;" src="../photos/personal-photo.jpeg">
        </div>

        <div class="video-info">
          <p class="video-title"><strong> Race For AI Robots Just Got Real (OpenAI, NVIDIA and more)</strong></p>
          <p class="video-author">ColdFusion </p>
          <p class="video-stats">62万次观看 &#183; 1天前</p>
        </div>

      </div>

    </div>

    <!--第三个视频-->
    <div class="video-preview">
      <!--上面放置图片的div-->
      <div class="pictures">
        <img class="thumbnail" src="../photos/thumbnail6.webp">
      </div>
      <!--上面放置图片事件的div-->
      <div class="video-time">
        <strong>20:50</strong>
      </div>
      <!--下面放置图片事件的div-->
      <div class="video-info-grid">

        <div class="presonal">
          <img style="width: 50px ; height: 50px;" src="../photos/personal-photo.jpeg">
        </div>

        <div class="video-info">
          <p class="video-title"><strong>SHOW about how to choose shoes that suitable for you</strong> </p>
          <p class="video-author">Merdon Krits</p>
          <p class="video-stats">30万次观看 &#183; 2小时前</p>
        </div>

      </div>

    </div>

  </div>


  <!--第三行放置三个div视频的，调整好就直接复制粘贴的-->
  <div class="third-row">
    <!--第一个视频-->
    <div class="video-preview">

      <div>
        <img class="thumbnail" src="../photos/thumbnail1.webp">
      </div>

      <div class="video-time">
        <strong>14:50</strong>
      </div>

      <div class="video-info-grid">

        <div class="personal">
          <img style="width: 50px ; height: 50px;" src="../photos/personal-photo.jpeg">
        </div>

        <div class="video-info">
          <p class="video-title"><strong>How The Dinosaurs Actually Died</strong></p>
          <p class="video-author">Kurzgesagt-In a Nutshell </p>
          <p class="video-stats">116万次观看 &#183; 12小时前</p>
        </div>

      </div>

    </div>

    <!--第二个视频-->
    <div class="video-preview">

      <div>
        <img class="thumbnail" src="../photos/thumbnail2.webp">
      </div>

      <div class="video-time">
        <strong>8:20</strong>
      </div>

      <div class="video-info-grid">

        <div class="presonal">
          <img style="width: 50px ; height: 50px;" src="../photos/personal-photo.jpeg">
        </div>

        <div class="video-info">
          <p class="video-title"><strong> Race For AI Robots Just Got Real (OpenAI, NVIDIA and more)</strong></p>
          <p class="video-author">ColdFusion </p>
          <p class="video-stats">62万次观看 &#183; 1天前</p>
        </div>

      </div>

    </div>

    <!--第三个视频-->
    <div class="video-preview">
      <!--上面放置图片的div-->
      <div class="pictures">
        <img class="thumbnail" src="../photos/thumbnail3.webp">
      </div>
      <!--上面放置图片事件的div-->
      <div class="video-time">
        <strong>20:50</strong>
      </div>
      <!--下面放置图片事件的div-->
      <div class="video-info-grid">

        <div class="presonal">
          <img style="width: 50px ; height: 50px;" src="../photos/personal-photo.jpeg">
        </div>

        <div class="video-info">
          <p class="video-title"><strong>SHOW about how to choose shoes that suitable for you</strong> </p>
          <p class="video-author">Merdon Krits</p>
          <p class="video-stats">30万次观看 &#183; 2小时前</p>
        </div>

      </div>

    </div>

  </div>

  </div>



</body>

</html>

css的code：

.thumbnail {
  width: 374px;
  height: 211px;

}



.first-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  /* This will space out your items evenly */
  align-items: flex-start;
  width: 1350px;
  height: 340px;

  /* Use 100% to take the full width */

  /* Just for visualization */
}



.second-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  /* This will space out your items evenly */
  align-items: flex-start;
  width: 1350px;

  /* Use 100% to take the full width */

  /* Just for visualization */
}

.third-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  /* This will space out your items evenly */
  align-items: flex-start;
  width: 1350px;

  /* Use 100% to take the full width */

  /* Just for visualization */
}


.video-preview {
  margin-top: 0;
  vertical-align: top;
  margin-right: 15px;
  position: relative;
  z-index: 1;
}


.personal {
  border-radius: 10px;
  vertical-align: top;
  width: 68px;
  height: 68px;
  background-color: rgb(244, 244, 244);


}

.pictures {
  border-radius: 3px;
}

.video-time {
  position: absolute;
  background-color: black;
  font-size: 12px;
  font-weight: 500;
  padding-left: 4px;
  padding-right: 4px;
  padding-top: 4px;
  padding-bottom: 4px;
  border-radius: 2px;
  color: white;
  top: 180px;
  right: 10px;
}

.video-info {

  width: 300px;
  height: 131px;

}

.video-title {
  width: 300px;
  margin-top: 0px;
  line-height: 20px;
  margin-bottom: 12px;
  display: flex;
  flex: 1fr;

}


.video-author,
.video-stats {
  width: 300px;
  color: rgb(96, 96, 96);
  font-size: 12px;
}

.video-author {
  margin-bottom: 4px;
}

.video-info-grid {
  display: flex;
  grid-template-columns: 68px 1fr;
}

实现结果如图：

但是这里有个问题：youtobe网站的字体显示情况会随网页大小进行改变长度展示

这里可以使用grid和 flex布局来解决这个问题

我个人习惯更喜欢flex，利用flex:1;或者grid里面的1fr来完成对应灵活变动大小的布局

就像youtube有一个功能：如果你的页面很小的时候一行只想展示两个视频的话

那就需要使用@media如图代码


@media (max-width:600px) {
  .video-preview {
    grid-template-columns: 1fr 1fr;
  }
}
/*第一个表示含义就是如果页面最大的长度是600px，那就只展示两个页面*/

@media (min-width:1000px) {
  .video-preview {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}
/*第二个表示含义就是如果页面最大的长度是1000px，那展示四个页面*/

@media (min-width:601px) and (max-width:999px){
  .video-preview {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

Dan want to learn

关注

8
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
前端综合复现实战-youtube网站首页-主页面(1)

可以看到一个小型的视频展示页面初步被我忽略了时长小框，我将vertical设置红色，hortizonal设置为了蓝色，我设计逻辑为先利用垂直空间划分出大致区域，然后再划分水平（蓝色）的分布区见，然后反复如此，最后确定出div的所处位置和应有区域。4.none 如果有的display被设置这个，那么后面的东西都会被设置到移动前面，它本身这个内容将不显示而已，如果有抓取类型的行为，该部分还是可以被抓到的。本次想要复刻的网页如上，本次只是想复现这个页面展示效果，不会太重视图文对的上，
复制链接

扫一扫