단일 요소 사무용품 세트의 76 순수 CSS 작성

원본 주소 : https://segmentfault.com/a/1190000015607676

학습 효과 주소 후 : https://scrimba.com/c/c8PQ3PTB

생각 : CSS를 사용 매핑, CSS 전환 전환 등

HTML 코드 :

<! - 책상 컨테이너의 정의 : 종이, 통치자, 노트북, 달력, 연필 포함 -> 
< DIV 클래스 = "책상" > 
    < 스팬 클래스 = "용지" > </ 스팬 > 
    < 스팬 클래스 = "눈금자 A"를 > </ 스팬 > 
    < 스팬 클래스 = "노트" > </ 스팬 > 
    < 스팬 클래스 = "달력" </> 스팬 > 
    < 스팬 클래스 = "연필" > </ 스팬 > 
</ DIV >

CSS 코드 :

HTML 바디 { 
    마진 : 0 ] 
    패딩 : 0 ] 
} / * 설정 몸체 부 요소 수평 및 수직 중심 * / 
체 { 
    높이 : 100vh ; 
    디스플레이 : 플렉스 ; 
    정당화 컨텐트를 : 센터 ; 
    정렬 = 왼쪽 항목 : 센터 ; 
} / * 스타일 데스크 세트 * / 
.desk { 
    위치 : 상대 ;
     / * 폰트 크기 : 12이며,이 기본이지만, 크게 할 수 있고, 반면 책상 폭의 영향 높이 * /


    - 크기 글꼴 : 12 픽셀 , 
    폭 : 35em ; 
    높이 : 35em ;
     / * 국경 : 1 픽셀의 검은 색; * / 
    --b : 0.5em 솔리드 DarkSlateGray ; 
} / * 자식 요소를 직접 정의하는 공통 속성 데스크 * / 
.desk * { 
    위치 : 절대 ; 
    테두리 : VAR (- B) ;
     / * 폭 설정 높이 값이 테두리, 패딩, 콘텐츠 포함 * / 
    박스 사이즈 : 경계 박스 ;
     / * 천이 시간 *를 /

    전환 : 1 초 ; 
} 
.desk * :: 전, 
.desk * :: 후 { 
    내용 : '' ; 
    위치 : 절대 ; 
    박스 크기 : 경계 상자 ; 
} / * 画出纸张的轮廓* / 
.paper { 
    폭 : 12em ; 
    높이 : 15em ; 
    경계 반경 : 0 0 0 1.5em ; 
    색상 : 연회비 ; 
    배경 색상 : CurrentColor에
; 
    상위 : 7eM , 
    좌 : 2EM
 }
 / * 용지 좌 회선의 용지 부분 설정 * / 
.paper :: 전에 { 
    폭 : 2EM , 
    높이 : 16em ; 
    배경색 : CurrentColor에 , 
    테두리 : VAR (- B)를 ; 
    RADIUS 국경 : 1.5em 0 ; 
    왼쪽 : -0.5em , 
    하단 : 0.8em ] 
    필터 : 포화의 (150 %)의 밝기 (0.9); 
} 
.paper :: 후 { 
    폭 : 2EM ; 
    높이 : 2.5em ; 
    배경 색상 : CurrentColor에 ; 
    국경 : VAR (- B) ; 
    경계 반경 : 1.75em 0 0 1.75em ; 
    국경 오른쪽 : 없음 ; 
    바닥 : -0.5em ; 
    왼쪽 : -0.5em ; 
} / * 增加鼠标悬停效果* / 
.desk : 호버 .paper { 
    상단 : 0 ;

    왼쪽 : 0 ; 
}