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

大家好，我是若川。歡迎加我微信?ruochuan12，長期交流學習。今天給大家推薦一款非常實用的前端頁面布局神器，點擊下方卡片關注我，或者查看源碼系列文章。

頁面和布局是一門前端程序員的必修課，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>