css布局实现时间线大事记效果代码
代码语言:html
所属分类:布局界面
代码描述:css布局实现时间线大事记效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> html, body { margin: 0; padding: 0; font-family: Helvetica, sans-serif; } body { background: #25303B; } section#timeline { width: 80%; margin: 20px auto; position: relative; } section#timeline:before { content: ''; display: block; position: absolute; left: 50%; top: 0; margin: 0 0 0 -1px; width: 2px; height: 100%; background: rgba(255,255,255,0.2); } section#timeline article { width: 100%; margin: 0 0 20px 0; position: relative; } section#timeline article:after { content: ''; display: block; clear: both; } section#timeline article div.inner { width: 40%; float: left; margin: 5px 0 0 0; border-radius: 6px; } section#timeline article div.inner span.date { display: block; width: 60px; height: 50px; padding: 5px 0; position: absolute; top: 0; left: 50%; margin: 0 0 0 -32px; border-radius: 100%; font-size: 12px; font-weight: 900; text-transform: uppercase; background: #25303B; color: rgba(255,255,255,0.5); border: 2px solid rgba(255,255,255,0.2); box-shadow: 0 0 0 7px #25303B; } section#timeline article div.inner span.date span { display: block; text-align: center; } section#timeline article div.inner span.date span.day { font-size: 10px; } section#timeline article div.inner span.date span.month { font-size: 18px; } section#timeline article div.inner span.date span.year { font-size: 10px; } section#timeline article div.inner h2 { padding: 15px; margin: 0; color: #fff; font-size: 20px; text-transform: uppercase; letter-spacing: -1px; border-radius: 6px 6px 0 0; position: relative; } section#timeline article div.inner h2:after { content: ''; position: absolute; top: 20px; right: -5px; width: 10px; height: 10px; -webkit-transform: rotate(-45deg); } section#timeline article div.inner p { padding: 15px; margin: 0; font-size: 14px; background: #fff; color: #656565; border-radius: 0 0 6px 6px; } section#timeline article:nth-child(2n+2) div.inner { float: right; } section#timeline article:nth-child(2n+2) div.inner h2:after { left: -5px; } section#timeline article:nth-child(1) div.inner h2 { background: #e74c3c; } section#timeline article:nth-child(1) div.inner h2:after { background: #e74c3c; } section#timeline article:nth-child(2) div.inner h2 { background: #2ecc71; } section#timeline article:nth-child(2) div.inner h2:after { background: #2ecc71; } section#timeline article:nth-child(3) div.inner h2 { background: #e67e22; } section#timeline article:nth-child(3) div.inner h2:after { background: #e67e22; } section#timeline article:nth-child(4) div.inner h2 { background: #1abc9c; } section#timeline article:nth-child(4) div.inner h2:after { background: #1abc9c; } section#timeline article:nth-child(5) div.inner h2 { background: #9b59b6; } section#timeline article:nth-child(5) div.inner h2:after { backgro.........完整代码请登录后点击上方下载按钮下载查看
网友评论0