网页页面设置

今天让他们一起来实现下图效果

 

可以肯定的是想要实现改下效果要使用盒模型的定位与布局，那要怎样才能更好的实现这个效果呢？

第一步先进行预想设计HTML中div的嵌套，如下图所示

 

 

第二步，对最外部的行进行简单的定义，如下图所示

 

 第三步，将内部的所有盒子放进另为一个盒子中进行居中定位

 

 第四步，将左右两边的文本放进两个盒子中进行定位，并定义其他属性

 

 第五步，对左右文本进行定义

 

 

 

 这样一个简单的网页导航条就做好了。