「前端架構師詳解Css13」案例“類天貓電器城導航”

「前端架構師詳解Css13」案例“類天貓電器城導航”并分享源代碼

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

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

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

此頁面的技術實現解析：

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

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

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

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

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

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

天學會html+css，第六天橫向導航。

今天的學習目標是這部分橫向導航菜單。

·找到中間盒子，在里面添加ul列表，結構跟昨天的縱向導航菜單一樣。文本內容快速添加，看下效果。

·然后從外到內依次寫css樣式，ul的高度跟上一層一樣，默認樣式黑點去掉，看下效果。

·給 li添加左浮動，讓它們從縱向排列變成橫向排列。在給a標簽寫css樣式之前，別忘了要添加這句代碼。

·接著去掉默認樣式下劃線，文字顏色用黑色，文字水平居中的方法，讓高度和行高一樣，看下效果。

·再給每個a標簽的右邊都加上一定的內邊距，讓它們變寬，看起來就分開了。

·最后還有一個文字變色的效果，給a標簽加上hove偽類，顏色設置為紅色，看下效果。

到此，今天的學習完成。

*請認真填寫需求信息，我們會在24小時內與您取得聯系。