相見恨晚的一款前端布局神器！

頁面和布局是一門前端程式員的必修課，css 從來也不是停留在面試八股文的 “文科”，也不應該隻停留在調用元件樣式庫，今天介紹一個前端頁面布局學習神器 csslayout.io

image.png

資源介紹​

csslayout.io 是一個由現代 CSS 功能，如flex和CSS網格，使用原生代碼建構的包括91種最流行的布局頁面的樣例庫，，通過組合它們，你可以擁有現實生活中存在的任何可能的布局。

資源執行個體​

使用 Flex 布局實作 Card layout

image.png

<div style="
    display: flex;

    /* Put a card in the next row when previous cards take all width */
    flex-wrap: wrap;

    margin-left: -8px;
    margin-right: -8px;
">
    <!-- A card with given width -->
    <div style="
        /* There will be 4 cards per row */
        flex-basis: 25%;

        padding-left: 8px;
        padding-right: 8px;
    ">
        ...
    </div>

    <!-- Repeat other cards -->
    ...
</div>      

實作一個聖杯布局

image.png

<!-- Row -->
<div style="
    display: flex;

    margin-left: -8px;
    margin-right: -8px;
">
    <!--Cell with given width. Replace 25% with whatever you want -->
    <div style="
        flex: 0 0 25%;
        padding-left: 8px;
        padding-right: 8px;
    ">25%</div>

    <!-- Cell that takes remaining width -->
    <div style="
        flex: 1;
        padding-left: 8px;
        padding-right: 8px;
    ">
        ...
    </div>
</div>      

實作一個下拉菜單

image.png

<style>
/* The root */
.p-nested-dropdowns {
    /* Border */
    border: 1px solid rgba(0, 0, 0, 0.3);
    display: flex;

    /* Reset list styles */
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.p-nested-dropdowns li {
    /* Spacing */
    padding: 8px;

    /* Used to position the sub dropdown */
    position: relative;
}

/* The sub dropdown */
.p-nested-dropdowns ul {
    /* Border */
    border: 1px solid rgba(0, 0, 0, 0.3);

    /* Hidden by default */
    display: none;

    /* Absolute position */
    left: 0;
    position: absolute;
    top: 100%;

    /* Reset styles */
    list-style-type: none;
    margin: 0;
    padding: 0;

    /* Width */
    width: 200px;
}

/* The second level sub dropdown */
.p-nested-dropdowns ul ul {
    left: 100%;
    position: absolute;
    top: 0;
}

/* Change background color of list item when being hovered */
.p-nested-dropdowns li:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

/* Show the direct sub dropdown when hovering the list item */
.p-nested-dropdowns li:hover > ul {
    display: block;
}
</style>

<ul class="p-nested-dropdowns">
    <li>Home</li>
    <li>
        <div>Patterns</div>
        <!-- First level sub dropdown -->
        <ul>
            <li>Layout</li>
            <li>Input</li>
            <li>
                <div>Navigation</div>
                <!-- Second level sub dropdown -->
                <ul>
                    <li>Breadcrumb</li>
                    <li>Dropdown</li>
                    <li>Menu</li>
                    <li>Nested dropdown</li>
                </ul>
            </li>
            <li>Display</li>
            <li>Feedback</li>
        </ul>
    </li>
    <li>Products</li>
    <li>About</li>
</ul>      

實作一個環形圖表

image.png

<div style="
    position: relative;
">
    <!-- Show number of percentages -->
    <div style="
        /* Center the content */
        align-items: center;
        display: flex;
        justify-content: center;

        /* Rounded border */
        border: 12px solid rgba(0, 0, 0, 0.3);
        border-radius: 9999px;

        /* Size */
        height: 128px;
        width: 128px;
    ">
        ...
    </div>

    <!-- The curve -->
    <div style="
        /* Position */
        left: 0;
        position: absolute;
        top: 0;

        /* Take full size */
        height: 100%;
        width: 100%;

        /* If percentages is less than 50 */
        clip: rect(0px, 128px, 128px, 64px);

        /* If percentages is greater than or equals to 50 */
        clip: rect(auto, auto, auto, auto);
    ">
        <!-- The first half -->
        <div style="
            /* Take full size */
            height: 100%;
            position: absolute;
            width: 100%;

            /*
            Background color of curve.
            The border width should be the same as the area showing the percentages
            */
            border: 12px solid rgb(0, 68, 158);
            border-radius: 9999px;

            /* Position */
            clip: rect(0px, 64px, 128px, 0px);
            transform: rotate(162deg); /* Number of percentages * 360 / 100 */
        " />

        <!-- The second half -->
        <div style="
            /* Take full size */
            height: 100%;
            position: absolute;
            width: 100%;

            /*
            Background color of curve.
            The border width should be the same as the area showing the percentages
            */
            border: 12px solid rgb(0, 68, 158);
            border-radius: 9999px;

            /* Position */
            clip: rect(0px, 64px, 128px, 0px);

            /* If percentages is less than 50 */
            transform: rotate(0deg);

            /* If percentages is greater than or equals to 50 */
            transform: rotate(180deg);
        " />
    </div>
</div>      

總結：​

csslayout.io 能夠幫助你更好的系統的學習頁面布局，将你學到的 CSS 知識利用在實際項目之中，在學習前端的過程中，不能盲目“學習”，更要積極的思考。追其根本溯其源頭，找尋規律觸類旁通。

資源連結：https://csslayout.io/

最近組建了一個江西人的前端交流群，如果你也是江西人可以加我微信 ruochuan12 拉你進群。

················· 若川出品 ·················

今日話題

略。歡迎分享、收藏、點贊、在看我的公衆号文章~

一個願景是幫助5年内前端人走向前列的公衆号

可加我個人微信 ruochuan12，長期交流學習

推薦閱讀

​​我在阿裡招前端，我該怎麼幫你？（現在還能加我進模拟面試群）​​

​​如何拿下阿裡巴巴 P6 的前端 Offer​​