Question

我正在开发一个与我网站其他部分具有独立样式的页面。所以我在那个页面里做了所有的HTML和CSS。目前我正试图制作一个半复合体（至少对我而言）手风琴。这就是我希望它的工作方式：

悬停以扩展（到目前为止）
单击以保持打开，直到单击另一张幻灯片
有一个标题是主手风琴的一部分但不受悬停和点击的影响

我还计划在其中添加图像以及可能的其他手风琴。内部手风琴是水平的，主要手风琴是垂直的。

我也成功地把这个搞定了。我不能因为我的生活把所有的角落弄平，所以他们不会圆。

请记住，我对html和CSS知之甚少。我所拥有的大部分内容都是谷歌搜索，猜测或先前的知识。我真的很感激我能得到的任何帮助。

的 CSS

    <style>

/*------------------------------------*\
    ACCORDION
\*------------------------------------*/

.accordion{
    width:100%;
    overflow:hidden;
    list-style:none;
    margin-bottom:10px;
    text-shadow:1px 1px 1px rgba(0,0,0,0.25);
    background:transparent;

    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    -o-border-radius:10px;
    border-radius:10px;
}
.accordion li{
    float:left;
    width:20%;
    overflow:hidden;
    height:250px;
    -moz-transition:width 0.2s ease-out;
    -webkit-transition:width 0.2s ease-out;
    -o-transition:width 0.2s ease-out;
    transition:width 0.2s ease-out;
    -moz-transition-delay:0.15s;
    -webkit-transition-delay:0.15s;
    -o-transition-delay:0.15s;
    transition-delay:0.15s;
}
.accordion li:first-of-type{
    -moz-border-radius:0px 0 0 0px;
    -webkit-border-radius:0px 0 0 0px;
    -o-border-radius:0px 0 0 0px;
    border-radius:0px 0 0 0px;
}
.accordion li:last-of-type{
    -moz-border-radius:0 0px 0px 0;
    -webkit-border-radius:0 0px 0px 0;
    -o-border-radius:0 0px 0px 0;
    border-radius:0 0px 0px 0;
}
.accordion div{
    padding:10px;
}
.accordion:hover li{
    width:10%;
}
.accordion li:hover{
    width:30%;
}
.slide-01  { background:white; color:#333; text-shadow:none; }
.slide-02  { background:white; color:#333; text-shadow:none; }
.slide-03  { background:white; color:#333; text-shadow:none; }
.slide-04  { background:white; color:#333; text-shadow:none; }
.slide-05  { background:white; color:#333; text-shadow:none; }

/*------------------------------------*\
    VERTICAL
\*------------------------------------*/
#vertical{
    height:600px;
}
#vertical li{
    float:none;
    height:5%;
    width:100%;
    -moz-transition:height 0.2s ease-out;
    -webkit-transition:height 0.2s ease-out;
    -o-transition:height 0.2s ease-out;
    transition:height 0.2s ease-out;
}
#vertical li:first-of-type{
    -moz-border-radius:10px 10px 0 0;
    -webkit-border-radius:10px 10px 0 0;
    -o-border-radius:10px 10px 0 0;
    border-radius:10px 10px 0 0;
}
#vertical li:last-of-type{
    -moz-border-radius:0 0 10px 10px;
    -webkit-border-radius:0 0 10px 10px;
    -o-border-radius:0 0 10px 10px;
    border-radius:0 0 10px 10px;
}
#vertical:hover li{
    height:10%;
    width:100%;
}
#vertical li:hover{
    height:30%;
    width:100%;
}
</style>

HTML

<div>
<ul class="accordion" id="vertical">
  <li class="slide-01">
    <div>
      <h2>» Slide one</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque in eu lorem.</p>
    </div>
  </li>
  <li class="slide-02">
    <div>
      <h2>» Slide two</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque in eu lorem.</p>
    </div>
  </li>
  <li class="slide-03">
    <div>
      <h2>» Slide three</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque in eu lorem.</p>
    </div>
  </li>
  <li class="slide-04">
    <div>
      <h2>» Slide four</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque in eu lorem.</p>
    </div>
  </li>
    <li class="slide-05">
    <div>
      <h2>» Slide Five</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque in eu lorem.</p>
    </div>
  </li>
</ul>
</div>

Answer 1

我没有看到你调用javascript来创建动作。

请查看此链接。

http://www.codeproject.com/Articles/125398/Java-Accordion-Menu-Visual-Effects-and-Customizati

对于圆角，您必须从CSS文件中删除以下代码

-moz-border-radius:10px;
-webkit-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;

这就是围绕元素的角落。

希望这有帮助

特殊的HTML / CSS手风琴动作

的 CSS

1 个答案: