CSS手风琴效果
代码语言:html
所属分类:选项卡
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CodePen - CSS Accordion</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css'> <style> /* Variables */ /* Styles */ * { box-sizing: border-box; } body, .block > div, .details a.follow strong { margin: 0; padding: 0; } html, body { min-height: 100%; } body { font-family: Sans-Serif; font-size: 14px; letter-spacing: 0.5px; line-height: 1.4; color: gray; } h1 { font-weight: 700; font-size: 24px; color: black; padding: 15px 15px 0; margin: 0; } .block { max-width: 700px; width: 100%; height: 100%; float: left; padding: 15px; z-index: 10; background-color: white; overflow: hidden; } @media screen and (max-width: 599px) { .block { max-width: 100%; } } .block > div { display: block; position: relative; padding: 0 0 0 35px;.........完整代码请登录后点击上方下载按钮下载查看
网友评论0