一、核心要点分析
----
实现下图所示功能 :
上方有一个固定导航栏 , 水平居中设置 ;
左右两侧各一个广告栏 , 垂直居中设置 ;
1、顶部导航栏要点
顶部导航栏要点 :
使用固定定位 , 上边偏移设置为...0 , 即可设置为顶部导航栏 , 其位置不受页面滚动影响 ;
/* 设置固定定位 */
position: fixed;
top: 0;
由于顶部的导航栏设置了 绝对定位 , 该元素是脱标的...;
首先 , 将盒子的顶部设置到浏览器垂直中线位置 ,
position: fixed;
/* 该盒子在浏览器左侧 */
/* 上边偏移 50% 之后减去 150 居中设置 */...top: 50%;
然后 , 左侧广告栏高度为 300 像素 , 顶部在中线位置 , 向上移动 150 像素即可使真个广告栏居中设置 ;
/* 设置垂直居中对齐 */
margin-top:...*/
margin: 0px auto;
/* 子元素与 */
padding: 10px;
/* 顶部的固定定位盒子高度 100px 由于其脱标会覆盖标准流元素