div+css实现图片排列杂志封面布局效果代码
代码语言:html
所属分类:布局界面
代码描述:div+css实现图片排列杂志封面布局效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700&family=Outfit:wght@100;900&display=swap" rel="stylesheet"> <style> :root { --background-color: white; --gap: 0.5rem; --hexagon: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); } body { background-color: var(----background-color); margin: var(--gap); } img { max-width: 100%; } .mood-board { aspect-ratio: 1/1; width: 100%; display: grid; grid-template-rows: repeat(6, 1fr); grid-template-columns: repeat(14, 1fr); grid-template-areas: "b1 b1 b1 b1 b1 b1 b1 tx tx tx tx tx tx tx" "b1 b1 b1 b1 b1 b1 b1 b2 b2 b2 b2 b2 b2 b2" "b1 b1 b1 b1 b1 b1 b1 b2 b2 b2 b2 b2 b2 b2" "c1 c1 b4 b4 b4 b4 b4 b3 b3 b3 b3 b3 b3 b3" "c2 c2 b4 b4 b4 b4 b4 b3 b3 b3 b3 b3 b3 b3" "c3 c3 b4 b4 b4 b4 b4 b3 b3 b3 b3 b3 b3 b3"; grid-gap: var(--gap); } [class^=block-] > img { height: 100%; width: 100%; object-fit: cover; object-position: bottom; } .block-1 { grid-area: b1; } .block-2 { grid-area: b2; } .block-3 { grid-area: b3; } .block-4 { grid-area: b4; } .color-1 { grid-area: c1; background-color: #2d343a; } .color-2 { grid-area: c2; background-color: slategray; } .color-3 { grid-area: c3; background-color: #c6cdd3; } .text { overflow: hidden; background-co.........完整代码请登录后点击上方下载按钮下载查看
网友评论0