Footer自适应底部

网站的底部是整个网页的最次要区域,基本用于展示某些申明或者联系方式等;AXUI提供的footer板块已经内置了多个子元素供用户组合使用,包含图标按钮组、辅助栏目导航组、版权申明组等。

简单使用

网页底部即footer部分通常是静态的展示网站的相关信息,按道理本框架不需要撰写这部分代码,但是考虑到一些快捷项目需求,本框架整理了部分常用板块写入框架中,以飨用户。

网页底部以_footer样式类命名,每个小部分以role=*属性命名;每个小部分通过合理的排列组合完成footer的搭建。

_footer默认是100%通栏宽,如果希望实现固定宽度的容器,可考虑使用_box样式类。

  • 输出
  • HTML
  •                 
                    
                

role=icons

这部分主要存放简易的图标字体,支持使用文字。

role=balls

这部分主要存放带圆形背景的图标字体。

  • 输出
  • HTML
  •                 
                    
                

role=signs

这部分主要存放图片类图标。

role=nav

这部分主要存放主导航。

role=subnav

这部分主要存放便于SEO的或辅助类的主要子导航。

role=security

这部分主要存放国家监管类的图片和图标。

  • 输出
  • HTML
  •                 
                    
                

role=contact

这部分主要用来存放带图标的联系方式,当然图片是可选的。

role=qrcode

这部分主要用来存放一张图片,这张图片通常是二维码或条码。

  • 输出
  • HTML
  •                 
                    
                

role=cprt

cprt是copyright的简写。这部分主要存放版权所有的内容,支持超链接和小图片。

  • 输出
  • HTML

role=ignore

这部分主要存放其他的、辅助性质的、可有可无的、可忽视的内容。支持使用超链接和小图片。

  • 输出
  • HTML
  •                 
                    
                

组合一

  • 输出
  • HTML
  •                 
                    
                

组合二

  • 输出
  • HTML

组合三

  • 输出
  • HTML

组合四

  • 输出
  • HTML

组合五

组合六

本例中对二维码图片使用了_w-x2样式类,x2即为按钮高度*2(38px*2)。

  • 输出
  • HTML

组合七

组合八

组合九

  • 输出
  • HTML