quiz icon indicating copy to clipboard operation
quiz copied to clipboard

Published 20 hours ago • verified publisher icon zhangxinxu

CSS基础测试5

Open zhangxinxu opened this issue 6 years ago • 33 comments
trafficstars

本期CSS小测题目如下：

原图地址（750x320）：https://image.zhangxinxu.com/image/blog/201904/css-quiz-5.png

请附上对应的HTML代码和CSS代码，注意缩进和代码高亮，可以使用下面语法：

```html
你的代码在这里
```
```css
你的代码在这里
```

请提供在线的可访问的demo地址（精力有限，没有demo减1分），如jsbin.com、jsfiddle.net或codepen.io，使用国内的类似工具也可以。

本期小测答疑周六4月20日上午10:00开始，大约半小时，直播地址：https://live.bilibili.com/21193211

首位答题者会额外2积分，同时会被翻牌。

感谢您的参与！

zhangxinxu avatar Apr 17 '19 11:04 zhangxinxu

直接使用强大的 Grid 布局，妥妥的。> 在线 DEMO <

<ul class="square-box">
  <li class="square-item bg-dark"></li>
  <li class="square-item bg-gray"></li>
  <li class="square-item bg-sienna active"></li>
  <li class="square-item bg-gold"></li>
  <li class="square-item bg-crimson"></li>
  <li class="square-item bg-orchid"></li>
  <li class="square-item bg-silver"></li>
</ul>

/* css reset */
html {font-size: 16px;}
ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

/* 布局 */
.square-box {
  display: grid;
  grid-template-columns: repeat(5, 1fr);  /* 划分 5 个等宽片段 */
  grid-template-rows: 1fr 1fr;
  grid-gap: .5rem .375rem;
}
.square-item {
  padding-bottom: 100%;  /* 容器的 padding 百分比值按其宽度来计算 */
  outline: .15rem solid transparent;
}
.square-item.active {outline-color: #222;}

/* 颜色 */
.bg-dark    {background: #424242;}
.bg-gray    {background: #8c8c8c;}
.bg-sienna  {background: #d48b69;}
.bg-gold    {background: #fecb66;}
.bg-crimson {background: #c54941;}
.bg-orchid  {background: #591c93;}
.bg-silver  {background: #e6e6e6;}

/* 响应式断点（CSS基础测试4），基于 iPhone6 尺寸 */
@media screen and (min-width: 375px) {
  html {
    font-size: calc(100% + 2 * (100vw - 375px) / 39);
    font-size: calc(16px + 2 * (100vw - 375px) / 39);
  }
}
@media screen and (min-width: 414px) {
  html {
    font-size: calc(112.5% + 4 * (100vw - 414px) / 586);
    font-size: calc(18px + 4 * (100vw - 414px) / 586);
  }
}

wingmeng avatar Apr 17 '19 11:04 wingmeng

jsbin

<div class="layout">
    <div class="layout-inner">
        <div class="layout-item">
            <div class="layout-item-inner">
                <div class="layout-item-content">

                </div>
            </div>

        </div>
        <div class="layout-item">
            <div class="layout-item-inner">
                <div class="layout-item-content">

                </div>
            </div>

        </div>
        <div class="layout-item layout-item--active">
            <div class="layout-item-inner">
                <div class="layout-item-content">

                </div>
            </div>

        </div>
        <div class="layout-item">
            <div class="layout-item-inner">
                <div class="layout-item-content">

                </div>
            </div>

        </div>
        <div class="layout-item">
            <div class="layout-item-inner">
                <div class="layout-item-content">

                </div>
            </div>

        </div>
        <div class="layout-item">
            <div class="layout-item-inner">
                <div class="layout-item-content">

                </div>
            </div>

        </div>
        <div class="layout-item">
            <div class="layout-item-inner">
                <div class="layout-item-content">

                </div>
            </div>

        </div>
        <div class="layout-item">
            <div class="layout-item-inner">
                <div class="layout-item-content">

                </div>
            </div>

        </div>
        <div class="layout-item">
            <div class="layout-item-inner">
                <div class="layout-item-content">

                </div>
            </div>

        </div>
        <div class="layout-item">
            <div class="layout-item-inner">
                <div class="layout-item-content">

                </div>
            </div>

        </div>
        <div class="layout-item">
            <div class="layout-item-inner">
                <div class="layout-item-content">

                </div>
            </div>

        </div>
        <div class="layout-item">
            <div class="layout-item-inner">
                <div class="layout-item-content">

                </div>
            </div>

        </div>
        <div class="layout-item">
            <div class="layout-item-inner">
                <div class="layout-item-content">

                </div>
            </div>

        </div>
        <div class="layout-item">
            <div class="layout-item-inner">
                <div class="layout-item-content">

                </div>
            </div>

        </div>
    </div>
</div>

.layout {
    padding: 4%;
    border: 1px solid #e8e8e8;
}

.layout-inner {
    display: flex;
    flex-wrap: wrap;
    flex-grow: 0;
}

.layout-item {
    flex-basis: 20%;
}

.layout-item-inner {
    position: relative;
    padding: 50%;
}

.layout-item-content {
    position: absolute;
    top: 10%;
    bottom: 10%;
    right: 10%;
    left: 10%;
    margin: auto;
}

.layout-item--active .layout-item-content {
    outline: #272423 4px solid;
}

.layout-item:nth-child(7n+1) .layout-item-content {
    background: #424242;
}

.layout-item:nth-child(7n+2) .layout-item-content {
    background: #8c8c8c;
}

.layout-item:nth-child(7n+3) .layout-item-content {
    background: #d38b69;
}

.layout-item:nth-child(7n+4) .layout-item-content {
    background: #fecb66;
}

.layout-item:nth-child(7n+5) .layout-item-content {
    background: #c54941;
}

.layout-item:nth-child(7n+6) .layout-item-content {
    background: #581c93;
}

.layout-item:nth-child(7n) .layout-item-content {
    background: #e6e6e6;
}

liyongleihf2006 avatar Apr 17 '19 12:04 liyongleihf2006

更新： 啥？边框是选择态的样式？[增加了 tabindex 可选中，调整 hover 样式为 focus 样式]

在线 demo：CSS基础测试5

颜色列表（从左上向右下序）：

 var squareBgColors = [
        "#424242",
        "#8c8c8c",
        "#d48b69",
        "#fecb66",
        "#c54941",
        "#591c93",
        "#e6e6e6"
    ],
       borderColor = "#222222";

布局：

<ul id="squares">
    <li class="square" style="--color: $color" tabindex="$index"></li>    
    <li class="square" style="--color: $color" tabindex="$index"></li>
    <blockquote>
        ... 其他的 square 和上面展示的 li 一致，实际应用时估计会用到像 vue 之类的框架 ，故此处不再详述 ...
    </blockquote>
</ul>

CSS 样式部分：（将 after 伪元素替换为实际的元素，可能 focus 的兼容性会好一些 ~）

ul{
    margin: 0;
    padding: 0;
}

li{
    width: 20%;
    padding-top: 20%;
    float: left;
    list-style: none;
    position: relative;
}

li::after{
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 4px;
    background-color: var(--color);
}

li:focus::after{
    /* 边框颜色：#222222 */
    outline: #222222 4px solid;
}

ghost avatar Apr 17 '19 12:04 ghost

>>demo<<

<div class="box-wrapper">
    <a href="javascript:" class="box box-darkgray"></a>
    <a href="javascript:" class="box box-gray"></a>
    <a href="javascript:" class="box box-brown"></a>
    <a href="javascript:" class="box box-orange"></a>
    <a href="javascript:" class="box box-red"></a>
    <a href="javascript:" class="box box-purple"></a>
    <a href="javascript:" class="box box-lightgray"></a>
</div>

.box-wrapper{
    font-size: 0;
    margin:var(--box-margin);
    --black:#212121;
    --box-margin:4vw;
    --box-size: calc((100vw - var(--box-margin) * 2) / 5);
}
.box{
    display: inline-block;
    width: var(--box-size);
    height: var(--box-size);
    background-color: currentColor;
    transform: scale(0.9)
}
.box-darkgray{color:#424242}
.box-gray{color:#8c8c8c}
.box-brown{color:#d48b69}
.box-orange{color:#fecb66}
.box-red{color:#c54941}
.box-purple{color:#591b93}
.box-lightgray{color:#e6e6e6}
.box:focus{outline: 0.8vw solid black}

Seasonley avatar Apr 17 '19 12:04 Seasonley

demo

<div class="content">
    <div class="box" bg-color-01></div>
    <div class="box" bg-color-02></div>
    <div class="box" bg-color-03></div>
    <div class="box" bg-color-04></div>
    <div class="box" bg-color-05></div>
    <div class="box" bg-color-06></div>
    <div class="box" bg-color-07></div>
    <div class="box" bg-color-01></div>
    <div class="box" bg-color-02></div>
    <div class="box" bg-color-03></div>
    <div class="box" bg-color-04></div>
    <div class="box" bg-color-05></div>
    <div class="box" bg-color-06></div>
    <div class="box" bg-color-07></div>
    <!--fix-->
    <div class="fix"></div>
    <div class="fix"></div>
    <div class="fix"></div>
    <div class="fix"></div>
    <div class="fix"></div>
    <div class="fix"></div>
</div>

可以实现响应式自动更改每一行的个数，唯一的缺陷就是需要插入数量足够的.fix，当然grid布局配合媒体查询可能更好

body{
    margin: 0;
}
.content{
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
}
.box{
    flex: 1;
    min-width: 100px;
    margin: 10px;
    cursor: pointer;
}
.box:hover,.box:active{
    outline: 3px solid #272423;
}
.box::after{
    content: '';
    display: block;
    padding: 50%;
}
.fix{
    min-width: 100px;
    flex: 1;
    margin: 0 10px;
    height: 0;
}

[bg-color-01]{
    background: #424242;
}
[bg-color-02]{
    background: #8c8c8c;
}
[bg-color-03]{
    background: #d48b69;
}
[bg-color-04]{
    background: #fecb66;
}
[bg-color-05]{
    background: #c54941;
}
[bg-color-06]{
    background: #591c93;
}
[bg-color-07]{
    background: #e6e6e6;
}

XboxYan avatar Apr 17 '19 12:04 XboxYan

demo

  <div class="wrapper">
    <div></div>
    <div></div>
    <div class="active"></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>

body {
      margin: 0;
      padding: 60px;
    }

    .wrapper {
      display: flex;
      flex-wrap: wrap;
    }

    .wrapper>div {
      width: 18%;
      padding-bottom: 18%;
      margin-bottom: 2.5%;
    }

    .wrapper>div:not(:nth-of-type(5n)) {
      margin-right: 2.5%;
    }

    .wrapper>div:nth-of-type(1) {
      background: rgb(68, 68, 68);
    }

    .wrapper>div:nth-of-type(2) {
      background: rgb(139, 139, 139);
    }

    .wrapper>div:nth-of-type(3) {
      background: rgb(194, 138, 106);
    }

    .wrapper>div:nth-of-type(4) {
      background: rgb(240, 202, 108);
    }

    .wrapper>div:nth-of-type(5) {
      background: rgb(172, 74, 68);
    }

    .wrapper>div:nth-of-type(6) {
      background: rgb(79, 33, 143);
    }

    .wrapper>div:nth-of-type(7) {
      background: rgb(229, 229, 229);
    }

    .active {
      box-shadow: 0 0 0 4px rgb(39, 39, 39);
    }

xiyao4869 avatar Apr 17 '19 13:04 xiyao4869

写了个笨方法。。。css苦手 Demo CodePen

      /*容器*/
      .color-container {
        width: 600px;
        padding: 0;
        background: #fff;
        list-style-type: none;
        border: 1px #e5e5e5 solid;
        padding: 10px;
        font-size: 0;
        --margin: 10px;
      }
      /*子元素*/
      .color-container li {
        margin: var(--margin);
        width: calc(20% - var(--margin) * 2);
        height: 0;
        position: relative;
        padding-top: calc(20% - var(--margin) * 2);
        display: inline-block;
      }
      /*可选中的input radio*/
      .color-container input {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        z-index: 2;
        opacity: 0;
      }
      /*色块*/
      .color-item {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        background: #000;
        outline: 4px solid #fff;
        z-index: 1;
      }
      /*色块选中效果*/
      .color-container input:checked + .color-item {
        outline: 4px solid #000;
      }

      /*色块背景*/

      .color-container li:nth-child(7n + 1) .color-item {
        background: #424242;
      }
      .color-container li:nth-child(7n + 2) .color-item {
        background: #8c8c8c;
      }
      .color-container li:nth-child(7n + 3) .color-item {
        background: #d48b69;
      }
      .color-container li:nth-child(7n + 4) .color-item {
        background: #fecb66;
      }
      .color-container li:nth-child(7n + 5) .color-item {
        background: #c54941;
      }
      .color-container li:nth-child(7n + 6) .color-item {
        background: #591c93;
      }
      .color-container li:nth-child(7n + 7) .color-item {
        background: #e6e6e6;
      }
      /*移动端兼容*/
      @media (max-width: 768px) {
        html {
          width: 100%;
        }
        .color-container {
          width: 100%;
          margin: 0;
          box-sizing: border-box;
          --margin: 4px;
        }
      }

    <ul class="color-container">
      <li>
        <input type="radio" name="color" />
        <div class="color-item"></div>
      </li>
      <li>
        <input type="radio" name="color" />
        <div class="color-item"></div>
      </li>
      <li>
        <input type="radio" name="color" />
        <div class="color-item"></div>
      </li>
      <li>
        <input type="radio" name="color" />
        <div class="color-item"></div>
      </li>
      <li>
        <input type="radio" name="color" />
        <div class="color-item"></div>
      </li>
      <li>
        <input type="radio" name="color" />
        <div class="color-item"></div>
      </li>
      <li>
        <input type="radio" name="color" />
        <div class="color-item"></div>
      </li>
    </ul>

livetune avatar Apr 17 '19 14:04 livetune

@livetune 这里的 radio 厉害了，保留了选择的语义

ghost avatar Apr 17 '19 14:04 ghost

在线地址

<div class="list-wrapper">
    <ul class="list-content">
        <li class="list-item"></li>
        <li class="list-item"></li>
        <li class="list-item active"></li>
        <li class="list-item"></li>
        <li class="list-item"></li>
        <li class="list-item"></li>
        <li class="list-item"></li>
    </ul>
</div>

body {
    margin: 0
}

html {
    font-size: 16px;
}

@media screen and (min-width: 375px) {
    html {
        /* iPhone6的375px尺寸作为16px基准，414px正好18px大小, 600 20px */
        font-size: calc(100% + 2 * (100vw - 375px) / 39);
        font-size: calc(16px + 2 * (100vw - 375px) / 39);
    }
}

@media screen and (min-width: 414px) {
    html {
        /* 414px-1000px每100像素宽字体增加1px(18px-22px) */
        font-size: calc(112.5% + 4 * (100vw - 414px) / 586);
        font-size: calc(18px + 4 * (100vw - 414px) / 586);
    }
}

body {
    font-family: sans-serif;
    line-height: 1.5;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: none;
    -webkit-touch-callout: none
}

ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.list-content {
    display: flex;
    flex-wrap: wrap;
    padding: .5rem;
}

.list-item {
    display: block;
    margin: .25rem;
    width: calc((100vw - 3.5rem) / 5);
    height: calc((100vw - 3.5rem) / 5);
}

.list-item.active {
    outline: 2px solid #000;
}

.list-item:nth-child(7n+1) {
    background: #424242;
}

.list-item:nth-child(7n+2) {
    background: #8c8c8c;
}

.list-item:nth-child(7n+3) {
    background: #d48b69;
}

.list-item:nth-child(7n+4) {
    background: #facb66;
}

.list-item:nth-child(7n+5) {
    background: #c54941;
}

.list-item:nth-child(7n+6) {
    background: #591b93;
}

.list-item:nth-child(7n+7) {
    background: #e6e6e6;
}

silverWolf818 avatar Apr 17 '19 14:04 silverWolf818

这儿主要使用padding来实现正方形尺寸，outline来实现选中状态。

demo

<div class="demo">
    <a data-color="color1" href="javascript:void(0);"></a>
    <a data-color="color2" href="javascript:void(0);"></a>
    <a data-color="color3" href="javascript:void(0);"></a>
    <a data-color="color4" href="javascript:void(0);"></a>
    <a data-color="color5" href="javascript:void(0);"></a>
    <a data-color="color6" href="javascript:void(0);"></a>
    <a data-color="color7" href="javascript:void(0);"></a>
</div>

body {
  margin: 0;
  padding: 10px;
}
.demo{
  font-size: 0;
  border: 1px solid #e2e2e2;
  padding: 16px 20px;
}
.demo a{
  display: inline-block;
  width: calc( 20% - 10px );
  margin: 5px;
  padding-top: calc( 20% - 10px);
}
.demo a:hover{
  cursor: pointer;
}
.demo a:focus{
  outline: 2px solid #222;
}
.demo a[data-color=color1]{
  background: #424242;
}
.demo a[data-color=color2]{
  background: #8c8c8c;
}
.demo a[data-color=color3]{
  background: #ca8e6f;
}
.demo a[data-color=color4]{
  background: #f7cc76;
}
.demo a[data-color=color5]{
  background: #b75147;
}
.demo a[data-color=color6]{
  background: #51248d;
}
.demo a[data-color=color7]{
  background: #e6e6e6;
}

kuikuiGe avatar Apr 17 '19 16:04 kuikuiGe

在线预览

    <ul class="wrap">
        <li class="box bg-dark"><a href="#"></a></li>
        <li class="box bg-gray"><a href="#"></a></li>
        <li class="box bg-sienna"><a href="#"></a></li>
        <li class="box bg-gold"><a href="#"></a></li>
        <li class="box bg-crimson"><a href="#"></a></li>
        <li class="box bg-orchid"><a href="#"></a></li>
        <li class="box bg-silver"><a href="#"></a></li>
    </ul>

        html {
            font-size: 16px;
        }

        @media screen and (min-width: 375px) {
            html {
                font-size: calc(100% + 2 * (100vw - 375px) / 39);
                font-size: calc(16px + 2 * (100vw - 375px) / 39);
            }
        }
        @media screen and (min-width: 414px) {
            html {
                font-size: calc(112.5% + 4 * (100vw - 414px) / 586);
                font-size: calc(18px + 4 * (100vw - 414px) / 586);
            }
        }
        @media screen and (min-width: 600px) {
            html {
                font-size: calc(125% + 4 * (100vw - 600px) / 400);
                font-size: calc(20px + 4 * (100vw - 600px) / 400);
            }
        }
        @media screen and (min-width: 1000px) {
            html {
                font-size: calc(137.5% + 6 * (100vw - 1000px) / 1000);
                font-size: calc(22px + 6 * (100vw - 1000px) / 1000);
            }
        }
        body{
            margin: 0;
        }
        ul,li{
            list-style: none;
        }
        ul.wrap{
            display: grid;
            margin: 0;
            padding: 0;
            grid-template-columns: repeat(5, 1fr);
            grid-template-rows: 1fr 1fr;
            grid-gap: 1rem;
        }
        ul.wrap > li.box{
            position: relative;
            padding-top: 100%;
            cursor: pointer;
        }
        ul.wrap > li.box > a{
            position: absolute;
            box-sizing: border-box;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
        }
        ul.wrap > li.box > a:focus{
            border: .1rem solid black;
        }
        .bg-dark    {background: #424242;}
        .bg-gray    {background: #8c8c8c;}
        .bg-sienna  {background: #d48b69;}
        .bg-gold    {background: #fecb66;}
        .bg-crimson {background: #c54941;}
        .bg-orchid  {background: #591c93;}
        .bg-silver  {background: #e6e6e6;}

guqianfeng avatar Apr 18 '19 01:04 guqianfeng

在线预览

    <ul class="wrap">
        <li class="box bg-dark"><a href="#"></a></li>
        <li class="box bg-gray"><a href="#"></a></li>
        <li class="box bg-sienna"><a href="#"></a></li>
        <li class="box bg-gold"><a href="#"></a></li>
        <li class="box bg-crimson"><a href="#"></a></li>
        <li class="box bg-orchid"><a href="#"></a></li>
        <li class="box bg-silver"><a href="#"></a></li>
    </ul>

        html {
            font-size: 16px;
        }

        @media screen and (min-width: 375px) {
            html {
                font-size: calc(100% + 2 * (100vw - 375px) / 39);
                font-size: calc(16px + 2 * (100vw - 375px) / 39);
            }
        }
        @media screen and (min-width: 414px) {
            html {
                font-size: calc(112.5% + 4 * (100vw - 414px) / 586);
                font-size: calc(18px + 4 * (100vw - 414px) / 586);
            }
        }
        @media screen and (min-width: 600px) {
            html {
                font-size: calc(125% + 4 * (100vw - 600px) / 400);
                font-size: calc(20px + 4 * (100vw - 600px) / 400);
            }
        }
        @media screen and (min-width: 1000px) {
            html {
                font-size: calc(137.5% + 6 * (100vw - 1000px) / 1000);
                font-size: calc(22px + 6 * (100vw - 1000px) / 1000);
            }
        }
        body{
            margin: 0;
        }
        ul,li{
            list-style: none;
        }
        ul.wrap{
            display: grid;
            margin: 0;
            padding: 0;
            grid-template-columns: repeat(5, 1fr);
            grid-template-rows: 1fr 1fr;
            grid-gap: 1rem;
        }
        ul.wrap > li.box{
            position: relative;
            padding-top: 100%;
            cursor: pointer;
        }
        ul.wrap > li.box > a{
            position: absolute;
            box-sizing: border-box;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
        }
        ul.wrap > li.box > a:focus{
            border: .1rem solid black;
        }
        .bg-dark    {background: #424242;}
        .bg-gray    {background: #8c8c8c;}
        .bg-sienna  {background: #d48b69;}
        .bg-gold    {background: #fecb66;}
        .bg-crimson {background: #c54941;}
        .bg-orchid  {background: #591c93;}
        .bg-silver  {background: #e6e6e6;}

guqianfeng avatar Apr 18 '19 01:04 guqianfeng

demo

<div class="box-wrap">
    <div class="box box-color1"></div>  
    <div class="box box-color2"></div>  
    <div class="box box-color3"></div>  
    <div class="box box-color4"></div>  
    <div class="box box-color5"></div>  
    <div class="box box-color6"></div>  
    <div class="box box-color7"></div>  
    <div class="box box-color1"></div>    
    <div class="box box-color2"></div>  
    <div class="box box-color3"></div>  
    <div class="box box-color4"></div>  
    <div class="box box-color5"></div>      
</div>

.box-wrap{
    display: flex;
    flex-wrap: wrap;
}
.box{
    flex-basis: 33.3%;
    flex-grow: 0;
    --childmargin: 5px;
}
@media screen and (min-width: 375px) {
    .box{
        flex-basis: 25%;
    }
}
@media screen and (min-width: 414px) {
    .box{
        flex-basis: 20%;
    }
}
.box:before{
    content: '';
    display: block;
    padding-bottom: calc(100% - var(--childmargin)*2);
    margin: var(--childmargin);
}
.box:hover:before,
.box.active:before{
    outline: 4px solid #222;
}
.box-color1:before{background-color: #424242;}
.box-color2:before{background-color: #8c8c8c;}
.box-color3:before{background-color: #d48b69;}
.box-color4:before{background-color: #fecb66;}
.box-color5:before{background-color: #c54941;}
.box-color6:before{background-color: #591c93;}
.box-color7:before{background-color: #e6e6e6;}

lineforone avatar Apr 18 '19 02:04 lineforone 

box {
            width: 100%;
            font-size: 0;
            text-align: justify;

        }
        .item {
            padding: calc((100% - 40px) / 10);
            background: aliceblue;
            display: inline-block;
            box-sizing: border-box;
            margin-bottom: 10px;
            border: 2px solid transparent;
        }
        .item:active {
            border-color: #212121;
        }
        .placeholder {
            background: transparent;
            display: inline-block;
            visibility: hidden;
            height: 0;
            width: 100%;
            overflow: hidden;
        }

<div class="box">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="placeholder"></div>
    </div>

smiledpeace avatar Apr 18 '19 02:04 smiledpeace

在线查看

html

<div class="square-container">
      <a href="javascript:" class="base-size"></a>
      <a href="javascript:" class="base-size bg-gray"></a>
      <a href="javascript:" class="base-size bg-sienna focus"></a>
      <a href="javascript:" class="base-size bg-gold"></a>
      <a href="javascript:" class="base-size bg-crimson"></a>
      <a href="javascript:" class="base-size bg-orchid"></a>
      <a href="javascript:" class="base-size bg-silver"></a>
    </div>

css

.square-container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: 1fr 1fr;
  grid-gap: 1rem 1rem;
}
.base-size {
  padding-top: 100%;
  background: #424242;
}
.bg-dark {
  background: #424242;
}
.bg-gray {
  background: #8c8c8c;
}
.bg-sienna {
  background: #d48b69;
}
.bg-gold {
  background: #fecb66;
}
.bg-crimson {
  background: #c54941;
}
.bg-orchid {
  background: #591c93;
}
.bg-silver {
  background: #e6e6e6;
}
.base-size:focus {
  outline: 0.25rem solid black;
}
.focus {
  outline: 0.25rem solid black;
}

simplefeel avatar Apr 18 '19 02:04 simplefeel

预览地址

JS Bin

HTML

  <div class="container">
    <div class="box dark"></div>
    <div class="box gray"></div>
    <div class="box sienna active "></div>
    <div class="box gold"></div>
    <div class="box crimson"></div>
    <div class="box orchid"></div>
    <div class="box silver"></div>
  </div>

CSS

/* 父级容器 */
.container {
  border: 1px solid red;
  margin: 20px;
  min-width: 100px;
  display: flex;
  flex-wrap: wrap;
}
/* 百分比 5 * 18% + 10 * 1% */
.box {
  box-sizing: border-box;
  width: 18%;
  padding-top: 18%;
  background: #ccc;
  margin: 1%;
}
.box.active {
  outline: 2px solid #424242;
}

/* 颜色 */
.dark    {background: #424242;}
.gray    {background: #8c8c8c;}
.sienna  {background: #d48b69;}
.gold    {background: #fecb66;}
.crimson {background: #c54941;}
.orchid  {background: #591c93;}
.silver  {background: #e6e6e6;}

z-xl-t avatar Apr 18 '19 04:04 z-xl-t 

<div class="container">
  <div class="block-container" tabindex="0">
    <div class="block"></div>
  </div>
  <div class="block-container" tabindex="0">
    <div class="block"></div>
  </div>
  <div class="block-container" tabindex="0">
    <div class="block"></div>
  </div>
  <div class="block-container" tabindex="0">
    <div class="block"></div>
  </div>
  <div class="block-container" tabindex="0">
    <div class="block"></div>
  </div>
  <div class="block-container" tabindex="0">
    <div class="block"></div>
  </div>
  <div class="block-container" tabindex="0">
    <div class="block"></div>
  </div>
  <div class="block-container" tabindex="0">
    <div class="block"></div>
  </div>
  <div class="block-container" tabindex="0">
    <div class="block"></div>
  </div>
</div>

.container {
  overflow: hidden;
}
.block-container {
  float: left;
  width: 18%;
  margin: 1%;
  background-color: #424242;
}
.block-container:focus {
  outline: 3px solid #000;
}
.block-container:nth-child(7n + 2) {
  background-color: #8c8c8c;
}
.block-container:nth-child(7n + 3) {
  background-color: #d48b69;
}
.block-container:nth-child(7n + 4) {
  background-color: #fecb66;
}
.block-container:nth-child(7n + 5) {
  background-color: #c54941;
}
.block-container:nth-child(7n + 6) {
  background-color: #591c93;
}
.block-container:nth-child(7n + 7) {
  background-color: #e6e6e6;
}
.block {
  padding: 50% 0;
}

demo

xxf1996 avatar Apr 18 '19 07:04 xxf1996

预览地址

<div id="app">
  <div class="item bg-1"></div>
  <div class="item bg-2"></div>
  <div class="item bg-3 active"></div>
  <div class="item bg-4"></div>
  <div class="item bg-5"></div>
  <div class="item bg-6"></div>
  <div class="item bg-7"></div>
</div>

body {margin: 0;}
#app {
	margin: 3.3666vw 0 0 4vw;
	display: flex;
	flex-wrap: wrap;
}
.item {
	margin: 0 1.6vw 2.13333vw 0;
	width: 17vw;
	padding-bottom: 17vw;
}
.active {outline: 0.26666vw solid #222;}
.bg-1 {background-color: #424242;}
.bg-2 {background-color: #8c8c8c;}
.bg-3 {background-color: #d48b69;}
.bg-4 {background-color: #fecb66;}
.bg-5 {background-color: #c54941;}
.bg-6 {background-color: #591c93;}
.bg-7 {background-color: #e6e6e6;}

yuehaocc avatar Apr 18 '19 07:04 yuehaocc

在线demo

<div class="flex-box">
    <div class="flex-item bg-lighter-black" tabindex="1"></div>
    <div class="flex-item bg-gray" tabindex="1"></div>
    <div class="flex-item bg-darker-orange" tabindex="1"></div>
    <div class="flex-item bg-yellow" tabindex="1"></div>
    <div class="flex-item bg-red" tabindex="1"></div>
    <div class="flex-item bg-purple" tabindex="1"></div>
    <div class="flex-item bg-darker-white" tabindex="1"></div>
    <div class="flex-item"></div>
    <div class="flex-item"></div>
    <div class="flex-item"></div>
    <div class="flex-item"></div>
    <div class="flex-item"></div>
</div>

.flex-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.flex-item {
    margin-top: 1.667vw;
    width: 18vw;
    height: 18vw;
}

.flex-item:focus {
    outline: 4px solid #000;
}

@media screen and (max-width: 800px) {
    .flex-item:focus {
        outline: 2px solid #000;
    }
}

@media screen and (max-width: 414px) {
    .flex-item:focus {
        outline: 1px solid #000;
    }
}

.bg-lighter-black {
    background: #424242;
}

.bg-gray {
    background: #8c8c8c;
}

.bg-darker-orange {
    background: #d48b69;
}

.bg-yellow {
    background: #fecb66
}

.bg-red {
    background: #c54941
}

.bg-purple {
    background: #591c93
}

.bg-darker-white {
    background: #e6e6e6
}

RichardDFang avatar Apr 18 '19 07:04 RichardDFang

1. Demo

狠狠的戳这个 DEMO

2. HTML

<ul class="list">
  <li></li>
  <li></li>
  <li class="active"></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

3. CSS

li {
  position: relative;
  list-style: none;
  width: 20%;
  padding-top: 20%;
  float: left;
}
li:hover::after {
  outline: 4px solid #000;
}
li::after {
  position: absolute;
  content: '';
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin-right: 10px;
  margin-bottom: 10px;
}    
li:nth-of-type(7n+1)::after{ background-color: #424242; }
li:nth-of-type(7n+2)::after{ background-color: #8c8c8c; }
li:nth-of-type(7n+3)::after{ background-color: #d48b69; }
li:nth-of-type(7n+4)::after{ background-color: #fecb66; }
li:nth-of-type(7n+5)::after{ background-color: #c54941; }
li:nth-of-type(7n+6)::after{ background-color: #591c93; }
li:nth-of-type(7n+7)::after{ background-color: #e6e6e6; }

XinChou16 avatar Apr 18 '19 08:04 XinChou16

demo

.content{
  padding: 25px 30px;
  margin: auto;
  width: 80%;
  border:1px solid #d6d6d6;
  resize: both;
  overflow: hidden;
}
.content ul{
  list-style: none;
  padding: 0;
  margin:0 -10px 0 0;       
  overflow: visible;
}
.content ul>li {
  width: 100px;
  height: 100px;
  margin:0 10px 10px 0;
  float: left;   
}
.content ul>li:hover{
  position: relative;
  margin: -4px 6px 0 -4px;
  border:4px solid #222;
}
.content ul>li:nth-child(7n+1){background-color: #424242;}
.content ul>li:nth-child(7n+2){background-color: #8c8c8c;}
.content ul>li:nth-child(7n+3){background-color: #d48b69;}
.content ul>li:nth-child(7n+4){background-color: #fecb66;}
.content ul>li:nth-child(7n+5){background-color: #c54941;}
.content ul>li:nth-child(7n+6){background-color: #591c93;}
.content ul>li:nth-child(7n+7){background-color: #e6e6e6;}

<div class="content">
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

Fatty-Shu avatar Apr 18 '19 09:04 Fatty-Shu

在线Demo

<ul class="box">
  <li class="is-black"></li>
  <li class="is-dark-gray"></li>
  <li class="is-brown"></li>
  <li class="is-gold"></li>
  <li class="is-crimson"></li>
  <li class="is-purple"></li>
  <li class="is-gray"></li>
</ul>

body, ul, li {
  margin: 0;
  padding: 0;
}
.box {
  padding: 26px 30px 0 30px;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  list-style: none;
  box-sizing: border-box;
}
ul > li {
  width: calc((100% - 56px) / 5);
  padding-top: calc((100% - 56px) / 5);
  margin: 0 14px 16px 0;
}
li:hover{
  outline: 2px solid #222;
/*   outline-offset: -2px; */
}
li:nth-child(5n) {
  margin-right: 0;
}
.is-black {
  background-color: #424242;
}
.is-dark-gray {
  background-color: #8c8c8c;
}
.is-brown {
  background-color: #d28b6c;
}
.is-gold {
  background-color: #fdca6e;
}
.is-crimson {
  background-color: #c34a45;
}
.is-purple {
  background-color: #582391;
}
.is-gray {
  background-color: #e6e6e6;
}

asyncguo avatar Apr 18 '19 12:04 asyncguo

正方形排序

<ul class="box-list">
  <li class="box-item black"></li>
  <li class="box-item gray"></li>
  <li class="box-item orange"></li>
  <li class="box-item yellow"></li>
  <li class="box-item red"></li>
  <li class="box-item purple"></li>
  <li class="box-item lightGray"></li>
  <li class="box-item black"></li>
  <li class="box-item gray"></li>
  <li class="box-item orange"></li>
  <li class="box-item yellow"></li>
  <li class="box-item red"></li>
  <li class="box-item purple"></li>
  <li class="box-item lightGray"></li>
</ul>

html {
  font-size: 16px;
}
body {
  margin: 0;
}
.box-list {
  margin: 1rem;
  padding: 0rem;
  list-style: none;
  font-size: 0;
}
.box-item {
  display: inline-block;
  min-width: 150px;
  width: calc(20% - 1rem);
  margin: 0.5rem;
  vertical-align: top;
}
.box-item::after{
    content: '';
    display: block;
    padding-bottom: 100%;
    height: 0;
}
.box-item:hover {
  outline: 0.4rem solid #222222;
}
.black {
  background-color: #424242;
}
.gray {
  background-color: #8c8c8c;
}
.orange {
  background-color: #d48b69;
}
.yellow {
  background-color: #fecb66;
}
.red {
  background-color: #c54941;
}
.purple {
  background-color: #591c93;
}
.lightGray {
  background-color: #e6e6e6;
}

@media screen and (max-width: 1000px) {
    .box-item {
        width: calc(25% - 1rem);
    }
}
@media screen and (max-width: 768px) {
    .box-item {
        width: calc(33.3% - 1rem);
    }
}
@media screen and (max-width: 580px) {  
    .box-item {
        width: calc(50% - 1rem);
    }
}
@media screen and (max-width: 400px) {  
    .box-item {
        width: calc(100% - 1rem);
    }
}

Despair-lj avatar Apr 18 '19 13:04 Despair-lj

demo

<ul class="box" style="--itemNumber: 7">
    <li>
        <input type="radio" name="radio">
        <div class="item"></div>
    </li>
    <li>
        <input type="radio" name="radio">
        <div class="item"></div>
    </li>
    <li>
        <input type="radio" name="radio">
        <div class="item"></div>
    </li>
    <li>
        <input type="radio" name="radio">
        <div class="item"></div>
    </li>
    <li>
        <input type="radio" name="radio">
        <div class="item"></div>
    </li>
    <li>
        <input type="radio" name="radio">
        <div class="item"></div>
    </li>
    <li>
        <input type="radio" name="radio">
        <div class="item"></div>
    </li>
    <li>
        <input type="radio" name="radio">
        <div class="item"></div>
    </li>
    <li>
        <input type="radio" name="radio">
        <div class="item"></div>
    </li>
    <li>
        <input type="radio" name="radio">
        <div class="item"></div>
    </li>
    <li>
        <input type="radio" name="radio">
        <div class="item"></div>
    </li>
    <li>
        <input type="radio" name="radio">
        <div class="item"></div>
    </li>
    <li>
        <input type="radio" name="radio">
        <div class="item"></div>
    </li>
    <li>
        <input type="radio" name="radio">
        <div class="item"></div>
    </li>
    <li>
        <input type="radio" name="radio">
        <div class="item"></div>
    </li>
</ul>

ul {
    padding: 0;
}

.box {
    --itemNumber: 5;
    --margin: 1%;
    font-size: 0;
}

li {
    width: 0;
    height: 0;
    padding: calc( (100% / var(--itemNumber)) / 2 - var(--margin));
    display: inline-block;
    position: relative;
    margin: var(--margin);
}

li input {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

li input:checked+.item {
    outline: 4px solid #222;
}

.item {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
}

li:nth-child(7n+1) .item {
    background-color: #424242;
}

li:nth-child(7n+2) .item {
    background-color: #8c8c8c;
}

li:nth-child(7n+3) .item {
    background-color: #d48b69;
}

li:nth-child(7n+4) .item {
    background-color: #fecb66;
}

li:nth-child(7n+5) .item {
    background-color: #c54940;
}

li:nth-child(7n+6) .item {
    background-color: #591c93;
}

li:nth-child(7n+7) .item {
    background-color: #e6e6e6;
}

frankyeyq avatar Apr 18 '19 14:04 frankyeyq

在线DEMO

<div id="container">
  <div class="box" color="black"><div/>
</div>

html {
    font-size: 16px;
}

@media screen and (min-width: 375px) {
    html {
	/* iPhone6的375px尺寸作为16px基准，414px正好18px大小, 600 20px */
        font-size: calc(100% + 2 * (100vw - 375px) / 39);
        font-size: calc(16px + 2 * (100vw - 375px) / 39);
    }
}

@media screen and (min-width: 414px) {
    html {
	/* 414px-1000px每100像素宽字体增加1px(18px-22px) */
        font-size: calc(112.5% + 4 * (100vw - 414px) / 586);
        font-size: calc(18px + 4 * (100vw - 414px) / 586);
    }
}

@media screen and (min-width: 600px) {
    html {
	 /* 600px-1000px每100像素宽字体增加1px(20px-24px) */
        font-size: calc(125% + 4 * (100vw - 600px) / 400);
        font-size: calc(20px + 4 * (100vw - 600px) / 400);
    }
}

@media screen and (min-width: 1000px) {
    html {
	/* 1000px往后是每100像素0.5px增加 */
        font-size: calc(137.5% + 6 * (100vw - 1000px) / 1000);
        font-size: calc(22px + 6 * (100vw - 1000px) / 1000);
    }
}

body {
    margin: 0;
}

:root {
    --width: calc((100% - (4 * 0.375rem + 10 * 0.125rem)) / 5);
}

#container {
    font-size: 0;
    padding: 0.625rem;
}

.box {
    display: inline-block;
    width: var(--width);
    padding-top: var(--width);
    margin-right: 0.375rem;
    margin-bottom: 0.375rem;
    border: 0.125rem solid #fff;
    cursor: pointer;
}

.box:hover {
    border-color: #000;
}

.box:nth-child(5n) {
    margin-right: 0;
}

[color=black] {
    background: #424242;
}

[color=darkgray] {
    background: #8c8c8c;
}

[color=orange] {
    background: #d48b69;
}

[color=yellow] {
    background: #fecb66;
}

[color=red] {
    background: #c54941;
}

[color=blue] {
    background: #591c93;
}


[color=grey] {
    background: #e6e6e6;
}

smileyby avatar Apr 18 '19 14:04 smileyby

我是一个信心十足的demo!

预测自己8分~

听讲后的页面修改

<div class="square—container">
  <div class="square square-dark"></div>
  <div class="square square-grey"></div>
  <div class="square square-orange square-choosed"></div>
  <div class="square square-yellow"></div>
  <div class="square square-red"></div>
  <div class="square square-purple"></div>
  <div class="square square-sliver"></div>
</div>


html {
    font-size: 16px;
    background: #fff;
}

body{
    margin: 0;
}

@media screen and (min-width: 375px) {
  html {
    /* iPhone6的375px尺寸作为16px基准，414px正好18px大小, 600 20px */
    font-size: calc(100% + 2 * (100vw - 375px) / 39);
    font-size: calc(16px + 2 * (100vw - 375px) / 39);
  }
}
@media screen and (min-width: 414px) {
  html {
    /* 414px-1000px每100像素宽字体增加1px(18px-22px) */
    font-size: calc(112.5% + 4 * (100vw - 414px) / 586);
    font-size: calc(18px + 4 * (100vw - 414px) / 586);
  }
}
@media screen and (min-width: 600px) {
  html {
    /* 600px-1000px每100像素宽字体增加1px(20px-24px) */
    font-size: calc(125% + 4 * (100vw - 600px) / 400);
    font-size: calc(20px + 4 * (100vw - 600px) / 400);
  }
}
@media screen and (min-width: 1000px) {
  html {
    /* 1000px往后是每100像素0.5px增加 */
    font-size: calc(137.5% + 6 * (100vw - 1000px) / 1000);
    font-size: calc(22px + 6 * (100vw - 1000px) / 1000);
  }
}


.square—container{
  padding: 1rem;
}

.square{
  margin: 0.1rem;
  border: 0.2rem solid #FFF;
   width: 18%;
	height:0;
	padding-bottom: 18%;
  float : left;
}

.square-dark{
  background: #424242;
}

.square-grey{
  background: #8c8c8c;
}

.square-orange{
  background: #d38a68;
}

.square-yellow{
  background: #fecb66;
}

.square-red{
  background: #c54941;
}

.square-purple{
  background: #591c93;
}

.square-sliver{
  background: #e6e6e6;
}

.square-choosed{
  border: 0.2rem solid #2b2b2b;
}

CandyQiu avatar Apr 18 '19 16:04 CandyQiu

在线预览

  <p style="text-indent: 2em;">Hover 触发active样式</p>
  <ul class="block-wrapper">
    <li class="block-item">
      <a href="javascript:;" class="block-link" data-bg-dark></a>
    </li>
    <li class="block-item">
      <a href="javascript:;" class="block-link" data-bg-gray></a>
    </li>
    <li class="block-item">
      <a href="javascript:;" class="block-link" data-bg-sienna></a>
    </li>
    <li class="block-item">
      <a href="javascript:;" class="block-link" data-bg-gold></a>
    </li>
    <li class="block-item">
      <a href="javascript:;" class="block-link" data-bg-crimson></a>
    </li>
    <li class="block-item">
      <a href="javascript:;" class="block-link" data-bg-orchid></a>
    </li>
    <li class="block-item">
      <a href="javascript:;" class="block-link" data-bg-silver></a>
    </li>
  </ul>

    html {
        font-size: 16px;
    }

    @media screen and (min-width: 375px) {
        html {
            /* iPhone6的375px尺寸作为16px基准，414px正好18px大小, 600 20px */
            font-size: calc(100% + 2 * (100vw - 375px) / 39);
            font-size: calc(16px + 2 * (100vw - 375px) / 39);
        }
    }
    @media screen and (min-width: 414px) {
        html {
            /* 414px-1000px每100像素宽字体增加1px(18px-22px) */
            font-size: calc(112.5% + 4 * (100vw - 414px) / 586);
            font-size: calc(18px + 4 * (100vw - 414px) / 586);
        }
    }
    @media screen and (min-width: 600px) {
        html {
            /* 600px-1000px每100像素宽字体增加1px(20px-24px) */
            font-size: calc(125% + 4 * (100vw - 600px) / 400);
            font-size: calc(20px + 4 * (100vw - 600px) / 400);
        }
    }
    @media screen and (min-width: 1000px) {
        html {
            /* 1000px往后是每100像素0.5px增加 */
            font-size: calc(137.5% + 6 * (100vw - 1000px) / 1000);
            font-size: calc(22px + 6 * (100vw - 1000px) / 1000);
        }
    }

    :root{
        --wrap-padding: 25px;
        /* 注意计算公式之间需要空格 */
        --l: calc((100vw - var(--wrap-padding) *2 - 2px) / 5);
    }

    body{
        margin:0;
    }
    ul,li{
        margin:0;
        padding:0;
        list-style-type: none;
    }

    .block-wrapper{
        box-sizing: border-box;
        border: 1px solid #ccc;
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        padding: var(--wrap-padding);
    }
    .block-item{
        width: var(--l);
        height: var(--l);
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .block-link{
        --ll: calc(var(--l) - 12px);
        width: var(--ll);
        height: var(--ll);
    }

    .block-link:hover{
        outline: #222222 4px solid;
    }

    [data-bg-dark]{background: #424242;}
    [data-bg-gray] {background: #8c8c8c;}
    [data-bg-sienna] {background: #d48b69;}
    [data-bg-gold]{background: #fecb66;}
    [data-bg-crimson]{background: #c54941;}
    [data-bg-orchid]{background: #591c93;}
    [data-bg-silver]{background: #e6e6e6;}

jsweber avatar Apr 18 '19 16:04 jsweber 

  <div class="box">
    <div class="box__item black"></div>
    <div class="box__item gray"></div>
    <div class="box__item sienna"></div>
    <div class="box__item orange"></div>
    <div class="box__item red"></div>
    <div class="box__item violet"></div>
    <div class="box__item grayWhite"></div>
  </div>

body {
  padding: 0;
  margin: 0;
}
.box {
  display: flex;
  flex-wrap: wrap;
  padding: 0 3.5vw;
}
.box__item {
  width: 17vw;
  height: 17vw;
  margin-bottom: 2vw;
  margin-right: 2vw;
}
.box__item:nth-child(5n) {
  margin-right: 0;
}
.box__item.black {
  background: #424242;
}
.box__item.gray {
  background: #8c8c8c;
}
.box__item.sienna {
  background: #d38a68;
}
.box__item.orange {
  background: #fecb66;
}
.box__item.red {
  background: #c54941;
}
.box__item.violet {
  background: #581b92;
}
.box__item.grayWhite {
  background: #e6e6e6;
}
.box__item:hover {
  box-shadow: 0 0 0 4px #222222;
}

sghweb avatar Apr 19 '19 12:04 sghweb

demo

<div class='myDiv'>
  <ul>
    <li class='bg-color1'></li>
    <li class='bg-color2'></li>
    <li class='bg-color3 selected'></li>
    <li class='bg-color4'></li>
    <li class='bg-color5'></li>
    <li class='bg-color6'></li>
    <li class='bg-color7'></li>
  </ul>
</div>

body {
  margin:0;
  padding:0;
}
li{
  list-style:none;
}
.bg-color1{background: #424242;}
.bg-color2{background: #8c8c8c;}
.bg-color3{background: #d48b69;}
.bg-color4{background: #fecb66;}
.bg-color5{background: #c54941;}
.bg-color6{background: #591c93;}
.bg-color7{background: #e6e6e6;}

.myDiv{
  border:1px solid #999999;
  margin:6px;
}
.myDiv ul{
  margin:0;
  padding:0;
  font-size:0;
}
.myDiv li{
  width:18%;
  margin:1%;
  min-width: 20px;
  min-margin:4px;
  display:inline-block;
}
.myDiv li::before{
  display: block;
  content: "";
  padding-top: 100%;
}
.myDiv li:hover{
  outline: 4px solid #222222;
}
.myDiv li.selected{
  outline: 4px solid #222222;
}

tzmy avatar Apr 19 '19 13:04 tzmy

Demo https://codepen.io/crazyboy/pen/vMjRgm 1555684375

<div class="wrapper">
	<div class="item background-black"></div>
	<div class="item background-gray"></div>
	<div class="item background-yellow active"></div>
	<div class="item background-light-yellow"></div>
	<div class="item background-red"></div>
	<div class="item background-purple"></div>
	<div class="item background-light-gray"></div>
</div>

.wrapper {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-content: flex-start;
	width: 90vw;
	margin: 0 auto;
}
.background-black {
	background-color: #424242; 
}
.background-gray {
	background-color: #8c8c8c; 
}
.background-yellow {
	background-color: #d48b69; 
}
.background-light-yellow {
	background-color: #fecb66; 
}
.background-red {
	background-color: #c54941; 
}
.background-purple {
	background-color: #591c93; 
}
.background-light-gray {
	background-color: #e6e6e6; 
}
.item {
	border: 0.5vw solid transparent;
	background-clip: padding-box;
	width: 15vw;
	height: 15vw;
	margin: 1vw;

}
.item.active {
	border-color: black;
}

NeilChen4698 avatar Apr 19 '19 14:04 NeilChen4698