Web前端之实现手风琴效果

最新推荐文章于 2025-03-07 15:45:32 发布

晚风挽着浮云

最新推荐文章于 2025-03-07 15:45:32 发布

阅读量2.4k

点赞数 3

分类专栏： Web前端文章标签： HTML CSS JavaScript 手风琴效果 DOM操作

本文链接：https://blog.csdn.net/weixin_57636278/article/details/123308994

版权

源代码如下所示：如要复制，记得换图哦！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>手风琴效果</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        html, body{
            height: 100%;
        }
        body{
            background-image: url("img/10.jpg");
            background-size: cover;
            background-position: center center;
            position: relative;
        }
        ul{
            width: 800px;
            height: 400px;
            /* margin: 0 auto; */
            /* 万能居中公式 */
            background-color: pink;
            position: absolute;
            top: 50%;