常见 css 布局整理-CFANZ编程社区

常用 css 布局学习整理

一、垂直居中
二、等分布局
三、等高布局
四、多列布局
五、局中布局（垂直居中）
六、全屏布局
七、三列布局
八、圣杯布局
九、双飞翼布局
十、水平居中
十一、css 布局特别整理

11.1 快速制作一行底部导航栏

注意：代码里面都有比较详细的注释

项目代码全部已经上传至码云和 Github，两个仓库我会同步更新

码云 git 下载地址：git@gitee.com:gorit/Coding-with-Front-end.git

Github git 下载地址：git@github.com:CodingGorit/Coding-with-Front-end.git

一、垂直居中

有父容器和子容器，实现子容器在父容器中的居中效果

布局效果：

常见 css 布局整理_css

二、等分布局

实现一行元素，在等高，等宽的情况下，在游览器汇总均匀排布

布局效果

常见 css 布局整理_垂直居中_02

三、等高布局

两列在同一级的 div 元素，实现等高等宽效果

布局效果

常见 css 布局整理_css_03

四、多列布局

多列布局实现（等宽，非等宽，有间隙）

布局效果

常见 css 布局整理_css_04

自适应的效果不方便展示，可以在代码中查看

五、局中布局（垂直居中）

两个 div 元素，小盒子在大盒子上下，左右都在中间

常见 css 布局整理_html_05

六、全屏布局

常见的 header，body， foot 的主流界面布局效果

常见 css 布局整理_垂直居中_06

七、三列布局

三列元素分摊 width

常见 css 布局整理_css_07

八、圣杯布局

头 + 尾布局

布局效果

常见 css 布局整理_git_08

九、双飞翼布局

left + item + right （left = right）

布局效果

常见 css 布局整理_css_09

十、水平居中

元素在水平内部居中效果实现

布局效果

常见 css 布局整理_css_10

十一、css 布局特别整理

11.1 快速制作一行底部导航栏

html

<div class="page"><!-- 页码的制作 -->
  <a href="#">首页</a><a href="#"><</a><a href="#">1</a><a href="#">2</a><a href="#">3</a><a href="#">...</a><a href="#">></a><a href="#">末页</a>
</div>

css

.page {
  height: 40px;
  margin-top: 10px;
  text-align: center;
}

.page a {
  /* 内联元素 和 块级元素的特性都有 */
  display: inline-block;
  border: 1px solid #E8E8E8;
  text-decoration: none;
  margin: 5px;
  padding: 5px 10px;
}

.page a:link, .page a:visited {
  color: #000;
}

.page a:hover,.page a:active {
  color: #FFF;
  background-color: #cc1b1b;
}

实现效果：

常见 css 布局整理_css_11