CSS3는 반응형 아코디언을 구현합니다.-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS3는 반응형 아코디언을 구현합니다.

Guanhui

Jun 22, 2020 pm 01:13 PM

css3 반응형 아코디언

CSS3는 반응형 아코디언을 구현합니다.

최근 외국 마스터가 CSS3를 사용해 아코디언 효과를 구현하는 영상을 봤는데, 공부한 후 작성하고 향후 검토를 용이하게 하기 위해 블로그 형식으로 기록했습니다. 코드 구조는 다음과 같습니다. 글꼴은 Genericons):

추천 비디오 튜토리얼: "CSS Video Tutorial - Jade Girl Heart Sutra Edition"

최종 효과는 다음과 같습니다:

전체 화면일 때:

화면 너비가 960px 미만인 경우:

아래로 내려와 페이지 기본 구조 살펴보기(index.html):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <p class="container">
      <!--标题-->
    <header>
      <h1>Follow me on social media</h1>
    </header>
      
      <!--手风琴部分-->
    <ul class="accordion">
      <li class="tab">
        <p class="social youtube">
          <a href="#">YouTube</a>
        </p>
        <p class="content">
          <h1>YouTube</h1>
          <p>Lorem ipsum dolor sit amet consectetur 
            adipisicing elit.Culpa, consectetur.</p>
        </p>
      </li>
      <li class="tab">
        <p class="social facebook">
          <a href="#">Facebook</a>
        </p>
        <p class="content">
          <h1>Facebook</h1>
          <p>Lorem ipsum dolor sit amet consectetur 
            adipisicing elit.Culpa, consectetur.</p>
        </p>
      </li>
      <li class="tab">
        <p class="social twitter">
          <a href="#">Twitter</a>
        </p>
        <p class="content">
          <h1>Twitter</h1>
          <p>Lorem ipsum dolor sit amet consectetur 
            adipisicing elit.Culpa, consectetur.</p>
        </p>
      </li>
      <li class="tab">
        <p class="social instagram">
          <a href="#">Instagram</a>
        </p>
        <p class="content">
          <h1>Instagram</h1>
          <p>Lorem ipsum dolor sit amet consectetur 
            adipisicing elit.Culpa, consectetur.</p>
        </p>
      </li>
      <li class="tab">
        <p class="social linkedin">
          <a href="#">Linkedin</a>
        </p>
        <p class="content">
          <h1>Linkedin</h1>
          <p>Lorem ipsum dolor sit amet consectetur 
            adipisicing elit.Culpa, consectetur.</p>
        </p>
      </li>
       <li class="tab">
        <p class="social github">
          <a href="#">Github</a>
        </p>
        <p class="content">
          <h1>Github</h1>
          <p>Lorem ipsum dolor sit amet consectetur 
            adipisicing elit.Culpa, consectetur.</p>
        </p>
      </li>
    </ul>
  </p>
</body>
</html>

로그인 후 복사

스타일(style.css):

*{
  margin: 0;
  padding: 0;
  border: none;
}

body{
  font-family: Arial, Helvetica, sans-serif;
  background-color: #222;
  color: #fff;
}

/*设置字体,因为后面的图标需要用到*/
@font-face {
  font-family: &#39;Genericons&#39;;
  src: url(&#39;font/genericons-regular-webfont.woff&#39;) format(&#39;woff&#39;),
  url(&#39;font/genericons-regular-webfont.eot&#39;) format(&#39;truetype&#39;);
}

/*设置外面容器的宽度*/
.container{
  width: 80%;
  margin: 20px auto;
}

header h1{
  font-size: 2rem;
  padding: 1rem;
  text-align: center;
}

/*注意这里font-size设置为0,不然会出现非常糟糕的画面,我们后面再去单独对需要现实的文本设置字体大小
,因为a链接不想让它显示内容*/
.accordion{
  width: 100%;
  min-width: 800px;
  height: 200px;
  background-color: #333;
  list-style: none;
  display: block;
  overflow: hidden;
  font-size: 0;
}

/*对每一个li设置为inline-block,让其排列在一行,溢出隐藏,因为.tab下面的.content宽度为360,而且.tab只有在hover的时候宽度才会变成450px,那时候.content刚好显示.另外设置过渡,使其宽度增长的过程平缓*/
.tab{
  width: 80px;
  height: 100%;
  display: inline-block;
  position: relative;
  margin: 0;
  background-color: #444;
  border: 1px solid #333;
  overflow: hidden;
  transition: all .5s ease .1s;
}

.tab:hover{
  width: 450px;
}
.tab:hover .social a:after{
  transform: translateX(-80px);
}
.tab:hover .social a:before{
  transform: translateX(-100px);
}

/*设置定位为相对定位,不然.content会有部分内容被遮住*/
.tab .content{
  position: relative;
  width: 360px;
  height: 100%;
  background-color: #fff;
  color: #333;
  margin-left: 80px;
  padding: 50px 0 0 15px;
}

.tab .content h1{
  font-size: 2.5rem;
  margin-top: 20px;
}
.tab .content p{
  font-size: .85rem;
  line-height: 1.6;
}

/设置为元素的宽高及字体为Genericons,不然图标无法显现,只会显示白色的空框框/
.social a:before,
.social a:after{
  position: absolute;
  width: 80px;
  height: 200px;
  display: block;
  text-indent: 0;
  padding-top: 90px;
  padding-left: 25px;
  font:normal 30px Genericons;
  color: #fff;
  transition: all .5s ease;
}

/*因为当我们hover上去的时候图标会更大,所以after伪类的字体及padding要重新设置,同时
要将margin-left设置为80px,这要默认情况下显示的就是before伪类的小图标*/
.social a:after{
  font-size: 48px;
  padding-top: 80px;
  padding-left: 20px;
  margin-left: 80px;
}

/*Add icons*/
.youtube a:before,
.youtube a:after{
  content: &#39;\f213&#39;;
}

.youtube a:after{
  background-color: #fc0000;
}

.twitter a:before,
.twitter a:after{
  content: &#39;\f202&#39;;
}

.twitter a:after{
  background-color: #6dc5dd;
}

.facebook a:before,
.facebook a:after{
  content: &#39;\f204&#39;;
}

.facebook a:after{
  background-color: #3b5998;
}

.linkedin a:before,
.linkedin a:after{
  content: &#39;\f208&#39;;
}

.linkedin a:after{
  background-color: #00a9cd;
}

.instagram a:before,
.instagram a:after{
  content: &#39;\f215&#39;;
}

.instagram a:after{
  background-color: #6dc993;
}

.github a:before,
.github a:after{
  content: &#39;\f200&#39;;
}

.github a:after{
  background-color: #6e5494;
}

/*当屏幕最大宽度为960px时*/
@media(max-width:960px){
  .container{
    width: 70%;
  }
    /*让高度为auto*/
  .accordion{
    min-width: 450px;
    height: auto;
  }

    /*让li显示为block,这样就会依次往下排*/
  .tab{
    width: 100%;
    display: block;
    border-bottom: 1px solid #333;
  }
    /*这个一定要设置,因为原本的.tab:hover时宽度为450px,假如.tab的宽度有600px,在hover时就回剩余150px的空白,不是我们想要的效果*/
  .tab:hover{
    width: 100%;
  }
  .tab .content{
    width: 85%;
  }
    /*设置对应伪类的padding值,使其大概显示在中间*/
  .social a:before{
    padding-top: 60px;
    padding-left: 25px;
  }
  .social a:after{
    padding-top: 50px;
    padding-left: 20px;
  }
}

로그인 후 복사

추천 튜토리얼: "CSS Tutorial"

위 내용은 CSS3는 반응형 아코디언을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

뜨거운 도구

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7412

Cakephp 튜토리얼

1359

Steam의 계정 이름 형식은 무엇입니까?

Win11 활성화 키 영구

Related knowledge

반응형 이미지 자동 캐러셀 효과를 구현하기 위해 CSS를 사용하는 방법에 대한 튜토리얼 Nov 21, 2023 am 08:37 AM

모바일 장치의 인기로 인해 웹 디자인에서는 좋은 사용자 경험을 달성하기 위해 장치 해상도 및 다양한 단말기의 화면 크기와 같은 요소를 고려해야 합니다. 웹 사이트의 반응형 디자인을 구현할 때 이미지 캐러셀 효과를 사용하여 제한된 시각적 창에 여러 이미지의 내용을 표시해야 하는 경우가 종종 있으며 동시에 웹 사이트의 시각적 효과도 향상시킬 수 있습니다. 이 문서에서는 CSS를 사용하여 반응형 이미지 자동 캐러셀 효과를 구현하는 방법을 소개하고 코드 예제와 분석을 제공합니다. 구현 아이디어 반응형 이미지 캐러셀 구현은 CSS flex 레이아웃을 통해 구현할 수 있습니다. 존재하다

CSS를 사용하여 반응형 슬라이딩 메뉴 구현에 대한 튜토리얼 Nov 21, 2023 am 08:08 AM

CSS를 사용하여 반응형 슬라이딩 메뉴를 구현하는 방법에 대한 튜토리얼에는 특정 코드 예제가 필요합니다. 현대 웹 디자인에서는 반응형 디자인이 필수 기술이 되었습니다. 다양한 장치와 화면 크기를 수용하려면 웹사이트에 반응형 메뉴를 추가해야 합니다. 오늘은 CSS를 활용하여 반응형 슬라이딩 메뉴를 구현하고 구체적인 코드 예시를 제공하겠습니다. 먼저 구현을 살펴보겠습니다. 화면 너비가 특정 임계값보다 작을 때 자동으로 축소되고 메뉴 버튼을 클릭하면 확장되는 탐색 모음을 만들어 보겠습니다.

HTML, CSS, jQuery를 사용하여 반응형 태그 클라우드를 만드는 방법 Oct 27, 2023 am 10:46 AM

HTML, CSS 및 jQuery를 사용하여 반응형 태그 클라우드를 만드는 방법 태그 클라우드는 다양한 키워드나 태그를 표시하는 데 사용되는 일반적인 웹 요소입니다. 일반적으로 다양한 글꼴 크기나 색상으로 키워드의 중요성을 표시합니다. 이 기사에서는 HTML, CSS 및 jQuery를 사용하여 반응형 태그 클라우드를 만드는 방법을 소개하고 구체적인 코드 예제를 제공합니다. HTML 구조 생성 먼저 HTML에서 태그 클라우드의 기본 구조를 생성해야 합니다. 순서가 지정되지 않은 목록을 사용하여 태그를 나타낼 수 있습니다.

HTML과 CSS를 사용하여 반응형 캐러셀 레이아웃을 만드는 방법 Oct 20, 2023 pm 04:24 PM

HTML 및 CSS를 사용하여 반응형 회전판 레이아웃을 만드는 방법 회전판은 현대 웹 디자인의 일반적인 요소입니다. 사용자의 관심을 끌고, 여러 콘텐츠나 이미지를 표시하고, 자동으로 전환할 수 있습니다. 이 글에서는 HTML과 CSS를 사용하여 반응형 캐러셀 레이아웃을 만드는 방법을 소개합니다. 먼저 기본 HTML 구조를 만들고 필요한 CSS 스타일을 추가해야 합니다. 다음은 간단한 HTML 구조입니다: <!DOCTYPEhtml&g

JavaFX를 사용하여 Java 9에서 반응형 UI 인터페이스를 구축하는 방법 Jul 30, 2023 pm 06:36 PM

JavaFX를 사용하여 Java9에서 반응형 UI 인터페이스를 구축하는 방법 소개: 컴퓨터 애플리케이션 개발 과정에서 사용자 인터페이스(UI)는 매우 중요한 부분입니다. 좋은 UI는 사용자 경험을 향상시키고 애플리케이션을 더욱 매력적으로 만들 수 있습니다. JavaFX는 Java 플랫폼의 그래픽 사용자 인터페이스(GUI) 프레임워크로, 대화형 UI 인터페이스를 빠르게 구축할 수 있는 풍부한 도구 및 API 세트를 제공합니다. Java 9에서 JavaFX는 JavaSE가 되었습니다.

HTML, CSS 및 jQuery를 사용하여 반응형 스크롤 알림 표시줄을 만드는 방법 Oct 26, 2023 pm 12:12 PM

HTML, CSS 및 jQuery를 사용하여 반응형 스크롤 알림 표시줄을 만드는 방법 모바일 장치의 인기와 웹 사이트 액세스 경험에 대한 사용자 요구 사항이 증가함에 따라 반응형 스크롤 알림 표시줄을 디자인하는 것이 점점 더 중요해지고 있습니다. 반응형 디자인은 웹사이트가 다양한 기기에서 적절하게 표시되고 사용자가 알림 콘텐츠를 쉽게 볼 수 있도록 보장합니다. 이 기사에서는 HTML, CSS 및 jQuery를 사용하여 반응형 스크롤 알림 표시줄을 만드는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 먼저 HTM을 만들어야 합니다.

Layui를 사용하여 반응형 캘린더 기능을 구현하는 방법 Oct 25, 2023 pm 12:06 PM

Layui를 사용하여 반응형 캘린더 기능을 구현하는 방법 1. 소개 웹 개발에서 캘린더 기능은 일반적인 요구 사항 중 하나입니다. Layui는 달력 구성 요소를 포함하여 풍부한 UI 구성 요소를 제공하는 뛰어난 프런트 엔드 프레임워크입니다. 이 기사에서는 Layui를 사용하여 반응형 달력 기능을 구현하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 2. HTML 구조 달력 기능을 구현하기 위해서는 먼저 적절한 HTML 구조를 만들어야 합니다. div 요소를 가장 바깥쪽 컨테이너로 사용한 다음 그 안에 사용할 수 있습니다.

HTML 및 CSS를 사용하여 반응형 음악 플레이어 페이지 레이아웃을 만드는 방법 Oct 25, 2023 am 08:27 AM

HTML 및 CSS를 사용하여 반응형 음악 플레이어 페이지 레이아웃을 만드는 방법 인터넷의 발전으로 인해 음악 플레이어는 사람들의 삶에 없어서는 안 될 부분이 되었습니다. HTML과 CSS는 훌륭한 음악 플레이어 페이지 레이아웃을 만드는 데 없어서는 안 될 도구입니다. 이 문서에서는 HTML과 CSS를 사용하여 반응형 음악 플레이어 페이지 레이아웃을 만드는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 페이지 구조 먼저 HTML 문서를 만들고 페이지의 기본 구조를 정의해야 합니다. 다음은 간략한 내용입니다

See all articles

CSS3는 반응형 아코디언을 구현합니다.

핫 AI 도구

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

인기 기사

뜨거운 도구

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제