纯css实现瀑布流布局
代码语言:html
所属分类:瀑布流
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> /* CSS reset */ *, *::after, *::before { box-sizing: inherit; margin: 0; padding: 0; } body { box-sizing: border-box; position: relative; } html { font-size: 62.5%; } /* Typography --------------------------------------------*/ body { font-family: 'Helvetica Neue', sans-serif; font-size: 2rem; text-align: center; } .heading { margin-bottom: 3rem; } .body-text { font-size: 1.6rem; line-height: 2.5rem; margin: 0 auto; width: 70%; } .footer-text { color: #fff; font-size: 1.5rem; } /* Header --------------------------------------------*/ .header { margin: 0 auto; padding: 3rem 0; width: 65%; } /* Footer --------------------------------------------*/ .footer { background-color: #333; margin-top: 3rem; padding: 2rem 0; width: 100%; } /* Grids --------------------------------------------*/ .container { display: grid; grid-gap: 2rem; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(12, 150px); margin: 0 auto; max-width: 90%; padding: 3rem 0; } /* Grid images --------------------------------------------*/ .img { border-radius: 1rem; height: 100%; width: 100%; object-fit: cover; } /* Grid items --------------------------------------------*/ .item-4 { grid-row: 2/5; } .item-5 { grid-row: 2/6; } .item-6 { grid-row: 2/4; } .item-7 { grid-row: 5/6; } .item-8 { grid-row: 4/6; } .item-9 { grid-row: 6/11; } .item-10 { grid-row: 6/7; } .item-11 { grid-row: 6/9; } .item-12 { grid-row: 7/12; } .item-13 { grid-row: 9/13; } .item-14 { grid-row: 11/13; } </style> </head> <body translate="no"> <header class="header"> <h1 class="heading">瀑布流布局</h1> <p class="body-text"> 纯css实现,大屏观看更好 </p> </header> <main.........完整代码请登录后点击上方下载按钮下载查看
网友评论0