支持tab键盘选择的折叠框效果
代码语言:html
所属分类:选项卡
代码描述:支持tab键盘选择的折叠框效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> /* CSS Reset */ html, body { font-size: 100%; } html, body, header, footer, main, section, div, h1, h2, p, button { margin: 0; padding: 0; border: 0; vertical-align: baseline; } header, footer, main, section { display: block; } button, svg { box-sizing: border-box; } @-ms-viewport { width: device-width; } @-o-viewport { width: device-width; } @viewport { width: device-width; } /* Common Settings */ body { font-family: "Roboto", "Arial", "Helvetica", sans-serif; line-height: 1.8; color: #000000; background-color: #FFFFFF; } header, footer, main { margin: 2rem auto; width: 90%; } @media all and (min-width: 37rem) { header, footer, main { width: 80%; } } @media all and (min-width: 50rem) { header, footer, main { width: 40rem; } } header { border-bottom: 2px solid #D5D5D5; } footer { margin-top: 4rem; margin-bottom: 8rem; border-top: 2px solid #D5D5D5; padding-top: 1rem; } .no-break { white-space: nowrap; } /* The Headings h1 and h2 */ h1 { font-size: 1.4rem; font-weight: bold; line-height: 1.6; margin: 2rem 0 0.5rem 0; } @media all and (min-width: 37rem) { h1 { margin: 3rem 0 1rem 0; } } @media all and (min-width: 50rem) { h1 { margin: 4rem 0 1.5rem 0; } } h2 { font-size: 1.1rem; font-weight: bold; line-height: 1.6; margin: 1.5rem 0 0.5rem 0; } @media all and (min-width: 50rem) { h2 { margin: 2rem 0 1rem 0; } } /* Collapsible Content Styling */ .special-div { margin-top: -0.8rem; padding: 0.5rem 0.3rem 1rem 1rem; border: 2px solid #D5D5D5; border-radius: 0 0 0.5rem 0.5rem; background-color: #FFFFFF; } @media all and (min-width: 37rem) { .special-div { padding: 1rem 0.5rem 1.5rem 1rem; } } @media all and (min-width: 50rem) { .special-div { margin-top: -1.3rem; padding: 1rem 1rem 2rem 1.5rem; } } .special-div, .special-h2 { box-sizing: border-box; } .special-h2 button { all: inherit; width: 100%; margin: 0; display: -webkit-box; display: flex; -webkit-box-pack: justify; justify-content: space-between; -webkit-box-align: center; align-items: center; border: 2px solid #D5D5D5; border-radius: 0.5rem; padding: 0.5rem 0.5rem 0.5rem 1rem; color: #000000; background-color: #E5E5E5; } .special-h2 button:hover, .special-h2 button:focus { outline: 0; border: 2px solid #959595; color: #FFFFFF; background-color: #1979AA; } .special-h2 button svg { height: 2rem; margin-left: 1rem; border: 2px solid; border-radius: 50%; flex-shrink: 0; color: #1979AA; } .special-h2 button:hover svg, .special-h2 button:focus svg { color: #FFFFFF; } [aria-expanded] rect { fill: currentColor; } [aria-expanded="true"] .vert { display: none; } /* Done */ </style> </.........完整代码请登录后点击上方下载按钮下载查看
网友评论0