如何用stylus编写css完成一道百度面试题——保姆级教学

Melancolie
214 阅读5分钟

在现代网页设计中，手风琴效果被广泛应用于提高用户体验。这种效果通过点击或悬停在某个元素上动态改变布局，使用户可以方便地查看和隐藏内容。本文将详细讲解如何使用css的预处理器stylus创建一个手风琴效果的组件。

效果预览

让我们先看一下最终实现的效果

accordion.gif 是不是跃跃欲试了呢，接下来就让我们一步一步实现他吧！

环境配置

因为我们这次是用css三大预编译处理器中的stylus进行编写，所以我们需要先配置一下环境：

  • 配置安装node.js
  • 在命令行输入
npm install -g stylus

以进行stylus的全局安装

  • 然后在命令行输入
stylus --version

如果显示输出了版本，那么恭喜你，环境配置成功了

环境配置完成后，创建一个stylus文件，随便取个名字，文件名扩展名为styl

image.png

打开文件，输入以下代码来重置浏览器默认样式

*
    margin 0
    padding 0
    box-sizing border-box

其中box-sizing border-box是让border和padding包含在height和width之内，即content+padding+border的宽等于css样式所设置的width，height同理。

眼尖的小伙伴就发现了，你写的css样式不对啊，为什么没有{}和 : ，这是因为我们使用了stylus来编写css，{}，；和 : 统统可以省略，取而代之的是tab缩进，我们只需要在命令行输入

stylus common.styl

就可以将styl文件打包成css文件，默认为原文件名加上.css后缀，当然你也可以指定打包的css文件名

stylus common.styl -o common.css

只需要加上-o 你想取的文件名.css就可以了 如果你嫌每次输指令太麻烦，也可以用

stylus -w common.styl -o common.css

实现一直监听的效果，直接一劳永逸。 stylus是不是和用原始方式比起来更高端大气上档次呢。

说了那么多，前面的终究只是一些准备工作, 接下来让我们正式开始制作手风琴吧。

代码实现

创建一个HTML文件,连接上外部css样式

<link rel="stylesheet" href="common.css">

由效果图可知，先要创建6个块级元素，我们这边使用li，并用父元素ul包裹住他们

    <ul class="accordion">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>

把列表前面的原点去除

ul,ui
    list-style none

众所周知，块级元素会独占一行，那么我们怎么让他们挤在同一行呢，这就涉及到了我们一个css很重要的知识点：弹性布局，我们只需给li的父级元素设置样式

.accordion
    display flex
    width 600px
    height 200px

image.png

这样他们就贴贴在一起啦

接下来再加上颜色、宽高等属性

        li
            flex 1
            cursor pointer              
            line-height 200px
            text-align center
            color white     
            &:nth-child(1)             
                background-color #f66
            &:nth-child(2)              
                background-color blue
            &:nth-child(3)
                background-color #F90
            &:nth-child(4)
                background-color #09F
            &:nth-child(5)
                background-color #9C3
            &:nth-child(6)
                background-color #3C9

记得tab缩进哦

解毒：

  • flex 1是让子元素等比例铺满父元素

  • cursor pointer是让光标悬浮在上面时变成小手

  • line-height是设置两行文字基线间的距离，单行文本中让line-height等于height可以使文本竖直居中，同时设置line-height 200px和text-align center即可让数字居中

  • :nth-child(n) 是选择器，匹配父元素中的第 n 个子元素，注意是从1开始哦。而选择器前面加的&是属于stylus但css没有的，表示上一级，因为在stylus中tab缩进表示下一级，又缩进，又要表示同一级，就要使用&

目前效果图

image.png

可以看出基本雏形已经出来了，接下来我们要怎么实现鼠标悬停上去元素变大的效果呢。这就要用到我们css的伪类选择器hover

&:hover
     flex 2

使鼠标悬浮在的那个元素占父元素的2/7，其他为1/7.效果如下

accordiondemo.gif

但这样是不是太生硬了呢，让我们最后再加一段代码

transition flex 500ms

这样就可以实现开头展示的效果啦。

以下是完整代码

html完整代码：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=">
    <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>

stylus完整代码：

*
    margin 0
    padding 0
    box-sizing border-box

ul,ui
    list-style none

.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
        &:nth-child(2)              
            background-color blue
        &:nth-child(3)
            background-color #F90
        &:nth-child(4)
            background-color #09F
        &:nth-child(5)
            background-color #9C3
        &:nth-child(6)
            background-color #3C9
        &:hover
            flex 2

css完整代码：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ul,
ui {
  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: #00f;
}
.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;
}

总结

通过上述代码，我们创建了一个简单而美观的手风琴效果组件。该组件在用户悬停时会动态改变布局，提供了一个直观的用户交互体验。这种手风琴效果可以应用在各种场景中，如菜单、图片展示等，为网页增添互动性和视觉吸引力。

avatar
文章
阅读
粉丝