偽元素寫導航欄底部劃標

2021-08-20 11:59:29 字數 970 閱讀 9106

在寫頁面的時候應該會遇到導航欄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均分四個寬度,...