支持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 .........完整代码请登录后点击上方下载按钮下载查看

网友评论0