前端CSS（实现CSS集合） _CSS

集合使你可以将列表对象分组在一起。它代表各种类型的集合, 即一组相关信息。
以下是用于创建各种类型的集合的各种集合类：

基本：在这个divorul容器作为集合, 一种orli项目作为收集项目。

< ul class="collection"> < li class="collection-item"> Title< /li> < li class="collection-item"> Title< /li> < li class="collection-item"> Title< /li> < li class="collection-item"> Title< /li> < /ul>

链接：它用来显示一种orli项作为活动收集项。

< div class="collection"> < a href="https://www.lsbin.com/#!" class="collection-item"> Title< /a> < a href="https://www.lsbin.com/#!" class="collection-item active green"> Title< /a> < a href="https://www.lsbin.com/#!" class="collection-item"> Title< /a> < a href="https://www.lsbin.com/#!" class="collection-item active green"> Title< /a> < /div>

标头：它是用于使集合具有标题。

< ul class="collection with-header"> < li class="collection-header"> < h4> First Names< /h4> < /li> < li class="collection-item"> Title< /li> < li class="collection-item"> Title< /li> < li class="collection-item"> Title< /li> < li class="collection-item"> Title< /li> < /ul>

次要内容：它用于设置一种orli项目作为集合标题。

< ul class="collection with-header"> < li class="collection-header"> < h4> First Names< /h4> < /li> < li class="collection-item"> < div> Title< a href="https://www.lsbin.com/#!" class="secondary-content"> < i class="material-icons"> edit< /i> < /a> < /div> < /li> < li class="collection-item"> < div> Title< a href="https://www.lsbin.com/#!" class="secondary-content"> < i class="material-icons"> edit< /i> < /a> < /div> < /li> < li class="collection-item"> < div> Title< a href="https://www.lsbin.com/#!" class="secondary-content"> < iclass="material-icons"> edit< /i> < /a> < /div> < /li> < li class="collection-item"> < div> Title< a href="https://www.lsbin.com/#!" class="secondary-content"> < i class="material-icons"> edit< /i> < /a> < /div> < /li> < /ul>

头像内容：它用于设置一种orli作为头像项目。

< ul class="collection"> < li class="collection-item avatar"> < img src="https://www.lsbin.com/gfg_200X200.png" alt="前端CSS：实现CSS集合" class="circle"> < span class="title"> Title< /span> < p> First Line < br> Second Line< /p> < a href="https://www.lsbin.com/#!" class="secondary-content"> < i class="material-icons"> grade< /i> < /a> < /li> < li class="collection-item avatar"> < i class="material-icons circle"> autorenew< /i> < span class="title"> Title< /span> < p> First Line < br> Second Line< /p> < a href="https://www.lsbin.com/#!" class="secondary-content"> < i class="material-icons"> grade< /i> < /a> < /li> < li class="collection-item avatar"> < i class="material-icons circle green"> build< /i> < span class="title"> Title< /span> < p> First Line < br> Second Line< /p> < a href="https://www.lsbin.com/#!" class="secondary-content"> < iclass="material-icons"> grade< /i> < /a> < /li> < li class="collection-item avatar"> < i class="material-icons circle red"> cloud< /i> < span class="title"> Title< /span> < p> First Line < br> Second Line< /p> < a href="https://www.lsbin.com/#!" class="secondary-content"> < i class="material-icons"> grade< /i> < /a> < /li> < /ul>

禁止内容：它用于使收集项目被刷掉。仅在触摸屏设备上使用。

< ul class = "collection"> < li class = "collection-item dismissable"> Title< /li> < li class = "collection-item dismissable"> Title< /li> < li class = "collection-item dismissable"> Title< /li> < li class = "collection-item dismissable"> Title< /li> < /ul>

例子：

< !DOCTYPE html> < html > < head > < !--Import Google Icon Font--> < link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet" /> < !-- Compiled and minified CSS --> < link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css" /> < script type = "text/javascript" src = "https://code.jquery.com/jquery-2.1.1.min.js" > < / script > < !--Let browser know website is optimized for mobile--> < meta name = "viewport" content=" width = device -width, initial-scale = 1 .0" /> < / head > < body > < div class = "card-panel" > < h3 > Basic Collection< / h3 > < ul class = "collection" > < li class = "collection-item" > Title< / li > < li class = "collection-item" > Title< / li > < li class = "collection-item" > Title< / li > < li class = "collection-item" > Title< / li > < / ul > < / div > < div class = "card-panel" > < h3 > Collection with Links< / h3 > < div class = "collection" > < a href = "https://www.lsbin.com/#!" class = "collection-item" > Title< / a > < a href = "https://www.lsbin.com/#!" class = "collection-item active green" > Title< / a > < a href = "https://www.lsbin.com/#!" class = "collection-item" > Title< / a > < a href = "https://www.lsbin.com/#!" class = "collection-item active green" > Title< / a > < / div > < / div > < div class = "card-panel" > < h3 > Collection with Hearder< / h3 > < ul class = "collection with-header" > < li class = "collection-header" > < h4 > First Names< / h4 > < / li > < li class = "collection-item" > Title< / li > < li class = "collection-item" > Title< / li > < li class = "collection-item" > Title< / li > < li class = "collection-item" > Title< / li > < / ul > < / div > < div class = "card-panel" > < h3 > Collection with Secondary Content< / h3 > < ul class = "collection with-header" > < li class = "collection-header" > < h4 > First Names< / h4 > < / li > < li class = "collection-item" > < div > Title< a href = "https://www.lsbin.com/#!" class = "secondary-content green-text" > < i class = "material-icons" > send< / i > < / a > < / div > < / li > < li class = "collection-item" > < div > Title< a href = "https://www.lsbin.com/#!" class = "secondary-content green-text" > < i class = "material-icons" > send< / i > < / a > < / div > < / li > < li class = "collection-item" > < div > Title< a href = "https://www.lsbin.com/#!" class = "secondary-content green-text" > < i class = "material-icons" > send< / i > < / a > < / div > < / li > < li class = "collection-item" > < div > Title< a href = "https://www.lsbin.com/#!" class = "secondary-content green-text" > < i class = "material-icons" > send< / i > < / a > < / div > < / li > < / ul > < / div > < div class = "card-panel" > < h3 > Collection with Avatar Content< / h3 > < ul class = "collection" > < li class = "collection-item avatar" > < img src = "https://www.lsbin.com/gfg_200X200.png" alt = "" class = "circle" /> < span class = "title" > Title< / span > < p > First Line < br /> Second Line < / p > < a href = "https://www.lsbin.com/#!" class = "secondary-content green-text" > < i class = "material-icons" > grade< / i > < / a > < / li > < li class = "collection-item avatar" > < i class = "material-icons circle" > autorenew< / i > < span class = "title" > Title< / span > < p > First Line < br /> Second Line < / p > < a href = "https://www.lsbin.com/#!" class = "secondary-content green-text" > < i class = "material-icons" > grade< / i > < / a > < / li > < li class = "collection-item avatar" > < i class = "material-icons circle green" > build < / i > < span class = "title" > Title< / span > < p > First Line < br /> Second Line < / p > < a href = "https://www.lsbin.com/#!" class = "secondary-content green-text" > < i class = "material-icons" > grade< / i > < / a > < / li > < li class = "collection-item avatar" > < i class = "material-icons circle red" > cloud < / i > < span class = "title" > Title< / span > < p > First Line < br /> Second Line < / p > < a href = "https://www.lsbin.com/#!" class = "secondary-content green-text" > < i class = "material-icons" > grade< / i > < / a > < / li > < / ul > < / div > < div class = "card-panel" > < h3 > Collection with dismissible content< / h3 > < ul class = "collection" > < li class = "collection-item dismissable" > Title< / li > < li class = "collection-item dismissable" > Title< / li > < li class = "collection-item dismissable" > Title< / li > < li class = "collection-item dismissable" > Title< / li > < / ul > < / div > < !-- Compiled and minified JavaScript --> < script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js" > < / script > < / body > < / html >

【前端CSS（实现CSS集合）】输出如下：