问题：关于贴友分类菜单的实现_html/css_WEB-ITnose
来源：http://www.ido321.com/868.html
贴友需求，实现图示菜单的分类
我对于这个问题的实现，不足之处，请求指正。
html：
1: <body>
2: <div class="test">
3: <h3 id="所有分类">所有分类</h3>
4: <div class="fenlei">
5: <h4 id="精美包包">精美包包</h4>
6: <ul>
7: <li>双肩包</li>
8: <li style="margin-left:40px;">手提包</li>
9: <li>女包</li>
10: <li style="margin-left:57px;">男包</li>
11: </ul>
12: </div>
13: <div class="fenlei">
14: <h4 id="时尚手表">时尚手表</h4>
15: <ul>
16: <li>充电器</li>
17: <li style="margin-left:40px;">男表</li>
18: <li>女表</li>
19: <li style="margin-left:57px;">情侣表</li>
20: </ul>
21: </div>
22: <div class="fenlei">
23: <h4 id="时尚化妆品">时尚化妆品</h4>
24: <ul>
25: <li>润肤霜</li>
26: <li style="margin-left:40px;">面膜</li>
27: <li>彩妆用品</li>
28: </ul>
29: </div>
30: <div class="fenlei">
31: <h4 id="潮流卫衣">潮流卫衣</h4>
32: <ul>
33: <li>男士卫衣</li>
34: <li style="margin-left:30px;">女士卫衣</li>
35: <li>进口卫衣</li>
36: </ul>
37: </div>
38: </div>
39: </body>
css:
1: *
2: {3: margin: 0 auto;
4: }
5: .test
6: {7: width: 200px;
8: height: 350px;
9: border: 1px solid red;
10: }
11: h3
12: {13: background-color: #B90101;
14: padding: 5px;
15: color: white;
16: }
17: .fenlei
18: {19: border-bottom: 1px solid #ccc;
20: width: 190px;
21: margin-top: 5px;
22: margin-left: 5px;
23: float: left;
24: }
25: .fenlei ul
26: {27: position: relative;
28: margin-left: -30px;
29: float: left;
30: }
31: .fenlei li
32: {33: float: left;
34: text-align: left;
35: margin-left: 20px;
36: margin-top: 5px;
37: }
效果如图：
演示地址：http://jsfiddle.net/Web_Code/yhLnj7gh/embedded/result/
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
Windows 11: 匯入和匯出開始佈局的簡單方法
Aug 22, 2023 am 10:13 AM
在Windows11中，「開始」功能表經過重新設計，並具有一組簡化的應用，這些應用程式排列在頁面網格中，這與它的前身不同，後者在「開始」功能表上有資料夾、應用程式和組。您可以自訂「開始」功能表佈局，並將其匯入並匯出至其他Windows設備，以根據您的喜好進行個人化設定。在本指南中，我們將討論在Windows11上匯入開始佈局以自訂預設佈局的逐步說明。什麼是Windows11中的Import-StartLayout？導入開始佈局是Windows10和更早版本中使用的cmdlet，用於將「開始」功能表的自定
如何在Windows 11的右鍵選單中預設'顯示更多選項”
Jul 10, 2023 pm 12:33 PM
我們用戶從來不想要的最煩人的更改之一是在右鍵單擊上下文功能表中包含“顯示更多選項”。但是，您可以刪除它並取回Windows11中的經典上下文功能表。不再需要多次點擊並在上下文選單中尋找這些ZIP捷徑。請依照本指南返回Windows11上成熟的右鍵點選上下文功能表。修復1–手動調整CLSID這是我們清單中唯一的手動方法。您將在登錄編輯器中調整特定鍵或值以解決此問題。注意–像這樣的註冊表編輯非常安全，並且可以正常工作。因此，在系統上嘗試此操作之前，您應該建立註冊表備份。步驟1–嘗試
解析JSP註解的使用方法和分類
Feb 01, 2024 am 08:01 AM
JSP註解的分類及用法解析JSP註解分為兩種：單行註解：以結尾，只能註解單行程式碼。多行註解：以/*開頭，以*/結尾，可以註解多行程式碼。單行註解範例多行註解範例/**這是一段多行註解*可以註解多行程式碼*/JSP註解的用法JSP註解可以用來註解JSP程式碼，使其更易於閱
如何從 Windows 11 中的右鍵單擊上下文功能表中刪除「在 Windows 終端機中開啟」選項
Apr 13, 2023 pm 06:28 PM
預設情況下，Windows 11 右鍵單擊上下文功能表有一個名為Open in Windows Terminal的選項。這是一個非常有用的功能，可讓使用者在特定位置開啟 Windows 終端。例如，如果您右鍵單擊資料夾並選擇「在 Windows 終端機中開啟」選項，則 Windows 終端將啟動並將該特定位置設為其目前工作目錄。儘管這是一個了不起的功能，但並不是每個人都發現此功能的用途。一些用戶可能只是不希望在他們的右鍵單擊上下文功能表中使用此選項，並且希望將其刪除以整理他們的右鍵單擊上下文菜
純CSS實現帶有陰影效果的選單導覽列的實現步驟
Oct 16, 2023 am 08:27 AM
純CSS實現帶有陰影效果的選單導覽列的實現步驟，需要具體程式碼範例在網頁設計中，選單導覽列是一個非常常見的元素。透過為選單導覽列添加陰影效果，不僅可以增加其美觀度，還可以提升使用者體驗。在本文中，我們將使用純CSS來實現一個帶有陰影效果的選單導覽欄，並提供具體的程式碼範例供參考。實作步驟如下：建立HTML結構首先，我們需要建立一個基本的HTML結構來容納選單導覽列。以
如何停用 Windows 11 的「顯示更多選項」選單
Apr 13, 2023 pm 08:10 PM
越來越多的人正在體驗新的和改進的微軟作業系統，但似乎他們中的一些人仍然更喜歡老式的設計。毫無疑問，新的上下文功能表為 Windows 11 帶來了令人印象深刻的一致性。如果我們考慮 Windows 10，每個應用程式都有自己的上下文選單元素這一事實給某些人造成了嚴重的混亂。從Windows 11 透明工作列到圓角，這款作業系統堪稱傑作。在這件事上，全球用戶有興趣了解如何快速停用 Windows 11 Show More Options 選單。這個過程非常簡單，所以如果您在同一條船上，請確保您完全檢查
如何在Python中使用神經網路進行分類？
Jun 04, 2023 pm 10:40 PM
當涉及到大量資料的分類時，人工處理這些資料是一件非常耗時且困難的工作。在這種情況下，使用神經網路進行分類就可以輕鬆快速地完成這項工作。 Python是個很好的選擇，因為它有許多成熟且易於使用的神經網路函式庫。本文將介紹如何在Python中使用神經網路進行分類。神經網路和分類在講解如何使用神經網路進行分類之前，我們需要先簡單了解一下神經網路的概念。神經網路是一種
Linux系統日誌檔分類詳解
Feb 26, 2024 pm 02:33 PM
Linux系統日誌檔案是記錄系統運作過程中產生的各種資訊的重要文件，透過分析日誌文件，可以幫助我們了解系統的運作狀態、故障排查和效能最佳化。本文將深入探討Linux系統日誌檔的分類及其作用，同時結合具體的程式碼範例，幫助讀者更能理解。一、Linux系統日誌檔分類1.系統日誌系統日誌是記錄系統啟動、關閉、使用者登入、關機等重要事件的日誌檔案。在Linux系統
