怎麼在CSS裡設定導航的分割線,用CSS寫導航條的分割線

時間 2021-10-27 05:28:07

1樓:慧走得庚遠

把上面那個豎線設為line.jpg**

然後給li呼叫背景** 就可以了~~

#ul_li

這樣是最簡單有效快速的辦法~~

很高興為您服務,希望您能及時採納!

2樓:回憶

在css裡設定導航的分割線,首先,一般做導航條,都是通過ul、li來做,將ul包裹在一個div中,然後設定好width和height,分隔線,換個理解,給li一個右邊的邊框就可以了,通過**來理解:

muli1

muli1

muli1

muli1

3樓:匿名使用者

你也可以不用**實現,首頁

你可以把標籤寫成這樣,排版就用span來排,然後a標籤高度設定低一點,剛好跟文字一樣高,再加border-left就可以了

4樓:匿名使用者

兩種方法:

1、如果邊框線是純色,沒什麼效果,直接給a或者是a標籤中巢狀span,給span加右邊框

2、如果邊框線有漸變或其它效果,可以截圖,給a或li新增背景**,定位在右邊,上下居中,不鋪蓋(此方法同樣適用於純色)

5樓:匿名使用者

設定分割線在我多個的經驗施行後,沒有一成不變通用的方法,得根據要求採用最適合的。

1、使用字元“|”,適合導航欄間距不一致時,也就是不適合你。

2、採用背景方式,背景**即是那條間隔線,需要形成jpg、gif、png格式的小**,在背景裡設定居左,並控制一下垂直位移,這樣就會出現你第一張圖的要求。

3、但最後一項可能會出現沒有間隔線的情況,那麼就多新增一個空的li或a,這樣就多出來一個間隔線,好看。

具體細節需要把握,**舉例:

xlmenu a

.xlmenu a.first

效果:小圖示:

很小很小的一條線。。。

6樓:匿名使用者

border-top/border-bottom看錯了,

糾正一下,border-left-style用solid,再加一個padding-left

用css寫導航條的分割線

7樓:濮靈寒

最後一個取消的方法很簡單啊

兩種方法

1:單獨設定class 寫一個border:none;

2:li:last

這種網頁導航欄,欄目中間有“丨”分割線,如何在html裡實現?(div+css佈局問題)

8樓:匿名使用者

基本就是這麼幹的!你闊以參考一下!

首頁新聞中心

企業簡介

新聞中心

企業簡介

9樓:匿名使用者

上面**中應該用的是m0樣式,

.m0另一種方法

做成了背景**。背景**就是一條白色的豎線,、background:url(bg.png) no-repeat right center;

10樓:爛蘋果

方法很多,就單你這個也是可以用css控制的。

.w980

這個是控制線和a標籤文字的,然後單獨寫a標籤的屬性.w980 a

這樣就可以區分開了

不過這個不太好控制"|"的具體之類的

那麼就寫成首頁|

獨家.w980 span

.w980 a

這樣就更直接區分了。

還可以把"|"去掉,使用邊框來弄。這樣可以弄漸變顏色。想弄那種好看的,還可以用**當背景弄,各式各樣的方法都可以實現。

11樓:慕刓辭

他這裡用的是css偽類元素,就相當於|符號是以類加上去的,並不是直接寫上去的,

你可以看看這個介紹,你那個|符號應該是用過css的after屬性新增的

請問用css做導航欄的分割線,但是分割線是一張**,而且不能用img標籤,該怎麼做?(div+css) 5

12樓:匿名使用者

link1

link1

li上面加背景圖

懂點css進一下,li做的導航條的分割豎線怎麼變得短一些??

13樓:匿名使用者

首頁新聞 娛樂

教育不知道你要的是不是這樣的效果

14樓:

其實你仔細看會

來發源現這只是兩條邊框,視覺上看起來像是槽狀分割線,可以給

ul加border-bottom:1px solid #777; 然後給li加上border-bottom:1px solid #fff;

15樓:信念

li裡面要包含a標籤抄,襲然後把a標籤變成塊,再給a標籤一個右邊框,就是你說的分割豎線,這樣來控制a標籤的高,就可以控制到分割豎線的高了。

具體**:

導航一導航二導航三

16樓:匿名使用者

其實有一個很簡單就可以解決的辦法

就是你直接用鍵盤上的那個豎線,那它回寫進

新聞|娛樂|

教育|論壇|答

....

還教你一招就是

有時候明明可以很簡單的用table就能解決的問題我們還用div一個個寫,增加了很多多餘的**難道這就是真正意義上的div時代嗎?

我要的是讓瀏覽更順暢,讓維護更方便....

怎麼用onclick事件設定css中的屬性

交大之子許明華 解答 1,例項一 直接使用html html 點我2,例項二 js html js function changestyle obj html 點我 書香學程式設計 vue實踐 css樣式position display float屬性對比使用 ie下,onclick this.st...

的頁首該怎麼設定,在Word裡怎麼設定每頁不同的頁首?

在需要區分不同程式檔案的第一行第乙個字元處單擊,選擇插入 分隔符,選擇標籤中選擇分節符 連續,使文章分成兩節!這是最重要的一點,因為word會根據這個來區分不同的頁面。2 在插入分隔符的這一頁雙擊頁首部分,這時會看到所有相同的頁首 單擊頁首 頁尾工具條中的 與上一節相同 按扭,右數第五個 此時在頁首...

PS裡的魔棒工具怎麼設定,PS裡用魔棒工具怎麼減少選定區域

魔術棒不好使容易產生很多小毛邊,建議使用鋼筆工具,這樣精確,配合羽化工具作出來的圖比較自然。 它的作用是選取顏色接近的部分。可以通過設定也決定顏色接近的程度。 容差是魔棒工具的指標,選取東西的時候設定容差是很重要的。如果設大,他取的顏色範圍就會超大,顏色差異越大 完全錯誤,容差越大,選擇的顏色接近程...