div+css实现Container Queries图片相册分类筛选列表效果代码
代码语言:html
所属分类:画廊相册
代码描述:div+css实现Container Queries图片相册分类筛选列表效果代码
代码标签: div css Container Queries 图片 相册 分类 筛选 列表
下面为部分代码预览,完整代码请点击下载或在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=Kanit:wght@400;700&family=Norican&display=swap" rel="stylesheet"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/normalize.5.0.css"> <style> [data-form~=bird-filters] { -moz-column-gap: 2rem; column-gap: 2rem; display: grid; grid-template: "options results" auto/var(--col-width, auto) 1fr; } [data-section~=options] { grid-area: options; } [data-section~=results] { grid-area: results; } [data-list~=birds] { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; } @media (min-width: 40rem) { [data-list~=birds] { grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); } } [data-fieldstyle="inline image"] { display: grid; grid-template-columns: repeat(5, 1fr); } [data-fieldstyle="inline button"] { display: flex; flex-wrap: wrap; gap: 0.5rem; } [data-fieldstyle="checkbox list"] { display: grid; row-gap: 0.5rem; } body, button { font-family: "Kanit", sans-serif; } body { background-color: lch(90 14.94 216.45/0.97); padding: 2rem; } h1 { font-size: calc(2rem + 3vw); margin-block: 0 1rem; } h1 span { color: lch(66 80 28); font-family: "Norican", cursive; font-weight: 900; } [data-heading] { color: lch(27 43 292); font-weight: bold; text-transform: uppercase; } [data-radio=input] { -webkit-appearance: none; -moz-appearance: none; appearance: none; clip: rect(1px, 1px, 1px, 1px); -webkit-clip-path: inset(1px 1px 1px 1px); clip-path: inset(1px 1px 1px 1px); height: 1px; overflow: hidden; pointer-events: none; position: absolute; width: 1px; } [data-fieldstyle~=button] label { align-items: center; background-color: var(--label-bg, transparent); border: thin solid var(--label-border, lch(27 43 292)); color: var(--label-fg, lch(27 43 292)); display: inline-flex; justify-content: center; padding: 0.25rem 1rem; } [data-fieldstyle~=button] label:hover { --label-bg: white; --label-border: lch(27 43 292); --label-fg: lch(27 43 292); } [data-fieldstyle~=button] [data-radio=input]:checked + label { --label-bg: lch(27 43 292); --label-fg: white; } [data-item~=bird] { background: white; color: lch(27 43 292); font-weight: bold; padding: 0.125rem 0.125rem 0.5rem; } img { height: auto; max-width: 100%; aspect-ratio: 1/1; -o-object-fit: cover; object-fit: cover; -o-object-position: var(--bird-position, center); object-position: var(--bird-position, center); -webkit-margin-after: 0.25rem; margin-block-end: 0.25rem; width: 100%; } [data-bird=parrot] { --bird-position: top; } legend { -webkit-margin-after: 0.5rem; margin-block-end: 0.5rem; } fieldset { border: 0; padding: 0; margin: 0 0 2rem; } label { cursor: pointer; } ul { list-style: none; padding: 0; } </style> </head> <body translate="no"> <h1>Container Queries <span>&</span> Birds</h1> <div data-layout="content list-filters"> <form action="." method="GET" data-form="bird-filters"> <div data-section="options"> <fieldset data-set="bird-type"> <legend data-heading>Type of Bird</legend> <div data-fieldstyle="inline button"> <div data-radio-type="oddbird"> <input data-radio="input" type="radio" name="type" value="odd" id="type_1" checked=""> <label for="type_1" data-radio="option"> <span class="label-text">OddBirds</span> </label> </div> <div data-radio-type="allbirds"> <input data-radio="input" type="radio" name="type" value="All" id="type_2" checked=""> <label for="type_2" data-radio="option"> <span class="label-text">All Birds</span> </label> </div> </div> </fieldset> <fieldset> <legend data-heading>Bird Size</legend> <div data-fieldstyle="checkbox list"> <label for="small"> <input type="checkbox" name="size" value="small" id="small"> Small </label> <label for="medium"> <input type="checkbox" name="size" value="medium" id="medium"> Medium </label> <label for="large"> <input type="checkbox" name="size" value="large" id="large"> Large </label> </div> </fieldset> <noscript><input type="submit"></noscript> </div> <div data-section="results"> <ul data-list="birds"> <li data-item="bird" data-bird-size="medium" data-bird-type="odd"> <img src="//repo.bfw.wiki/bfwrepo/images/birds/owl.jpg" /> Owl </li> <li data-item="bird" data-bird-size="small" data-bird-type="all"> <img src="//repo.bfw.wiki/bfwrepo/images/birds/bluejay.jpg" /> Blue Jay .........完整代码请登录后点击上方下载按钮下载查看
网友评论0