知乎導航欄實現

2021-07-11 21:37:42 字數 513 閱讀 9458

導航欄,下拉時仍存在,故使用了固定布局(position:fixed;)。左右有一定空閒,故可以用自適應布局來實現。整個過程不是很難,只是在實現文字垂直居中時走進了誤區。

先開始指定導航欄到合適的height,此值比文字字型大小大,實現文字的垂直居中時出現了問題。考慮到ie下無法實現vertical-align所以放棄此方法,而設定line-height的值與height的值相等在百分比模式下無法實現文字的垂直居中,我特意看了下源**,發現原**中指定了px,此時令line-height和height的值都為45px。

看到偽類元素了,不過突然發現這個bug就是由於指定導航欄的高度大於文字高度導致的,所以不指定導航欄高度,同時指定padding來實現文字上下留白。

至此導航完畢。遂加上固定佈居,突然出現了個bug,右邊有一段空餘,然後加上right=0(目前還沒想清楚為什麼)。所有**如下:

tonyhzw

提問知乎

首頁 話題

發現訊息

CSS實現側邊欄導航

charset utf 8 title type text css 隱藏checked核取方塊 sidemenu sidemenu checked aside sidemenu checked wrap aside h2 控制側邊欄進出的按鈕 外部包裹 wrap 控制側邊欄進出的按鈕 內部文字樣式 ...

Android實現底部導航欄

字數 1058 閱讀 13296 喜歡 49 超簡單,幾行 搞定android底部導航欄 補充底部導航欄的實現也不難,就是下邊是幾個tab切換,上邊一般是乙個framelayout,然後framelayout中切換fragment。網上有不少關於android底部導航欄的文章,不過好像都只是關於下邊...

vue 實現底部導航欄

解決辦法 1.新建四個或者多個頁面 index.vue,classify.vue,shoppcart.vue,my.vue 2.新建tabbar.vue頁面 tab bar 名叫插槽,在這邊主要起到的是佔位的作用3.新建tabbaritem.vue頁面 class tab bar item clic...