小公尺官網頭部選單欄需要注意的問題

2021-10-07 21:28:29 字數 621 閱讀 4551

我是這樣做的,首先設定乙個父div,設定寬高,和背景顏色,width:100%,背景顏色:#333,

然後再用乙個div容器裝左右兩個ul,頭部選單標題用

包裹,左邊左浮動,右邊有浮動實現在同一行顯示。

小公尺官網選單標題間的垂直分割線是用「|」做的,垂直分割線有多種做法

(1)直接鍵盤輸入「|」,優點:簡單那、快捷,想加的地方直接加;缺點:可控性差;

(2)可以用邊框去做,border-right;缺點:只能用邊框的高度,可控性也差;

(3)我這裡是用偽類做的,可以很方便控制寬高。

li:after

去除偽類最後的分割線:用偽類做分割線是很常用的,但是很多時候用偽類加分割線,最後乙個元素後面其實是不用加的,這時候我們就要把最後乙個元素偽類的寬高屬性設為0就可以了。使用:元素名:last-child:after

這是最終實現的效果:

具體**如下:

建立選單欄

1 定義狀態列類 cstatusbar 2 呼叫creat 建立狀態列 3 呼叫setindicators 新增面板 4 呼叫setpaneinfo 設定面板寬度和樣式 5 呼叫setpanetext 設定狀態列面板文字 6 呼叫repositionbars 顯示狀態列 例項 現在對話方塊了中定義m...

導航選單欄製作

做法一 效果圖 導航選單.html charset gb2312 導航選單title rel stylesheet href style.css type text css head id daohang id d1 href 首頁a div id d2 關於醫學院div id d3 就業指導中心d...

Swing測試選單欄

public static void main string args jmenuitem openmenuitem new jmenuitem 開啟 開啟項事件 openmenuitem.addactionlistener new actionlistener catch exception e1...