likes
comments
collection
share

弹性布局解决百度面试题流动钢琴块，用Stylus进行CSS的编译

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

先上流动钢琴块效果图

弹性布局解决百度面试题流动钢琴块，用Stylus进行CSS的编译

效果描述： 当鼠标移动至任意一块钢琴块上时，该块会缓慢变大

构思为六个盒子，不过是横在一个大盒子中排列

<!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>
    <ui class="accordion">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ui>
</body>
</html>

介绍Stylus

从前端新手迈向老油条，学会使用Stylus进行对CSS的编译

Stylus可以被认为是CSS的超集，作为一个CSS预处理器， Stylus扩展了CSS的语法，它编译后的输出是标准的CSS，因此可以在任何支持CSS的环境中运行。开发者可以通过编译工具（如Gulp、Webpack等）将Stylus源文件转换为浏览器可识别的CSS文件。

.accordion
    display flex
    li
        flex 1
        &:nth-child(1) 
            background-color #f66
 

.accordion {
  display: flex;
}
.accordion li {
  flex: 1;
}
.accordion li:nth-child(1) {
  background-color: #f66;
}

上面两段代码是同等效果，styl终端输入stylus common.styl -o common.css output便会得到CSS代码，为了更加便捷输入stylus -w common.styl -o common.css output 便可以一直监听（即点击保存后自动生成CSS）

可以得到总结

  • stylus 属于 css 超集，支持预编译，但最后使用的依然是编译后的css文件
    • 省事 {} : ; 都不需要了，取而代之的是tab缩进
    • 省事还体现在，选择器也可以缩进， 自动加上限定前缀， 既缩进，又表示是同一级别，& :checked :nth-child
    • 模块性 stylus 给css 引入了编程特性，一个一个模块化（即.accordion作为一个大块）

设置大盒子的box弹性布局

*
    margin 0
    padding 0
    box-sizing  border-box

ul,li
    list-style none//取消默认设置的圆点

.accordion
    display flex
    width 600px
    height 200px
  • 当设置 box-sizing: border-box; 时，元素的宽度和高度将包括内容、内边距和边框。这意味着如果你设置width: 100px，元素的总宽度（内容+padding+border）将不会超过这个值。
  • display flex开启Flex布局：此属性使得元素成为Flex容器，改变了元素内部子元素的布局方式，从常规流布局（block或inline）变为Flex布局。

设置六个小盒子的样式和效果

.accordion
    display flex
    width 600px
    height 200px
    li
        flex 1
        cursor pointer
        line-height 200px
        text-align center
        color white
        transition  flex 500ms// 过渡效果
        &:nth-child(1) 
            background-color #f66// &表示引用上级别,伪类选择器，用于选择父元素的第n个子元素
        &:nth-child(2)
            background-color #6f6
        &:nth-child(3)
            background-color #66f
        &:nth-child(4)
            background-color rgb(198, 39, 203)
        &:nth-child(5)
            background-color rgb(178, 211, 47)
        &:nth-child(6)
            background-color rgb(27, 144, 228)
        &:hover
            flex 2//伪类： 当鼠标悬停在元素上时，应用以下样式：flex 2：将元素的flex属性值改为2。这意味着在鼠标悬停时，这个元素将获得两倍于其他元素的额外空间，从而可能在弹性布局中扩大其尺寸。

&表示引用上级别,伪类选择器，用于选择父元素的第n个子元素

  • 实现钢琴块会变大的效果：
   &:hover
       flex 2

创建伪类： 当鼠标悬停在元素上时，应用以下样式：flex 2：将元素的flex属性值改为2。这意味着在鼠标悬停时，这个元素将获得两倍于其他元素的额外空间，从而可能在弹性布局中扩大其尺寸。

（相当于在原有的六个盒子基础上增加至七个盒子共同瓜分大盒子，而鼠标悬停的元素独占两个盒子）

  • 添加鼠标悬停、缓慢变大的效果

    • 在小盒子样式添加transition flex 500ms的过渡效果

    • cursor pointer 是用来设置元素的鼠标指针样式的

最后输入了stylus common.styl -o common.css output得到CSS代码

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ul,
li {
  list-style: none;
}
.accordion {
  display: flex;
  width: 600px;
  height: 200px;
}
.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: #6f6;
}
.accordion li:nth-child(3) {
  background-color: #66f;
}
.accordion li:nth-child(4) {
  background-color: #c627cb;
}
.accordion li:nth-child(5) {
  background-color: #b2d32f;
}
.accordion li:nth-child(6) {
  background-color: #1b90e4;
}
.accordion li:hover {
  flex: 2;
}

实现效果 弹性布局解决百度面试题流动钢琴块，用Stylus进行CSS的编译

总结

Stylus扩展了CSS的语法，它编译后的输出是标准的CSS，因此可以在任何支持CSS的环境中运行。开发者可以通过编译工具（如Gulp、Webpack等）将Stylus源文件转换为浏览器可识别的CSS文件。

学会使用Stylus实在是泰方便辣，可以快速编译，可以打很多注释，可以减少因为符号带来的报错哈哈哈哈哈

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