BassCSS 页面布局实战指南：从导航到页脚的完整构建方案-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00565/article/details/148488673

BassCSS 页面布局实战指南：从导航到页脚的完整构建方案

basscss Low-level CSS Toolkit – the original Functional/Utility/Atomic CSS library 项目地址: https://gitcode.com/gh_mirrors/ba/basscss

本文将基于 BassCSS 框架，详细介绍如何构建一个完整的网页布局。BassCSS 是一个轻量级的 CSS 工具集，通过组合简单的工具类来实现复杂的布局效果。

全局导航设计

导航栏是网站的重要组成部分，BassCSS 提供了简洁的方式来实现响应式导航：

<nav class="clearfix white bg-black">
  <div class="sm-col">
    <a href="/" class="btn py2">Home</a>
    <a href="/" class="btn py2">Burgers</a>
    <a href="/" class="btn py2">Fries</a>
  </div>
  <div class="sm-col-right">
    <a href="/" class="btn py2">About</a>
  </div>
</nav>

关键点解析：

clearfix 类确保浮动元素正确包含
sm-col 和 sm-col-right 实现响应式布局
btn 类提供一致的按钮样式
py2 控制垂直内边距

英雄横幅设计

英雄横幅是页面的视觉焦点，BassCSS 可以轻松创建吸引人的横幅：

<header class="center px3 py4 white bg-gray bg-cover bg-center"
  style="background-image: url(...)">
  <h1 class="h1 h0-responsive caps mt4 mb0 regular">Hamburgers</h1>
  <p class="h3">Artisinal ground chuck creations</p>
  <a href="#" class="h3 btn btn-primary mb4">Pancake</a>
</header>

设计技巧：

bg-cover 和 bg-center 控制背景图显示
响应式标题使用 h0-responsive 类
center 类实现内容居中
按钮使用 btn-primary 突出显示

三栏内容布局

三栏布局是常见的页面结构，BassCSS 的网格系统使其实现变得简单：

<section class="container px2 py3">
  <div class="clearfix mxn2">
    <div class="sm-col sm-col-4 px2">
      <h2 class="h1 mb0">Bacon</h2>
      <p>...</p>
    </div>
    <!-- 其他两栏类似 -->
  </div>
</section>

布局要点：

container 限制最大宽度
mxn2 负外边距抵消列内边距
sm-col-4 表示在小屏幕及以上占4/12宽度
mb0 去除标题下边距

博客内容区域

博客区域通常需要主内容和侧边栏，BassCSS 可以灵活实现：

<section class="container px2 py3">
  <h1 class="mt0">Blog</h1>
  <div class="clearfix mxn2">
    <div class="sm-col sm-col-8 md-col-9 px2">
      <!-- 主内容 -->
    </div>
    <div class="sm-col sm-col-4 md-col-3 px2 sm-show">
      <!-- 侧边栏 -->
    </div>
  </div>
</section>

响应式技巧：

sm-show 控制侧边栏在小屏幕显示
不同断点使用不同列宽比例
mt0 去除顶部外边距

图片画廊实现

BassCSS 的网格系统特别适合创建响应式图片画廊：

<section class="container px2 py3">
  <h1 class="mt0">Gallery</h1>
  <div class="clearfix mxn2">
    <div class="col col-6 sm-col-4 md-col-3 lg-col-2 px2 mb3">
      <a href="#" class="block">
        <img src="..." class="block" />
      </a>
    </div>
    <!-- 其他图片项 -->
  </div>
</section>

画廊特点：

多种断点定义不同列数
block 类确保图片正确显示
mb3 控制底部外边距
使用清除浮动确保正确换行

页脚设计

完整的页面需要专业的页脚，BassCSS 提供了简洁的实现方式：

<footer class="white bg-black">
  <div class="px2 py3 container">
    <div class="clearfix mxn2">
      <div class="col col-6 md-col-3">
        <!-- 页脚栏目 -->
      </div>
      <!-- 其他栏目 -->
    </div>
    <p class="h6 mb0">&copy; 2014 Hamburgers, LLC</p>
  </div>
</footer>

页脚要点：