CSS Footer

Last updated: 1 month ago

Category: Basic

The footer of a website is the least prominent area of a webpage, typically used to display disclaimers or contact information. OrcaUI's footer component comes with built-in sub-elements for users to combine, including icon button groups, auxiliary navigation groups, copyright statement groups, and more.

Basic Usage

The footer section of a webpage typically displays static website information. While this framework doesn't necessarily need to include this code, we've prepared commonly used components for quick project implementation.

The footer uses the _footer class, with each subsection identified by rep=* attributes. These subsections can be combined flexibly to build complete footers.

By default, _footer spans 100% width. For fixed-width containers, consider using the _container class.

For details about _container usage, click here.

rep=icons

This section contains simple icon fonts and supports text labels.

rep=balls

This section contains icon fonts with circular backgrounds.

rep=signs

This section contains image-based icons.

rep=nav

This section contains primary navigation links.

rep=subnav

This section contains SEO-friendly or auxiliary sub-navigation.

rep=security

This section contains system security or platform-related images/icons.

rep=contact

This section contains contact information with optional icons.

rep=qrcode

This section contains images, typically QR codes or barcodes.

rep=cprt

"cprt" is short for "copyright". This section contains copyright information and supports hyperlinks and small images.

rep=ignore

This section contains miscellaneous, auxiliary, or non-essential content that can be ignored. Supports hyperlinks and small images.

Combination 1

Combination 2

Combination 3

Combination 4

Combination 5

Combination 6

本例中对二维码图片使用了_w-2样式类，即为按钮高度*2（40px*2）。

Combination 7

Combination 8

Combination 9