div+css实现自适应响应式目录大纲排列效果代码
代码语言:html
所属分类:响应式
代码描述:div+css实现自适应响应式目录大纲排列效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css"> <style> body { background: #fff; font-family: "Nunito", sans-serif; line-height: 1.4; padding: 3em 2em; } h1 { font-weight: 800; font-size: 40px; text-transform: uppercase; } .item { margin: 1em 0; } .item__number { display: inline-block; padding: 15px; font-size: 34px; font-weight: 700; width: 45px; height: 45px; color: #fff; border-radius: 50%; margin-right: 10px; text-align: center; z-index: 2; } .item__topic { padding-left: 80px; position: relative; } .item__topic:before { content: ""; position: absolute; width: 5px; height: calc(100% + 1em); top: 0; left: 35px; } .item__topic__title { font-weight: 700; font-size: 24px; } .item__topic__author { font-size: 18px; color: #999; } @media (min-width: 768px) { main { display: grid; max-width: 100%; min-height: 150vh; padding-bottom: 5em; grid-template-columns: repeat(4, 1fr); grid-template-rows: min-content minmax(100px, 0.8fr) repeat(2, 125px) 320px repeat(2, 125px); } h1 { font-size: 50px; grid-column: 1/-1; } .item { margin: 0; } .item:nth-of-type(1) { grid-column: 1; grid-row: 3; } .item:nth-of-type(2) { grid-column: 2; grid-row: 4; } .item:nth-of-type(3) { grid-column: 3; grid-row: 3; } .item:nth-of-type(4) { grid-column: 4; grid-row: 4; } .item:nth-of-type(5) { grid-column: 1; grid-row: 6; } .item:nth-of-type(5) .item__topic { width: 180%; } .item:nth-of-type(6) { grid-column: 2; grid-row: 7; margin-left: 30%; } .item:nth-of-type(6) .item__topic { width: 200%; } .item:nth-of-type(7) { grid-column: 3; grid-row: 6; margin-left: 30%; } .item { position: relative; text-align: center; } .item__number { font-size: 56px; line-height: 1.8; width: 95px; height: 95px; margin: auto; } .item__topic { position: absolute; text-align: left; width: 130%; left: 50%; margin-left: -35px; padding-left: 60px; } .item__topic__title { margin-bottom: 8px; } .item--top .item__topic { bottom: calc(100% + 1em); } .item--bottom .item__topic { top: 100%; padding-top: 10px; } .item--left .item__topic { text-align: right; right: 50%; left: auto; padding-right: 25px; width: 140%; } .item--left .item__topic:before { left: auto; right: 0; } } @media (min-width: 1240px) { main { display: grid; margin: auto; max-width: 1150px; min-height: 120vh; grid-template-columns: repeat(4, 125px) 20px repeat(3, 125px) 1fr; grid-template-rows: min-content 25% repeat(2, min-content); grid-gap: 10px; } .item:nth-of-type(1) { grid-column: 1; grid-row: 3; } .item:nth-of-type(1) .item__topic { padding-bottom: 5em; } .item:nth-of-type(2) { grid-column: 2; grid-row: 4; } .item:nth-of-type(2) .item__topic { padding-top: 6em; } .item:nth-of-type(3) { grid-column: 3; grid-row: 3; } .item:nth-of-type(3) .item__topic { padding-bottom: 11em; } .item:nth-of-type(4) { grid-column: 4; grid-row: 4; margin-left: 20%; } .item:nth-of-type(4) .item__topic { padding-top: 3em; width: 220%; margin-right: -16px; } .item:nth-of-type(5) { grid-column: 6; grid-row: 3; } .item:nth-of-type(5) .item__topic { padding-bottom: 2em; } .item:nth-of-type(6) { grid-column: 7; grid-row: 4; margin-left: 15%; } .item:nth-of-type(6) .item__topic { padding-top: 8em; left: calc(50% + 7px); } .item:nth-of-type(7) { grid-column: 8; grid-row: 3; } .item:nth-of-type(7) .item__topic { padding-bottom: 5em; width: 220%; left: 70%; } } .item:nth-of-type(1) .item__number { background: rgba(216, 27, 96, 0.6); } .item:nth-of-type(1) .item__topic:before { background: rgba(216, 27, 96, 0.6); } .item:nth-of-type(1) .item__topic__title { color: #d81b60; } .item:nth-of-type(2) .item__number { background: rgba(244, 81, 30, 0.6); } .item:nth-of-type(2) .item__topic:before { background: rgba(244, 81, 30, 0.6); } .item:nth-of-type(2) .item__topic__title { color: #f4511e; } .item:nth-of-type(3) .item__number { background: rgba(58, 61, 183, 0.6); } .item:nth-of-type(3) .item__topic:before { background: rgba(58, 61, 183, 0.6); } .item:nth-of-type(3) .item__topic__title { color: #3a3db7; } .item:nth-of-type(4) .item__number { background: rgba(249, 185, 27, 0.6); } .item:nth-of-type(4) .item__topic:before { background: rgba(249, 185, 27, 0.6); } .item:nth-of-type(4) .item__topic__title { color: #f9b91b; } .item:nth-of-type(5) .item__number { background: rgba(62, 62, 62, 0.6); } .item:nth-of-type(5) .item__topic:before { background: rgba(62, 62, 62, 0.6); } .item:nth-of-type(5) .item__topic__title { color: #3e3e3e; } .item:nth-of-type(6) .item__number { backg.........完整代码请登录后点击上方下载按钮下载查看
网友评论0