有關導覽列製作的問題

我在第3課的作業 對端傳媒的網頁做了一些模仿

以下是我的code:

https://jsfiddle.net/ajd16f2a/3/

一開始我先設定兩個ul 兩個ul都有border 用來產生兩個ul之間的水平線

然後我設定li的margin為15px 讓超連結跟下方的水平線有間隔

接著我在li內增加超連結 並對超連結設定border-bottom 取代傳統的底線

並在css欄位內設定超連結在被滑鼠hover時 底線要出現在水平線的邊緣

然後問題就來了

現在有兩個ul 我設定上方的ul內的超連結的padding為15px

這樣可以剛好讓該超連結的border-bottom貼在水平線上方

但下方的ul內的超連結 其padding我一樣設為15px

但是這個超連結的border-top卻會剛好跟水平線重疊

所以我才將超連結的paddding改為13px 要這樣才能做出跟原始網頁相同的效果

但我不能理解

為何上下li的margin都設為15px

超連結的padding也都設為15px 上下兩邊呈顯的效果會不同

如果有錯 要如何修改才能使padding相同 且上下兩邊超連結底線的效果相同呢

發問時間:2016-11-10 00:21
rcyang
0

新增推文
發問注意事項
  • 一次問一個問題。多個問題請分多次發問
  • 請盡量清楚描述您的問題
  • 請描述您做過哪些嘗試、試過哪些方法
  • 請盡可能地提供細節,幫回答者節省時間

0 個回答

還沒有人回答唷!