前端综合复现实战-youtube网站首页（3）-侧栏

最新推荐文章于 2024-04-29 10:40:41 发布

Dan want to learn

最新推荐文章于 2024-04-29 10:40:41 发布

阅读量224

点赞数 6

文章标签：前端 css

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

版权

比如说你想修改一个div里面所有的img格式，就直接这个div class的名字：

.sidebar-link img {
  height: 24px;
}

类似还可以将img修改为div也是ok的

写时候遇到的麻烦：布局问题

可以看到虽然图标和文字设置不同类型，也利用了flex让其居中表达

但是这img和div默认的就是左右布局，而不是实际youtube里面的上下布局，这种就需要修改flex-direction参数，像这个上下的就是column

css：

.sidebar {
  position: fixed;
  top: 55px;
  left: 0;
  bottom: 0;
  background-color: white;
  border-right-style: solid;
  width: 70px;

}

.sidebar-link {

  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

}

.sidebar-link:hover {
  background-color: rgb(235, 235, 235)
}

.sidebar-link img {
  height: 24px;
}

.sidebar-link div {
  font-size: 10px;


}

html：


  <div class="sidebar">
    <div class="sidebar-link"> <img src="../photos/home.png">
      <div>home</div>
    </div>
    <div class="sidebar-link"> <img src="../photos/explorer.png">
      <div>explorer</div>
    </div>
    <div class="sidebar-link"> <img src="../photos/subscriptions.png">
      <div>subscriptions</div>
    </div>
    <div class="sidebar-link"> <img src="../photos/视频.png">
      <div>originials</div>
    </div>
    <div class="sidebar-link"> <img src="../photos/music.png">
      <div>youtube music</div>
    </div>
    <div class="sidebar-link"> <img src="../photos/library.png">
      <div>library</div>
    </div>

  </div>