css静态页面搭建总结
弹性布局
弹性布局很方便,可以快速的搭建出想要的布局
1、header部分
效果图:
实现思路:
一个header部分html结构是使用一个版心里面两个div一个是logo另一个是nav导航,样式搭建好后,使用弹性布局,给版心加:display:flex;justify-content:space-between;两端对齐,刚好两个div占在版心左右两端,然后,如果想垂直居中的话再设置align-item:center;可以快速搭建出布局,不用使用浮动,不用使用margin去挤。
2、footer部分
效果图:
实现思路:
版心宽1200px,里面上下两个div,div里面分别有不同的内容,想要实现平均占满整个版心,并且每个内容两边都要有相同的间距,这个使用环绕对齐,justify:space-around;
弹性布局虽然很方便但是,他也是有缺点的,缺点是兼容问题