Pages and layouts are a must for front-end programmers. CSS was never just a “liberal arts” or a call to component style libraries. Today we introduce a front-end page layout learning tool, CSSlayout.io

Resources is introduced

Csslayout. IO is a sample library of 91 of the most popular layout pages built using native code from modern CSS features such as Flex and CSS grid. By combining them, you can have any possible layout that exists in real life.

Resource instances

Use Flex layout to implement Card layout

<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>
Copy the code

Implement a Grail layout

<! -- 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>
Copy the code

Implement a drop-down menu

<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>
Copy the code

Implement a circular diagram

<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>
Copy the code

Conclusion:

Csslayout. IO can help you systematically learn the layout of the page, and apply your CSS knowledge to the actual project. In the process of learning the front end, do not blindly “learn”, but more actively think. Trace its roots back to its source, find the law by analogy.

Resource link: csslayout.io/