页面和布局属于前端程序员的必修课程。Css 并非仅仅停留在面试八股文那样的“文科”领域，也不能只局限于调用组件样式库。今天要给大家介绍一个前端页面布局学习的神器.io。

资源介绍

.io 是一个样例库。它由现代 CSS 功能构建，比如 flex 和 CSS 网格。这些功能是用原生代码实现的。该样例库包含 91 种最流行的布局页面。通过组合这些样例，你能够拥有现实生活中存在的任何可能的布局。

资源实例使用 Flex 布局实现 Card

<div style="
    display: flex;
当之前的卡片占据了所有宽度时，在下一行放置一张卡片。
    flex-wrap: wrap;
    margin-left: -8px;
    margin-right: -8px;
">
    
    <div style="
每行将会有 4 张卡片。
        flex-basis: 25%;
        padding-left: 8px;
        padding-right: 8px;
    ">
        ...
    div>
    
    ...
div>

实现一个圣杯布局

<div style="
    display: flex;
    margin-left: -8px;
    margin-right: -8px;
">
    
    <div style="
        flex: 0 0 25%;
        padding-left: 8px;
        padding-right: 8px;
    ">25%div>
    
    <div style="
        flex: 1;
        padding-left: 8px;
        padding-right: 8px;
    ">
        ...
    div>
div>

实现一个下拉菜单

<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;
    用于定位子下拉菜单。
    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;
}
第二级子下拉菜单
.p-nested-dropdowns ul ul {
    left: 100%;
    position: absolute;
    top: 0;
}
当鼠标悬停在列表项上时，改变列表项的背景颜色。
.p-nested-dropdowns li:hover {
    background-color: rgba(0, 0, 0, 0.1);
}
当鼠标悬停在列表项上时，显示直接子下拉菜单。
.p-nested-dropdowns li:hover > ul {
    display: block;
}
style>
<ul class="p-nested-dropdowns">
    <li>Homeli>
    <li>
        <div>Patternsdiv>
        
        <ul>
            <li>Layoutli>
            <li>Inputli>
            <li>
                <div>Navigationdiv>
                
                <ul>
                    <li>Breadcrumbli>
                    <li>Dropdownli>
                    <li>Menuli>
                    <li>Nested dropdownli>
                ul>
            li>
            <li>Displayli>
            <li>Feedbackli>
        ul>
    li>
    <li>Productsli>
    <li>Aboutli>
ul>

实现一个环形图表

<div style="
    position: relative;
">
    
    <div style="
        /* Center the content */
        align-items: center;
        display: flex;
        justify-content: center;
        /* Rounded border */
边框的宽度为 12 像素，其样式为实线，颜色为 rgba(0, 0, 0, 0.3)。
        border-radius: 9999px;
        /* Size */
        height: 128px;
        width: 128px;
    ">
        ...
    div>
    
    <div style="
        /* Position */
        left: 0;
        position: absolute;
        top: 0;
        /* Take full size */
        height: 100%;
        width: 100%;
如果百分比小于 50 。
clip 的范围是从 0px 到 128px ，高度是 128px ，宽度是 64px 。
如果百分比大于或等于 50 。
clip 的值为 rect(auto, auto, auto, auto)。
    ">
        
        <div style="
            /* Take full size */
            height: 100%;
            position: absolute;
            width: 100%;
            /*
            Background color of curve.
            */
边框为 12 像素的实线，颜色是 rgb(0, 68, 158)。
            border-radius: 9999px;
            /* Position */
clip 的范围是从 0px 到 64px 为水平方向，从 0px 到 128px 为垂直方向。
变换为：旋转 162 度；（百分比数值乘以 360 再除以 100）
        " />
        
        <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);
如果百分比小于 50 。
            transform: rotate(0deg);
如果百分比大于或等于 50 。
            transform: rotate(180deg);
        " />
    div>
div>

总结：

.io 有助于你更系统地学习页面布局。它能让你把学到的 CSS 知识运用到实际项目中。在学习前端时，不能盲目“学习”，而要积极思考。要追根溯源，找寻规律，做到触类旁通。

资源链接：.io/