快速做出橫向選單樣式 超實用

2021-08-06 00:03:19 字數 501 閱讀 5392

1.ul +li+css模式

第一步:建立乙個無序列表

第二步:隱藏li的預設樣式

.test ul 現在的效果是沒有圓點了:

第三步:關鍵的浮動

.test li

這裡是選單變成橫向的關鍵,我們給li元素加上乙個「float:left;」屬性,讓每個li浮動在前面乙個li的左面。

第四步:調整寬度

在css中新增定義width:100px指定乙個li的寬度是100px,當然你可以根據你的需要調整數值:

.test li

test.html檔案

2.div+css模式

主要講每個選單div加上float:left樣式即可

橫排選單導航

導航1導航2

導航3

ul li css 做橫向選單

第一步 建立乙個無序列表 我們先建立乙個無序列表,來建立選單的結構。是 第二步 隱藏li的預設樣式 因為看起來不是很好看,選單通常都不需要li預設的圓點,我們給ul定義乙個樣式來消除這些圓點。當然,為了更好的控制整個選單,我們把選單放在乙個div裡。頁面 變成 css定義為 test ul 說明 t...

ios 橫向滾輪效果 ios橫向選單 頁面滑動

ios橫向選單 頁面滑動 檢視次數 9122 大小 11 b demo 橫向選單 頁面滑動 例子uiviewcontroller vc1 uiviewcontroller alloc init vc1.view setbackgroundcolor uicolor redcolor uiviewco...

樣式彈出選單

這個想法來自veer.com,以及他們如何處理t恤尺寸之類的下拉列表。謝謝dennissa。演示 html 我們將在內包裝乙個常規文字輸入,該文字輸入還包含乙個無序列表,該列表將代表彈出選單的值。css 預設情況下,這些列表是隱藏的,但是當單擊觸發它們顯示時,仍會保留所有樣式並準備就緒。size s...