網頁頁面設置

今天讓他們一起來實現下圖效果

 

可以肯定的是想要實現改下效果要使用盒模型的定位與布局，那要怎樣才能更好的實現這個效果呢？

第一步先進行預想設計HTML中div的嵌套，如下圖所示

 

 

第二步，對最外部的行進行簡單的定義，如下圖所示

 

 第三步，將內部的所有盒子放進另為一個盒子中進行居中定位

 

 第四步，將左右兩邊的文本放進兩個盒子中進行定位，並定義其他屬性

 

 第五步，對左右文本進行定義

 

 

 

 這樣一個簡單的網頁導航條就做好了。