前端CSS:实现CSS集合

2021年3月11日18:16:20 发表评论 626 次浏览

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

以下是用于创建各种类型的集合的各种集合类:

  • 基本:在这个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="#!" class="collection-item">Title</a>
            <a href="#!" class="collection-item active green">Title</a>
            <a href="#!" class="collection-item">Title</a>
            <a href="#!" 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="#!" 
                  class="secondary-content"><i 
                  class="material-icons">edit</i></a></div></li>
            <li class="collection-item"><div>Title
            <a href="#!" 
                  class="secondary-content"><i 
                  class="material-icons">edit</i></a></div></li>
            <li class="collection-item"><div>Title
            <a href="#!" 
                  class="secondary-content"><i
                  class="material-icons">edit</i></a></div></li>
            <li class="collection-item"><div>Title
            <a href="#!" 
                  class="secondary-content"><i 
                  class="material-icons">edit</i></a></div></li>
        </ul>
  • 头像内容:它用于设置一种orli作为头像项目。
<ul class="collection">
          <li class="collection-item avatar">
            <img src="gfg_200X200.png" alt="前端CSS:实现CSS集合" alt="" class="circle">
            <span class="title">Title</span>
            <p>First Line <br>
               Second Line
            </p>
            <a href="#!" 
                  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="#!" 
                  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="#!" 
                  class="secondary-content"><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="#!" 
                  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 = "#!" class = "collection-item" >Title</ a >
                 < a href = "#!" 
                    class = "collection-item active green" >
                   Title</ a >
                 < a href = "#!" class = "collection-item" >Title</ a >
                 < a href = "#!"
                    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 = "#!" 
                            class = "secondary-content green-text" >
                       < i class = "material-icons" >send</ i ></ a >
                     </ div >
                 </ li >
                 < li class = "collection-item" >
                     < div >
                         Title< a href = "#!"
                             class = "secondary-content green-text" >
                       < i class = "material-icons" >send</ i ></ a >
                     </ div >
                 </ li >
                 < li class = "collection-item" >
                     < div >
                         Title< a href = "#!"
                             class = "secondary-content green-text" >
                       < i class = "material-icons" >send</ i ></ a >
                     </ div >
                 </ li >
                 < li class = "collection-item" >
                     < div >
                         Title< a href = "#!" 
                            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 = "gfg_200X200.png" 
                          alt = "" class = "circle" />
                     < span class = "title" >Title</ span >
                     < p >
                         First Line < br />
                         Second Line
                     </ p >
                     < a href = "#!" 
                        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 = "#!" 
                        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 = "#!"
                        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 = "#!" 
                        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 集合1

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: