target实现手风琴效果

来源：互联网发布：全推数据的股票软件编辑：程序博客网时间：2024/05/16 09:19

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>手风琴</title>        <style type="text/css">            *{                margin: 0;                padding: 0;                list-style: none;                font-weight: normal;            }            ul{                width: 500px;                margin: 50px auto;                padding: 5px;            }            a{                height: 40px;                width: 500px;                background: #ccc;                border-radius: 10px;                line-height: 40px ;                text-indent: 1em;                font-size: 22px;                position: relative;                margin-bottom: 20px;                text-decoration: none;                color:#00f;                display: block;            }            a:after{                content: "";                width: 0;                height: 0;                display: inline-block;                border-width: 6px;                border-style: solid dashed dashed dashed;                border-color: #fff transparent transparent transparent;                position: absolute;                right: 12px;                top: 15px;            }            p{                width: 480px;                height: 70px;                padding: 15px 10px 5px;                margin-bottom: 20px;                line-height: 20px;                overflow: scroll;                overflow-x: hidden;                font-size: 14px;                white-space: normal;                word-break: break-all;                display: none;            }            a:hover, a:active, a:focus, li:target a{                color: #fff;                background: #00f;            }            li:target a:after{                transform: rotate(-90deg);            }            li:target p{                display: block;            }        </style>    </head>    <body>        <ul>            <li id="click1">                <a href="#click1">Brand</a>                <p>                    Wherever you are, and whoever you may be, there is one thing in which you and I are justalike at this monment, and in all the moments of our existence. We are not at rest, we are on a journey. Our life is a movement, a tendency, a steady, ceaseless progress towards an unseen goal.                </p>            </li>            <li id="click2">                <a href="#click2" >Two</a>                <p>                    We are gaining something, or losing something, or losing something, everyday. Even when our position and our character seem to remain precisely the same, they are changing. For the mereadvance of time is a change. It is not the same thing to have a bare field in  January and in July. The season makes the difference. The limitations that are childlike in the child are childish in the man.                </p>            </li>            <li id="click3">                <a href="#click3">Tree</a>                <p >                    Everything that we do is a step in one direction or another. Even the failure to do something is in itself a deed. it sets us forward or backward. the action of the negative pole of a magnetic needle is just as real as the action of the positive pole. To decline is to accept--the other alternative.                </p>            </li>        </ul>    </body></html>

<li id="click1">    <a href="#click1">Brand</a></li>

li的 id=”click1”和a的属性href=”#click1”不能忘记写。
这里写图片描述

0 0