自检：前端知识清单——手写布局

前言

题目来自ConardLi的blog
写的是自己的题解，水平有限，所以仅供参考
代码会整合在github，觉得有帮助就给个star吧~

正文

二、HTML和CSS

手写

1.手写图片瀑布流效果

通过css multi-column去实现多列布局实现瀑布流

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            background: #eaedf1;
        }

        #myModal {
            display: none;
            position: fixed;
            left: 0;
            top: 0;
            width: 100vw;
            height: 100vh;
            opacity: 0;
        }

        #bg {
            display: none;
            position: fixed;
            left: 30%;
            top: 10%;
            width: 40vw;
            height: 80vh;
            justify-content: center;
            align-items: center;
        }

        #img {
            height: 100%;
            object-fit: contain;
            animation-name: zoom;
            animation-duration: 0.6s;
        }

        .root {
            margin: 0 auto;
            width: 1200px;
            column-count: 4;
            column-gap: 20px;
            padding-bottom: 20px;
        }

        .item {
            margin-bottom: 10px;
            break-inside: avoid;
            background: #fff;
            border-radius: 15px;
            overflow: hidden;
        }

        .item:hover {
            box-shadow: 2px 2px 2px rgba(71, 70, 70, 0.5);
            opacity: 0.8;
        }

        .itemImg {
            width: 100%;
            vertical-align: middle;
            cursor: pointer;
        }

        @keyframes zoom {
            from {
                transform: scale(0)
            }

            to {
                transform: scale(1)
            }
        }

        @media screen and (min-width:700px) and (max-width: 1024px) {
            .root {
                width: 700px;
                column-count: 3;
            }

            #img {
                max-width: 100%;
                max-height: 100%;
            }

            #bg {
                left: 20%;
                width: 60vw;
            }
        }

        @media screen and (min-width:420px) and (max-width: 700px) {
            .root {
                width: 400px;
                column-count: 2;
            }

            #img {
                max-width: 100%;
                max-height: 100%;
            }

            #bg {
                left: 15%;
                width: 70vw;
            }
        }

        @media screen and (max-width: 420px) {
            .root {
                width: 250px;
                column-count: 1;
            }

            #img {
                width: 100%;
                height: 100%;
                object-fit: fill;
            }

            #bg {
                left: 10%;
                width: 80vw;
            }
        }
    </style>
</head>

<body>
    <div class="root">
        <div class="item">
            <img onclick="spread(this)" class="itemImg" src="./img1.jpg" alt="">
        </div>
        <div class="item">
            <img onclick="spread(this)" class="itemImg" src="./img2.jpg" alt="">
        </div>
        <div class="item">
            <img onclick="spread(this)" class="itemImg" src="./img3.jpg" alt="">
        </div>
        <div class="item">
            <img onclick="spread(this)" class="itemImg" src="./img4.jpg" alt="">
        </div>
        <div class="item">
            <img onclick="spread(this)" class="itemImg" src="./img5.jpg" alt="">
        </div>
        <div class="item">
            <img onclick="spread(this)" class="itemImg" src="./img6.jpg" alt="">
        </div>
        <div class="item">
            <img onclick="spread(this)" class="itemImg" src="./img7.jpg" alt="">
        </div>
        <div class="item">
            <img onclick="spread(this)" class="itemImg" src="./img8.jpg" alt="">
        </div>
        <div class="item">
            <img onclick="spread(this)" class="itemImg" src="./img9.jpg" alt="">
        </div>
        <div class="item">
            <img onclick="spread(this)" class="itemImg" src="./img10.jpg" alt="">
        </div>
    </div>
    <div id="myModal">
    </div>
    <div id="bg">
        <img id="img">
    </div>
    <script>
        const modal = document.getElementById('myModal')
        const img = document.getElementById('img')
        const bg = document.getElementById('bg')

        const spread = function (e) {
            modal.style.display = 'block'
            bg.style.display = 'flex'
            img.src = e.src
        }
        modal.onclick = function () {
            modal.style.display = 'none'
            bg.style.display = 'none'
        }
    </script>
</body>

</html>

效果图：


2、使用CSS绘制几何图形（圆形、三角形、扇形、菱形等）

圆形：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .circle {
            border-radius: 50%;
            width: 200px;
            height: 200px;
            background: red;
        }
    </style>
</head>

<body>
    <div class="circle">

    </div>
</body>


</html>

三角形：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .triangle {
            width: 0;
            height: 0;
            border: transparent 100px solid;
            border-bottom-color: red;
        }
    </style>
</head>

<body>
    <div class="triangle">

    </div>
</body>

</html>

扇形：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .triangle {
            width: 0;
            height: 0;
            border: transparent 100px solid;
            border-bottom-color: red;
            border-bottom-left-radius: 50%;
            border-bottom-right-radius: 50%;
        }
    </style>
</head>

<body>
    <div class="triangle">

    </div>
</body>

</html>

菱形：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .square {
            width: 100px;
            height: 100px;
            clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
            background: red
        }
    </style>
</head>

<body>
    <div class="square">

    </div>
</body>

</html>

3、使用纯CSS实现曲线运动（贝塞尔曲线）

暂时不会，待更新

4、实现常用布局（三栏、圣杯、双飞翼、吸顶），可是说出多种方式并理解其优缺点

三栏布局：

  • float方案
    html:
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .main {
            height: 100vh;
        }

        * {
            margin: 0;
            padding: 0;
        }

        .left-wrap {
            float: left;
            width: 200px;
            height: 100vh;
            background: #1ba1e2
        }

        .right-wrap {
            float: right;
            width: 200px;
            height: 100vh;
            background: #1ba1e2
        }

        .center-wrap {
            width: 100%;
            height: 100vh;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="left-wrap"></div>
        <div class="right-wrap"></div>
        <div class="center-wrap">
            This is the center
        </div>
    </div>
</body>

</html>
  • position方案
    html:
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .main {
            height: 100vh
        }

        .left {
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            background: #1ba1e2;
            height: 100vh;
        }

        .right {
            position: absolute;
            top: 0;
            right: 0;
            width: 200px;
            background: #1ba1e2;
            height: 100vh;
        }

        .main {
            margin: 0 200px;
            height: 100vh
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="left"></div>
        <div class="right"></div>
        <div class="center">this is a center</div>
    </div>
    <script>

    </script>
</body>

</html>
  • flex方案
    html:
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .main {
            display: flex;
        }

        * {
            padding: 0;
            margin: 0;
        }

        .left {
            width: 200px;
            background: #1ba1e2;
            height: 100vh;
        }

        .center {
            flex: 1;
            height: 100vh;
        }

        .right {
            width: 200px;
            order: 1;
            background: #1ba1e2;
            height: 100vh;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </div>
</body>

</html>
  • grid方案
    html:
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .container {
            position: relative;
            display: grid;
            grid-template-columns: 200px auto 200px;
            grid-template-rows: 100%;
            grid-template-areas: "lt cr rt"
        }

        * {
            margin: 0;
            padding: 0;
        }

        div {
            height: 100vh
        }

        .center-wrap {
            grid-area: cr;
        }

        .left-wrap {
            grid-area: lt;
            background: #1ba1e2;
        }

        .right-wrap {
            grid-area: rt;
            background: #1ba1e2;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="left-wrap"></div>
        <div class="center-wrap"></div>
        <div class="right-wrap"></div>
    </div>
</body>

</html>
  • table方案：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            width: 100%;
            height: 100%;

        }

        table {
            width: 100%;
            height: 100%;
            text-align: center;
            font-size: 30px;

        }

        table tr td {
            border-width: 0;
        }
    </style>
    <title>Document</title>
</head>

<body>
    <table>
        <tbody>
            <tr height='100%''>
                <td width = ' 200' bgcolor="#1ba1e2">

                </td>
                <td>
                    this is center
                </td>
                <td width='200' bgcolor="#1ba1e2">

                </td>
            </tr>
        </tbody>
    </table>
</body>

</html>

圣杯布局：暂时不会
双飞翼布局：暂时不会
吸顶布局：暂时不会

5、实现等比宽高的div

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容