在寫頁面的時候應該會遇到導航欄active的那個的那個小條(哎哎上圖上圖)
這裡是拿的bootstrap上的例子 平常寫的時候就是 這些 li 的border-bottom寫就行 但是根據頁面的樣式來設計的這個下標會不美觀(設計會偶爾發下來的導航的下標就是要求是 都是一樣的 不管你的每一項為多寬)
類似於這種
對於這種用css3就可以很好地解決 方便快捷 寫js也好寫出效果
就是利用偽元素
::after (在該元素末尾新增);
::befor (在元素前新增);
這裡的例子是用的befor 首先寫下導航的布局 (這裡我就不上圖了應該都會寫的);
寫完後給 li 新增偽元素
首先在第乙個 li 的內容之前新增乙個偽元素 這個元素的內容(content)為空 然後給他脫離文件定位
父元素記得寫相對定位 要不然會跑//因為是脫離文件不管你用的是after還是befor他最終結果都是一樣的;
寫完後的樣子是這樣的
然後再加上top 和left的值就好
這個值根據你的需求來寫
寫好後就變成這樣了
你看這樣不管你每一項的字有多寬我的下標一直是那麼寬
這麼寫很方便只用css寫就可以 不用再建立乙個空標籤啊什麼的了
如果想寫懸浮動畫 可以直接改變他的 left 的值就好
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...
底部導航欄 在底部導航欄上設定小紅點和數字
在這個的activity main.xml基礎上,設定小紅點。在看現在的 activity main.xml 看紅色和綠色部分的不同之處 這裡我只改了乙個按鈕 與之前不同的是,我先在linearlayout裡面套一層relativelayout,目的是利用外層的linearlayout均分四個寬度,...