Fatal编程技术网
  • html/
  • 特殊的HTML/CSS手风琴动作

特殊的HTML/CSS手风琴动作

html css

特殊的HTML/CSS手风琴动作,html,css,Html,Css,我正在制作一个与我的网站其他部分风格不同的页面。所以我正在做该页面中的所有HTML和CSS。目前我正在尝试制作一个半复杂（至少对我来说）的手风琴。这就是我希望它的工作方式： 悬停以扩展（达到了那个程度） 单击以保持打开状态，直到单击另一张幻灯片 标题是主手风琴的一部分，但不受悬停和单击的影响 我还计划添加图像以及可能的附加手风琴。内部的手风琴是水平的，主要的手风琴是垂直的 我也设法把这封信封起来了。我一辈子都不能把所有的角落都弄平，这样它们就不会圆了 请记住，我对html和CSS了解不多。我

我正在制作一个与我的网站其他部分风格不同的页面。所以我正在做该页面中的所有HTML和CSS。目前我正在尝试制作一个半复杂（至少对我来说）的手风琴。这就是我希望它的工作方式：

  • 悬停以扩展（达到了那个程度）
  • 单击以保持打开状态，直到单击另一张幻灯片
  • 标题是主手风琴的一部分，但不受悬停和单击的影响
我还计划添加图像以及可能的附加手风琴。内部的手风琴是水平的，主要的手风琴是垂直的

我也设法把这封信封起来了。我一辈子都不能把所有的角落都弄平，这样它们就不会圆了

请记住，我对html和CSS了解不多。我掌握的大部分信息要么是谷歌搜索的，要么是猜测的，要么是事先知道的。我真的很感激能得到的任何帮助

CSS 

/*------------------------------------*\
手风琴
\*------------------------------------*/
.手风琴{
宽度：100%；
溢出：隐藏；
列表样式：无；
边缘底部：10px；
文本阴影：1px1px1pRGBA（0,0,0,0.25）；
背景：透明；
-moz边界半径：10px；
-webkit边界半径：10px；
-o-边界半径：10px；
边界半径：10px；
}
李国章{
浮动：左；
宽度：20%；
溢出：隐藏；
高度：250px；
-moz过渡：宽度0.2s放松；
-webkit过渡：宽度0.2s放松；
-o型过渡：宽度为0.2s；
过渡段：宽度0.2s放松；
-moz转换延迟：0.15s；
-webkit转换延迟：0.15s；
-o-过渡延迟：0.15s；
过渡延迟：0.15s；
}
.李手风琴：第一种{
-moz边界半径：0px 0 0px；
-webkit边界半径：0px 0 0px；
-o-边界半径：0px 0 0px；
边界半径：0px 0 0px；
}
.手风琴李：最后一种{
-moz边界半径：0px 0px 0；
-webkit边界半径：0 0px 0px 0；
-o-边界半径：0px 0px 0；
边界半径：0px 0px 0；
}
·手风琴部{
填充：10px；
}
.手风琴：哈弗·李{
宽度：10%；
}
.李手风琴：悬停{
宽度：30%；
}
.slide-01{背景：白色；颜色：#333；文本阴影：无；}
.slide-02{背景：白色；颜色：#333；文本阴影：无；}
.slide-03{背景：白色；颜色：#333；文本阴影：无；}
.slide-04{背景：白色；颜色：#333；文本阴影：无；}
.slide-05{背景：白色；颜色：#333；文本阴影：无；}
/*------------------------------------*\
垂直的
\*------------------------------------*/
#垂直的{
高度：600px；
}
#垂直li{
浮动：无；
身高：5%；
宽度：100%；
-moz过渡：高度0.2s放松；
-webkit过渡：高度为0.2秒；
-o型过渡：高度为0.2s；
过渡段：高度0.2s放松；
}
#垂直李：第一种类型{
-moz边界半径：10px 10px 0；
-webkit边界半径：10px 10px 0；
-o-边界半径：10px 10px 0；
边界半径：10px 10px 0；
}
#垂直li：类型的最后一个{
-moz边界半径：0 10px 10px；
-webkit边界半径：0 10px 10px；
-o-边界半径：0 10px 10px；
边界半径：0 10px 10px；
}
#垂直：悬停李{
身高：10%；
宽度：100%；
}
#垂直方向：悬停{
身高：30%；
宽度：100%；
}
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>



    

  • 
»幻灯片一
Lorem ipsum dolor sit amet，是一位杰出的献身者。马萨洛博蒂斯酒店。维韦拉·维利特·利奥，坐在我的元素上。这是我的生日。斜纹面箭毒副箭毒副箭毒副箭毒副箭毒副箭毒副箭毒副箭毒副箭毒副箭毒副箭毒副箭毒副箭毒副箭毒副箭毒副箭毒副箭毒副箭毒副箭毒副箭毒副箭毒副。阿利奎姆·森佩尔·莫里斯坐在我的位子上，只是暂时的、巨大的。这是我的生日礼物。阿利奎姆·埃拉特·洛雷姆，但艾库利斯·胡斯托。艾蒂亚姆·马蒂斯是一位尊贵的孕妇。这是一个很好的例子。在马萨的国际会议上，所有会议都将举行。梅塞纳的精英夸姆，埃吉斯塔，埃吉特·普莱斯特拉特·诺，弗林利亚·韦尔厄罗斯。Nam Vehicleula elementum nullas sed consequeat。Phasellus eu erat enim。在欧盟学识中的magna non massa dapibus scelerisque实习
    

    • 

  • 
»幻灯片二
Lorem ipsum dolor sit amet，是一位杰出的献身者。马萨洛博蒂斯酒店。维韦拉·维利特·利奥，坐在我的元素上。这是我的生日。斜纹面箭毒副箭毒副箭毒副箭毒副箭毒副箭毒副箭毒副箭毒副箭毒副箭毒副箭毒副箭毒副箭毒副箭毒副箭毒副箭毒副箭毒副箭毒副箭毒副箭毒副箭毒副。阿利奎姆·森佩尔·莫里斯坐在我的位子上，只是暂时的、巨大的。这是我的生日礼物。阿利奎姆·埃拉特·洛雷姆，但艾库利斯·胡斯托。艾蒂亚姆·马蒂斯是一位尊贵的孕妇。这是一个很好的例子。无一个连续的内部马萨，vel门埃尼姆外翻。梅塞纳的精英夸姆，埃吉斯塔，埃吉特·普莱斯特拉特·诺，弗林利亚·韦尔厄罗斯。Nam Vehicleula elementum nullas sed consequeat。Phasellus eu erat enim。在欧盟学识中的magna non massa dapibus scelerisque实习
    

    • 

  • 
»幻灯片三
Lorem ipsum dolor sit amet，是一位杰出的献身者。马萨洛博蒂斯酒店。维韦拉·维利特·利奥，坐在我的元素上。这是我的生日。斜纹面箭毒副箭毒副箭毒副箭毒副箭毒副箭毒副箭毒副箭毒副箭毒副箭毒副箭毒副箭毒副箭毒副箭毒副箭毒副箭毒副箭毒副箭毒副箭毒副箭毒副箭毒副。阿利奎姆·森佩尔·莫里斯坐在我的位子上，只是暂时的、巨大的。这是我的生日礼物。阿利奎姆·埃拉特·洛雷姆，但艾库利斯·胡斯托。艾蒂亚姆·马蒂斯是一位尊贵的孕妇。这是一个很好的例子。在马萨的国际会议上，所有会议都将举行。梅塞纳的精英夸姆，埃吉斯塔，埃吉特·普莱斯特拉特·诺，弗林利亚·韦尔厄罗斯。Nam Vehicleula elementum nullas sed consequeat。Phasellus eu erat enim。在欧盟学识中的magna non massa dapibus scelerisque实习
    

    • 

  • 
»幻灯片四
Lorem ipsum dolor sit amet，是一位杰出的献身者。马萨洛博蒂斯酒店。维韦拉·维利特·利奥，坐在我的元素上。Fusce posuere nunc a

    <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>

    

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