如何用HTML和css实现简单的手风琴菜单效果,附带详细注释

超完整的代码+详细注释,适合给小白做的简单的手风琴菜单实例
代码:


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        /* 清除默认样式 */
        * {
            /* 外边距 */
            margin: 0;
            /* 内边距 */
            padding: 0;
        }

        a {
            /* 去掉 a标签 默认下划线 */
            text-decoration: none;
        }

        /* ***********以上为公共样式 ************ */
        .box {
            /* 宽度 */
            width: 728px;
            /* 高度 */
            height: 340px;
            /* 外边距  上下100px  左右居中 */
            margin: 100px auto;
        }

        .box div {
            /* 超出盒子大小隐藏多余内容   这里默认用子元素a标签 撑开父元素div 的高度 */
            overflow: hidden;
            /* 底部外边距10px */
            margin-bottom: 10px;
        }

        .box a {
            height: 50px;
            /* 内联元素转变为块元素 */
            display: block;
            /* a标签背景颜色设置 */
            background-color: #b1b1b1;
            /* 字体颜色 */
            color: #fff;
            /* 行高  上下对齐字体 */
            line-height: 50px;
            /* 内边距左边 距离a标签d的border外边框距离设置为15px */
            padding-left: 15px;
            /* 设置边框圆角 */
            border-radius: 5px;
            /* 相对定位   为呼应子元素 i 定位*/
            position: relative;
        }

        /* 三角形样式 */
        .box i {
            /* 内联元素转变为块元素 */
            display: block;
            /* 给 i 设置宽高  */
            width: 0px;
            height: 0px;
            /* 边框:  大小10px 实线  颜色 */
            border: 10px solid #000;
            /* 边框颜色 白色  透明 透明 透明 */
            border-color: #fff transparent transparent transparent;
            /* 根据父元素 a标签 绝对定位 */
            position: absolute;
            /* 三角形相对于 a标签 位置 */
            right: 11px;
            top: 22px;
        }

        p {
            height: 0;
            /* 设置竖直滑动条 */
            overflow-y: scroll;
            /* 内边距左边  由于我们没有给p标签设置宽度,所以这里就不用了再另外减去宽度或者设置怪异盒子模型(box-sizing: border-box;) */
            padding-left: 10px;
            /* 设置浏览p标签时间过渡  这里仅设置高度过渡 时间为2s */
            transition: height 2s;
        }

        /* 目标伪类选择器(点击后效果) */
        :target p {
            /* 固定p标签高度 */
            height: 153px;
            background-color: green;
        }


        :target a {
            /* 背景颜色 */
            background-color: #3d98e9;
        }

        :target i {
            /* 边框颜色 白色  透明 透明 透明 */
            border-color: transparent transparent transparent #fff;
            /* 三角形相对于 a标签 位置 */
            top: 16px;
            right: 8px;
        }
    style>
head>

<body>
    <div class="box">
        <div id="box1">
            <a href="#box1">Brand<i>i>a>
            <p>

            p>
        div>
        <div id="box2">
            <a href="#box2">Promotion<i>i>a>
            <p>

            p>
        div>
        <div id="box3">
            <a href="#box3">Event<i>i>a>
            <p>

            p>
        div>
    div>
body>

html>

实现效果
打开html文件 效果如下图:
如何用HTML和css实现简单的手风琴菜单效果,附带详细注释_第1张图片
分别点击每个块,实现手风琴效果如下:
如何用HTML和css实现简单的手风琴菜单效果,附带详细注释_第2张图片

如何用HTML和css实现简单的手风琴菜单效果,附带详细注释_第3张图片

border-color解释
边框颜色 上 右 下 左
border-color: red green blue yellow;
在这里插入图片描述
/* 边框颜色 白色 透明 透明 透明 (不显示颜色)*/
border-color: #fff transparent transparent transparent ;
在这里插入图片描述
绝对定位( position 属性):
说明:这个属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。
默认值: static
继承性: no
版本: CSS2
JavaScript 语法: object.style.position=“absolute”
如何用HTML和css实现简单的手风琴菜单效果,附带详细注释_第4张图片

你可能感兴趣的:(html与css实例,css,html,css3,定位)