情提示：以下代碼是我們邀請的前端架構師基于天貓門戶編寫的css相關代碼，現在免費分享給大家，獲取的方式為：

關注此頭條號“互聯網IT信息”——>私信發送 “天貓css” ，（注意：css全是小寫）即可得到源代碼的獲取方式。

1. 此篇文章講解目錄：

• 案例和由此案例重點講解的知識點介紹

• 案例代碼實現

2. 案例和相關知識點介紹

此案例是頁面，效果如下：

此頁面的技術實現解析：

使用css浮動，float，來控制div左側和右側顯示

3. 此案例的代碼實現

第一步：編寫導航的html，使用兩個div塊來書寫，以便下面對兩個塊進行浮動樣式設定

第二步：編寫通用樣式及最外層div容器的樣式

第三步：編寫左側導航樣式，使用float：left，讓導航位置居左顯示

第四步：編寫右側導航樣式，使用float：rihgt，讓導航位置靠右顯示

第五步：定義選中狀態下的選中條的特效