页面元素之面板+居中

1、简介

• 面板通常指一个独立的容器，里面可以放你喜欢的东西（文字、图片、表单、表格等等）结合栅格可以做类似购物网站的效果，上面是商品图片，下面是介绍、超链接等等。
• 折叠面板可以有效地节省页面的可视面积，非常适合应用于：QA说明、帮助文档等（折叠面板需要加载element组件）
• 卡片式面板面板通常用于非白色背景色的主体内, 从而映衬出边框投影。这里我给body加了一个背景图片。style="background-image: url(图片位置)"

2、卡片面板

一个默认面板由三个div组成，一个父div元素class为layui-card，两个子div元素class分别为layui-card-header、class="layui-card-body；header一般放简介。header和body之间有一条分界线（header的下边框border-bottom属性）

• 下边框：border-bottom: 1px solid #f6f6f6; （宽度、线性、颜色）
• 其他边框：border-top、border-right、border-left

测试代码：

  
      
      
      
      
  
  
      

              
默认卡片面板
              

                  默认的卡片面板 宽度为100%，由layui-card-header和layui-card-body两部分组成，并且他们之间有一个分界线，是靠
                  header的border-bottom属性实现的（源码：border-bottom: 1px solid #f6f6f6;）
              
          
          

              
调整了尺寸的卡片面板
              

                  这里面的内容是啥都行，文字、图片、表单、文本域等等

                  来一张layui自带的表情图片：
              
          
  

测试结果

image.png

3、折叠面板

折叠面板相当于一个父类div(class="layui-collapse")放了几个类似上面的默认面板。

• 对应关系:
  折叠面板          默认面板
  class="layui-colla-item"   class="layui-card ",
  class="layui-colla-title"    class="layui-card-header"
  class="layui-colla-content  class="layui-card-body"
• 通过对内容元素设置class为 layui-show 来选择性初始展开某一个面板。
• 在折叠面板的父容器设置属性 lay-accordion 来开启手风琴，那么在进行折叠操作时，始终只会展现当前的面板。（最多只能展开一个列表）

    
        
        
        
        
        
    
    
            

              

                
杜甫
                
内容区域
              
              

                
李清照
                
内容区域
              
              

                
鲁迅
                
内容区域
              
            
    

测试结果：

未添加lay-accordion.png

添加lay-accordion.png

注：
图一：页面加载后前两个面板展开，最后一个关闭（没添加layui-show类）并且可以同时打开多个面板。
图二：父元素添加lay-accordion属性后，最多只能打开一个面板。

4、居中

水平居中：

• 内容、文字居中： text-align: center;规定元素中的文本的水平对齐方式: 把文本排列到中间。
• div容器元素居中：margin: 0 auto;设置对象上下外间距为0，左右自动。
  等价于：margin:0 auto 0 auto (顺序：上右下左)

垂直居中：

将行高与容器高度设成一致即可。height: 100px;line-height: 100px;

class='layui-container'居中：

下面是源码，其实也是用margin: 0 auto;来实现的，直接对你想居中的元素追加这个类即可。

.layui-container {
  position: relative;
  margin: 0 auto;
  padding: 0 15px;
  box-sizing: border-box
}

示例代码：

    
        
        
        
        
        
    
    
            
文字\内容居中
            

            
水平居中
            

            
垂直居中
            

            
内容 水平 垂直居中
            

            
layui-container类居中
    

示例结果：

image1.png

image2.png

4、电子商城商品展示

明天写叭，我太困辽！