注意: 代码里面都有比较详细的注释 项目代码全部已经上传至 码云 和 Github,两个仓库我会同步更新
码云 git 下载地址:git@gitee.com:gorit/Coding-with-Front-end.git
Github git 下载地址:git@github.com:CodingGorit/Coding-with-Front-end.git
有父容器和子容器,实现子容器在父容器中的居中效果
布局效果:
实现一行元素,在等高,等宽的情况下,在游览器汇总均匀排布
布局效果
两列在同一级的 div 元素,实现等高等宽效果
布局效果
多列布局实现 (等宽,非等宽,有间隙)
布局效果
自适应的效果不方便展示,可以在代码中查看
两个 div 元素,小盒子在 大盒子上下,左右都在中间
常见的 header,body, foot 的主流界面布局效果
三列元素分摊 width
头 + 尾布局
布局效果
left + item + right (left = right)
布局效果
元素在水平内部居中效果实现
布局效果
html
<div class="page">
<a href="#">首页a><a href="#"><a><a href="#">1a><a href="#">2a><a href="#">3a><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;
}
实现效果: