HTML CSS-手风琴的样式_Html_Css

HTML CSS-手风琴的样式

html css

HTML CSS-手风琴的样式,html,css,Html,Css,我正在尝试使用HTML和CSS创建手风琴，但遇到了一些问题：演示：问题1-除第一个标签外，每个标签的顶部应有1px虚线#C5B7A6边框。当我创建类型为：first或：first child的伪元素时，它什么都不做为什么第一个边界不能自行移除问题2-检查/打开标签后，其标题颜色必须为#EF7C4D 打开或选中标签后，如何将其颜色更改为白色，然后在关闭后返回白色第3期-每篇文章中的文本应具有不透明度：0，然后在打开时设置为1。当我将其设置为0时，效果很好，但一旦打开文本，将其淡

我正在尝试使用HTML和CSS创建手风琴，但遇到了一些问题：

演示：

问题1-除第一个标签外，每个标签的顶部应有

1px虚线#C5B7A6

边框。当我创建类型为

：first

或

：first child

的伪元素时，它什么都不做

为什么第一个边界不能自行移除

问题2-检查/打开标签后，其标题颜色必须为

#EF7C4D

打开或选中标签后，如何将其颜色更改为白色，然后在关闭后返回白色

第3期-每篇文章中的文本应具有

不透明度：0

，然后在打开时设置为1。当我将其设置为0时，效果很好，但一旦打开文本，将其淡入将不起作用

这怎么可能呢

第4期-每一篇文章都应该有一个由内容量决定的

高度自动设置。如果我移除高度：150px我松开了过渡效果（逐渐向下滑动打开）

有没有办法让它在不使用固定高度的情况下以同样的效果工作

HTML
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Accordion with CSS3</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="css/style.css" />
        <link href='http://fonts.googleapis.com/css?family=Oswald:300' rel='stylesheet' type='text/css'>
    </head>

    <body>
        <div id="container">
            <section class="ac-container">
                <div>
                    <input id="ac-1" name="accordion-1" type="checkbox" checked />
                    <label for="ac-1">Label One</label>
                    <article>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque varius arcu lectus, sit amet tempus nibh. Integer quis eros sed dui varius luctus in non ipsum. Proin congue, nibh nec rhoncus fermentum, ipsum magna imperdiet libero, id viverra lorem nisi ac ante. Integer eu tortor ac nunc pulvinar fermentum vel vulputate enim. Curabitur id diam urna. Vestibulum venenatis malesuada mauris, rhoncus ullamcorper tortor dictum vel. Fusce luctus metus id felis ultricies lacinia. Praesent luctus varius augue, id consectetur eros iaculis sit amet. Fusce tempor dolor ut leo tempus sit amet ornare eros cursus. Nulla dui dolor, posuere vel vestibulum ac, sollicitudin sed enim. Mauris ac vestibulum enim. Vivamus nulla nulla, tincidunt ut elementum quis, posuere eget velit. Nullam placerat blandit cursus. </p>
                    </article>
                </div>

                <div>
                    <input id="ac-2" name="accordion-1" type="checkbox" />
                    <label for="ac-2">Label Two</label>
                    <article>
                        <p>Vestibulum viverra, nisl in aliquet malesuada, ipsum tellus cursus nibh, et pellentesque lorem quam eu arcu. Vivamus ultricies gravida aliquam. Maecenas quis est lectus, in laoreet mi. Pellentesque eleifend nunc ac mi tempus laoreet. Maecenas sit amet nisi massa, ac laoreet arcu. Curabitur accumsan auctor adipiscing. Curabitur lacinia molestie nisi, sit amet sollicitudin neque aliquet eu. In lacus nisi, porttitor nec euismod sed, hendrerit sed eros. Integer eu felis velit, a vulputate mauris. Etiam dui magna, convallis vel tristique non, pharetra eu erat. Duis suscipit lectus quis elit volutpat sit amet semper elit dapibus. </p>
                    </article>
                </div>

                <div>
                    <input id="ac-3" name="accordion-1" type="checkbox" />
                    <label for="ac-3">Label Three</label>
                    <article>
                        <p>Maecenas vitae mattis dolor. Cras sit amet elit ac mi facilisis iaculis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sollicitudin scelerisque justo eu bibendum. Nam ac odio tellus. Suspendisse tristique lectus vel mi tristique tristique. Morbi sed auctor libero. Aliquam sagittis vestibulum felis, ut varius tellus venenatis vitae. Donec ac nisi sem, et imperdiet nulla. Mauris vel nulla justo, in volutpat libero. Fusce vestibulum rutrum nibh vel scelerisque. Curabitur viverra libero nec enim adipiscing et venenatis ante auctor.</p>
                    </article>
                </div>

                <div>
                    <input id="ac-4" name="accordion-1" type="checkbox" />
                    <label for="ac-4">Label Four</label>
                    <article>
                        <p>Phasellus lobortis sapien et risus imperdiet tempor. Integer vestibulum ligula a velit eleifend rutrum. Nam erat magna, lacinia quis porta tempus, vulputate ac odio. Praesent vel mi vel purus malesuada convallis. Sed tincidunt euismod tortor. Mauris leo nibh, semper nec sodales sit amet, faucibus vel nunc. Morbi quis nibh quis diam semper blandit. Fusce vitae viverra sem. Phasellus tempor nunc in urna eleifend fermentum varius felis pretium. Mauris convallis felis vel massa vehicula ut ullamcorper est imperdiet. In orci leo, ullamcorper in varius a, aliquam id libero. Nam urna metus, dignissim sit amet egestas eu, sollicitudin ac lorem. Fusce ac libero sem, nec porttitor dui.</p>
                    </article>
                </div>

                <div>
                    <input id="ac-5" name="accordion-1" type="checkbox" />
                    <label for="ac-5">Label Five</label>
                    <article>
                        <p>Duis lectus tortor, malesuada vel viverra in, aliquam nec metus. Cras euismod enim et enim lacinia eleifend. Nunc ornare, mauris eleifend scelerisque suscipit, metus lorem rhoncus est, in porttitor mi ipsum at erat. Phasellus fermentum elit et purus tincidunt vel bibendum enim tincidunt. Etiam posuere risus id dolor volutpat nec auctor risus aliquet. Sed ac erat porttitor odio interdum venenatis et at arcu. Aenean quis massa ut sem tincidunt suscipit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In pellentesque, lorem vitae ultrices posuere, elit nibh tincidunt nibh, nec lacinia diam sapien eu mauris. Sed euismod risus non libero imperdiet in fermentum elit vehicula. Vestibulum orci mi, sodales eu pellentesque at, ornare eu ipsum. Phasellus eget dolor ipsum, varius rhoncus turpis. Donec consectetur convallis ornare. </p>
                    </article>
                </div>

                <div>
                    <input id="ac-6" name="accordion-1" type="checkbox" />
                    <label for="ac-6">Label Six</label>
                    <article>
                        <p>Nullam hendrerit varius risus in vestibulum. Integer mattis gravida arcu, ut bibendum leo sagittis eget. In consectetur lorem adipiscing sem tincidunt placerat. Vestibulum sit amet lacus ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit amet justo dui, id consectetur ipsum. Ut hendrerit convallis nunc, eu mollis nulla ornare dapibus. Proin quam nulla, mollis eget laoreet ut, blandit id velit. Curabitur a odio risus, a cursus tortor. Aliquam erat volutpat. Vivamus eros odio, semper vel volutpat vel, commodo in eros. Sed porttitor malesuada nisi sed mattis. Etiam feugiat consequat rutrum. Sed in mi nunc, ornare tristique erat. Vestibulum a ligula dui. </p>
                    </article>
                </div>

                <div>
                    <input id="ac-7" name="accordion-1" type="checkbox" />
                    <label for="ac-7">Label Seven</label>
                    <article>
                        <p>Nullam elit ipsum, blandit nec dictum hendrerit, rutrum vitae ante. Sed accumsan porttitor placerat. Nullam feugiat congue rutrum. Morbi at quam eu mauris egestas dictum eget id odio. Maecenas sed turpis non nunc dapibus placerat. Vestibulum mattis auctor risus, in fringilla erat venenatis quis. Fusce posuere congue massa, sed semper odio iaculis porttitor.</p>
                    </article>
                </div>

                <div>
                    <input id="ac-8" name="accordion-1" type="checkbox" />
                    <label for="ac-8">label Eight</label>
                    <article>
                        <p>Integer quis lectus nec tellus egestas volutpat commodo bibendum massa. Phasellus iaculis iaculis magna, et semper nunc mattis quis. Praesent dictum, quam id sodales ornare, erat nibh dapibus nibh, eget porttitor dui sem et erat. Praesent lobortis vulputate nulla, nec sagittis justo ultrices eu. Sed at consectetur lacus. Cras molestie dictum lorem, ut tincidunt magna malesuada in. Praesent posuere mi eget justo mattis hendrerit. Proin vitae quam justo. Donec consequat mauris sed dui eleifend vitae dictum risus faucibus. Curabitur gravida consequat mi, ut hendrerit metus laoreet sed. Cras in justo quis neque hendrerit cursus ac vel eros. Sed pretium, lectus sed tempus lacinia, ipsum sapien dapibus elit, quis sodales nisl tortor quis sem. Donec aliquam nibh eget tellus ornare porta. Phasellus bibendum diam et mi pulvinar pellentesque.</p>
                    </article>
                </div>
            </section> <!-- .ac-container -->
        </div> <!-- #container -->
    </body>
</html>

问题1：因为标签
s不是ac容器
的子项。如果您将上边框放在div
s上，它就会工作
问题2：选择器应为。ac容器输入[type='checkbox']：选中+标签
，因为标签本身未选中。此外，标签的颜色将被默认颜色覆盖，因此请尝试放置一个！重要信息
了解其工作原理
问题3：我这样说：
.ac-container input:checked ~ article {
    opacity: 1;

    -webkit-transition: opacity,height 0.5s,0.5s ease-in-out;
    -moz-transition: opacity,height 0.5s,0.5s ease-in-out;
    -o-transition: opacity,height 0.5s,0.5s ease-in-out;
    -ms-transition: opacity,height 0.5s,0.5s ease-in-out;
    transition: opacity,height 0.5s,0.5s ease-in-out;
}

.ac-container article{
    opacity:0;

    -webkit-transition: opacity,height 0.3s,0.3s ease-in-out;
    -moz-transition: opacity,height 0.3s,0.3s ease-in-out;
    -o-transition: opacity,height 0.3s,0.3s ease-in-out;
    -ms-transition: opacity,height 0.3s,0.3s ease-in-out;
    transition: opacity,height 0.3s,0.3s ease-in-out;


}

问题4：似乎您需要指定高度，除非您使用javascript:同时使用CSS3及其选择器也很好。请注意，IE8及以下版本不会识别这些高度，如果可以的话，那就酷了，但是也许值得一看Jquerys的slideToggle手风琴方法，我假设SO正在练习CSS3，因为他/她在问题中广泛使用它：）是的，CSS3很棒，我自己也经常使用它，只是想指出跨浏览器兼容性，尽管IE8和以下的删除越快越好：）哈哈，太糟糕了，即使IE6仍然在逃！在生产的情况下，我肯定会选择javascript的任何花式效果（如果这是必要的）。CSS3玩起来很有趣，但它的缺点是，它更简单、更优雅，因此在实际中使用它会引起争议
.ac-container input:checked ~ article {
    opacity: 1;

    -webkit-transition: opacity,height 0.5s,0.5s ease-in-out;
    -moz-transition: opacity,height 0.5s,0.5s ease-in-out;
    -o-transition: opacity,height 0.5s,0.5s ease-in-out;
    -ms-transition: opacity,height 0.5s,0.5s ease-in-out;
    transition: opacity,height 0.5s,0.5s ease-in-out;
}

.ac-container article{
    opacity:0;

    -webkit-transition: opacity,height 0.3s,0.3s ease-in-out;
    -moz-transition: opacity,height 0.3s,0.3s ease-in-out;
    -o-transition: opacity,height 0.3s,0.3s ease-in-out;
    -ms-transition: opacity,height 0.3s,0.3s ease-in-out;
    transition: opacity,height 0.3s,0.3s ease-in-out;


}