如何定義網站中圖庫和列表的分組按鈕的樣式？
如何定義網站中圖庫和列表的分組按鈕的樣式？
發布日期：2017-09-10
瀏覽次數：1371
什么是分組功能？
在制作網站頁面的時候，我們經常會使用圖片庫功能來顯示多張圖片。有的時候，圖片很多，如果把這些圖片都顯示在頁面上，網站頁面會顯得雜亂無章。這個時候，我們需要使用到圖片庫的分組功能，將圖片一組一組的進行顯示。用戶可以通過點擊分組按鈕，讓圖片庫只呈現一組圖片，并在組和組之間進行切換。
例如，這是一組圖片，當用戶打開頁面時，會顯示所有圖片。
當用戶點擊運動時，圖片庫會只顯示運動主題的圖片
以上是對圖片庫分組功能的一個簡單介紹，相信您不難上手。下面我們將介紹如何對分組按鈕的樣式進行調整，以達到最適合網站的風格的效果。
如何定義圖庫的分組樣式
首先點擊圖庫的設置按鈕
然后在彈出的控制面板中切換到圖片分組選項卡
由于選項卡會非常長，您需要拖動滑動條到最下方。
在這里，您就可以看到定義分組樣式的選項了。
如您所見，您可以設置字體大小，顏色，選中顏色，以及上下間距和對齊方式。
這是我們簡單調整后的一個樣式。
當然，如果您會寫CSS，還可以通過CSS覆蓋掉系統的設置來實現更細致的設定。
如何定義列表的分組樣式
除了圖庫，列表也提供了分組功能。其定義的方式和圖庫分組基本類似。
首先，您需要點擊設置按鈕，打開列表的選項卡
然后在彈出的列表控制面板中切換到內容選項卡，并激活分組功能
和圖庫分組功能不同，列表分組還能定義切換的模式。默認是快速模式，這個模式不會刷新頁面；還有一種備選的持久化模式，這種模式會跳轉到分類頁面。除非您有一定的技術背景，一般不推薦使用這種模式。
和圖片分組一樣，您可以定義很多參數。下圖是我們定義了樣式的一個示例。
列表和圖庫分組的最大不同是，列表還不支持對齊的設置哦，只能居左對齊。
熱門教程