爬行的蜗牛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
热搜: golang Linux PHP
查看: 20|回复: 0

纯CSS折叠面板

[复制链接]

152

主题

48

回帖

1137

积分

管理员

积分
1137
发表于 昨天 22:04 | 显示全部楼层 |阅读模式
640.gif

HTML
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Page Title</title>
  5.   <script src="https://unpkg.com/ionicons@5.1.2/dist/ionicons.js"></script>
  6.   <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500&display=swap" rel="stylesheet">
  7.   <link href="https://unpkg.com/ionicons@4.5.10-0/dist/css/ionicons.min.css" rel="stylesheet">
  8. </head>
  9. <body>

  10.   <section>
  11.     <div class="container">
  12.       <div class="accordion">
  13.         <div class="accordion-item" id="question1">
  14.           <a class="accordion-link" href="#question1">
  15.             <div class="flex">
  16.               <h3>BRANDING</h3>
  17.               <ul>
  18.                 <li>#Figma</li>
  19.                 <li>#Sketch</li>
  20.                 <li>#Adobe</li>
  21.                 <li>#Invision</li>
  22.                 <li>#Protopie</li>
  23.               </ul>
  24.             </div>
  25.             <i class="icon ion-md-arrow-forward"></i>
  26.             <i class="icon ion-md-arrow-down"></i>
  27.           </a>
  28.           <div class="answer">
  29.             <p> We believe in the greater good, we strive to do something for people, we aim to make their lives easier and more enjoyable, we love businesses that keep this</p>
  30.           </div>
  31.           <hr>
  32.       </div>
  33.         <div class="accordion-item" id="question2">
  34.           <a class="accordion-link" href="#question2">
  35.             <div class="flex">
  36.               <h3>UX/UI DESIGN</h3>
  37.               <ul>
  38.                 <li>#Figma</li>
  39.                 <li>#Sketch</li>
  40.                 <li>#Adobe</li>
  41.                 <li>#Invision</li>
  42.                 <li>#Protopie</li>
  43.               </ul>
  44.             </div>
  45.             <i class="icon ion-md-arrow-forward"></i>
  46.             <i class="icon ion-md-arrow-down"></i>
  47.           </a>
  48.           <div class="answer">
  49.             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
  50.           </div>
  51.           <hr>
  52.       </div>
  53.         <div class="accordion-item" id="question3">
  54.           <a class="accordion-link" href="#question3">
  55.             <div class="flex">
  56.               <h3>FRONTEND DEVELOPMENT</h3>
  57.               <ul>
  58.                 <li>#Figma</li>
  59.                 <li>#Sketch</li>
  60.                 <li>#Adobe</li>
  61.                 <li>#Invision</li>
  62.                 <li>#Protopie</li>
  63.               </ul>
  64.             </div>
  65.             <i class="icon ion-md-arrow-forward"></i>
  66.             <i class="icon ion-md-arrow-down"></i>
  67.           </a>
  68.           <div class="answer">
  69.             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
  70.           </div>
  71.           <hr>
  72.       </div>
  73.         <div class="accordion-item" id="question4">
  74.           <a class="accordion-link" href="#question4">
  75.             <div>
  76.               <h3>BACKEND DEVELOPMENT</h3>
  77.               <ul>
  78.                 <li>#Figma</li>
  79.                 <li>#Sketch</li>
  80.                 <li>#Adobe</li>
  81.                 <li>#Invision</li>
  82.                 <li>#Protopie</li>
  83.               </ul>
  84.             </div>
  85.             <i class="icon ion-md-arrow-forward"></i>
  86.             <i class="icon ion-md-arrow-down"></i>
  87.           </a>
  88.           <div class="answer">
  89.             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
  90.           </div>
  91.           <hr>
  92.       </div>
  93.      </div>
  94.     </div>
  95.   </section>

  96. </body>
  97. </html>
复制代码
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表