分享 10 个常见的 CSS 页面布局代码片段

最新推荐文章于 2024-04-26 17:20:09 发布

原创

最新推荐文章于 2024-04-26 17:20:09 发布 · 986 阅读

标签

#css #前端 #css3

收录于

本文分享了10个常见的CSS页面布局代码片段，包括卡片布局、圣杯布局、瀑布流、相同高度列、侧边导航栏、简单网格布局、平分屏幕、底部吸附、顶部吸附和内容吸附等，采用简洁的实现方式，适用于多种业务场景。

大家好，本篇文章将分享我们业务中很常见的10个页面布局代码片段，这10 种页面布局很常见，实现方式也有很多种，本篇文章将用最简单的新方式进行实现，希望对大家有所启发。

1、Card layout（卡片布局）

如下图所示，卡片布局是我们常见的一种页面布局。

HTML部分

<div?class="cards">
????<!--?需分配宽度给卡片单元格?-->
????<div?class="cards__item">
????????...
????</div>

????<!--?此处重复多个?cards__item?卡片单元格-->
????...
</div>

CSS部分

.cards?{
????display:?flex;
????/*?超出容器宽度自动换行?*/
????flex-wrap:?wrap;
????margin-left:?-8px;
????margin-right:?-8px;
}

.cards__item?{
????/*?初始化每个卡片的宽度，占据父容器的?1/4?*/
????flex-basis:?25%;
????padding-left:?8px;
????padding-right:?8px;
}

2、Holy grail（圣杯布局）

圣杯布局，不用我多说，想必每个前端人都做过这样的页面结构，如下图所示

HTML部分

<div?class="container">
<!--?顶部?-->
????<header>
????????...
????</header>
????<main?class="container__main">
????????<!--?左边导航?-->
????????<aside?class="container__left">...</aside>

????????<!--?中部?-->
????????<article?class="container__middle">...</article>

????????<!--?右边导航?-->
????????<nav?class="container__right">...</nav>
????</main>