likes
comments
collection
share

化身街头风琴手一CSS（精通flex的使用）

作者站长头像
站长
· 阅读数 42

正在努力学习 CSS 的 jym，今天我们就拿这个网页练练手吧。

布局

也许你第一时间会想到用六个盒子，但这里用到的其实是列表，相对来说效果实现会简单很多，下面是HTML代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>手风琴</title>
    <link rel="stylesheet" href="common.css">
</head>
<body>
    <ul class="accordion">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</body>
</html>

其中引用了common.css，为ul加上了accordion类名。

样式

直接贴上CSS源码，我们先自行对代码进行理解。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ul,
li {
  list-style: none;
}
.accordion {
  display: flex;
  width: 1500px;
  height: 800px;
}
.accordion li {
  flex: 1;
  cursor: pointer;
  line-height: 200px;
  text-align: center;
  color: #fff;
  transition: flex 500ms;
}
.accordion li:nth-child(1) {
  background-color: #f66;
}
.accordion li:nth-child(2) {
  background-color: #66f;
}
.accordion li:nth-child(3) {
  background-color: #f90;
}
.accordion li:nth-child(4) {
  background-color: #09f;
}
.accordion li:nth-child(5) {
  background-color: #9c3;
}
.accordion li:nth-child(6) {
  background-color: #3c9;
}
.accordion li:hover {
  flex: 2;
  background-color: #aaa;
}

其中几处重要的代码知识点：

  1. :nth-child(2)：选择父元素的第二个子元素
  2. :hover：选择用户将鼠标指针悬停在其上的元素
  3. flex:2：使该元素在整块区域占比为元素属性flex为1的两倍
  4. transition：在元素从一种样式过渡到另一种样式时添加平滑的动画效果

总结

当做一个界面效果时，选择一个合适的HTML标签会大幅降低我们的工作量，同时我们要熟练各种属性的使用。想成为一个优秀的前端工程师，我们要多去完成造页面。帅气的掘友，开始你的创作吧，成为风琴手就现在。

转载自:https://juejin.cn/post/7375504338758828070
评论
请登录