页面元素之面板+居中
2020-04-08 本文已影响0人
小疏林er
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
测试代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="layui/layui.js" ></script> <link rel="stylesheet" href="layui/css/layui.css" /> </head> <body style="background-image: url(img/星空.jpg)"> <div class="layui-card " > <div class="layui-card-header">默认卡片面板</div> <div class="layui-card-body"> 默认的卡片面板 宽度为100%，由layui-card-header和layui-card-body两部分组成，并且他们之间有一个分界线，是靠 header的border-bottom属性实现的（源码：border-bottom: 1px solid #f6f6f6;） </div> </div> <div class="layui-card "style="height: auto;width: 400px;" > <div class="layui-card-header">调整了尺寸的卡片面板</div> <div class="layui-card-body"> 这里面的内容是啥都行，文字、图片、表单、文本域等等<br /> 来一张layui自带的表情图片：<img src="layui/images/face/0.gif"/> </div> </div> </body> </html>测试结果
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 来开启手风琴，那么在进行折叠操作时，始终只会展现当前的面板。（最多只能展开一个列表）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="layui/layui.js" ></script>
<link rel="stylesheet" href="layui/css/layui.css" />
<script>
layui.use('element', function(){
var element = layui.element;
});
</script>
</head>
<body style="background-image: url(img/星空.jpg)">
<div class="layui-collapse"lay-accordion>
<div class="layui-colla-item">
<h2 class="layui-colla-title">杜甫</h2>
<div class="layui-colla-content layui-show">内容区域</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">李清照</h2>
<div class="layui-colla-content layui-show">内容区域</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">鲁迅</h2>
<div class="layui-colla-content ">内容区域</div>
</div>
</div>
</body>
</html>
测试结果：
未添加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 }
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="layui/layui.js" ></script>
<link rel="stylesheet" href="layui/css/layui.css" />
<style type="text/css">
div{
height: 200px;
width: 300px;
background-color: #009E94;
}
</style>
</head>
<body >
<div style="text-align: center;">文字\内容居中</div>
<br />
<div style="margin: 0 auto;">水平居中</div>
<br />
<div style="line-height: 200px;">垂直居中</div>
<br />
<div style="text-align: center;margin: 0 auto;line-height: 200px;">内容 水平 垂直居中</div>
<br />
<div class="layui-container">layui-container类居中</div>
</body>
</html>
示例结果：
image1.png
image2.png
4、电子商城商品展示
明天写叭，我太困辽！
