/* 整体样式重置,去除一些默认样式 */ blockquote,body,button,dd,div,dl,dt,form,h1,h2,h3,h4,h5,h6,input,li,ol,p,pre,td,textarea,th,ul{ margin:0; padding:0; -webkit-tap-highlight-color:rgba(0,0,0,0); } /* 去除a标签点击和悬停时的默认轮廓 */ a:active,a:hover{ outline:0; } /* 图片无边框 */ img{ border:none; } /* 列表项无默认样式 */ li{ list-style:none; } /* 表格边框合并等样式设置 */ table{ border-collapse:collapse; border-spacing:0; } /* h4到h6标签字号保持默认大小 */ h4,h5,h6{ font-size:100%; } /* 表单元素继承字体相关样式并去除默认轮廓 */ button,input,optgroup,option,select,textarea{ font-family:inherit; font-size:inherit; font-style:inherit; font-weight:inherit; outline:0; } /* 让pre标签内文字可换行 */ pre{ white-space:pre-wrap; white-space:-moz-pre-wrap; white-space:-pre-wrap; white-space:-o-pre-wrap; word-wrap:break-word; } /* 页面主体文字样式 */ body{ line-height:24px; font:14px Helvetica Neue,Helvetica,PingFang SC,Tahoma,Arial,sans-serif; } /* 水平分割线样式 */ hr{ height:1px; margin:10px 0; border:0; clear:both; } /* 链接默认颜色及去除下划线 */ a{ color:#333; text-decoration:none; } /* 链接悬停时颜色变化 */ a:hover{ color:#777; } /* 让cite标签内文字样式正常,模拟可点击效果 */ a cite{ font-style:normal; *cursor:pointer; } /* 使设置了该类的元素及其内部元素盒模型为 border-box */ .layui-border-box,.layui-border-box *{ box-sizing:border-box; } /* 使设置了该类的元素及其内部元素盒模型为 content-box */ .layui-box,.layui-box *{ box-sizing:content-box; } /* 清除浮动并添加 zoom 属性兼容低版本IE */ .layui-clear{ clear:both; *zoom:1; } .layui-clear:after{ content:'\20'; clear:both; *zoom:1; display:block; height:0; } /* 让内联元素在低版本IE下能正常显示及添加 zoom 属性兼容 */ .layui-inline{ *display:inline; *zoom:1; } /* 用于创建三角形的通用样式,初始为透明边框 */ .layui-edge{ display:inline-block; width:0; height:0; border-width:6px; border-style:dashed; border-color:transparent; } /* 顶部三角形样式,设置底部边框颜色和样式来呈现 */ .layui-edge-top{ top:-4px; border-bottom-color:#999; border-bottom-style:solid; } /* 右侧三角形样式,设置左侧边框颜色和样式来呈现 */ .layui-edge-right{ border-left-color:#999; border-left-style:solid; } /* 底部三角形样式,设置顶部边框颜色和样式来呈现 */ .layui-edge-bottom{ top:2px; border-top-color:#999; border-top-style:solid; } /* 左侧三角形样式,设置右侧边框颜色和样式来呈现 */ .layui-edge-left{ border-right-color:#999; border-right-style:solid; } /* 禁用状态的通用样式,颜色变灰且鼠标指针变为不允许状态 */ .layui-disabled,.layui-disabled:hover{ color:#9a9a9a!important; cursor:not-allowed!important; } /* 圆形样式,设置边框圆角为100% */ .layui-circle{ border-radius:100%; } /* 显示元素 */ .layui-show{ display:block!important; } /* 隐藏元素 */ .layui-hide{ display:none!important; } /* 定义图标字体,设置不同格式的字体文件路径 */ @font-face{ font-family:layui-icon; src:url(../font/iconfont.eot?v=256); src:url(../font/iconfont.eot?v=256#iefix) format('embedded-opentype'), url(../font/iconfont.woff2?v=256) format('woff2'), url(../font/iconfont.woff?v=256) format('woff'), url(../font/iconfont.ttf?v=256) format('truetype'), url(../font/iconfont.svg?v=256#layui-icon) format('svg'); } /* 图标样式设置,指定字体、字号、样式及抗锯齿等 */ .layui-icon{ font-family:layui-icon!important; font-size:16px; font-style:normal; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } /* 具体每个图标的内容定义,通过:before伪元素设置对应图标编码 */ .layui-icon-reply-fill:before{ content:"\e611"; } .layui-icon-set-fill:before{ content:"\e614"; } /* 此处省略众多单个图标的样式定义代码 */ /* 主体内容区域宽度及水平居中 */ .layui-main{ width:1140px; margin:0 auto; } /* 头部区域样式,设置层级和高度等 */ .layui-header{ z-index:1000; height:60px; } /* 头部链接悬停时的过渡效果 */ .layui-header a:hover{ transition:all.5s; -webkit-transition:all.5s; } /* 侧边栏固定定位及基本样式 */ .layui-side{ position:fixed; left:0; top:0; bottom:0; z-index:999; width:200px; overflow-x:hidden; } /* 侧边栏滚动区域样式 */ .layui-side-scroll{ position:relative; width:220px; height:100%; overflow-x:hidden; } /* 主体内容区域定位及滚动等样式 */ .layui-body{ position:absolute; left:200px; right:0; top:0; bottom:0; z-index:998; width:auto; overflow-y:auto; box-sizing:border-box; } /* 布局主体的整体样式,处理溢出隐藏 */ .layui-layout-body{ overflow:hidden; } /* 管理后台布局下头部背景色设置 */ .layui-layout-admin.layui-header{ background-color:#23262E; } /* 管理后台布局下侧边栏的位置及宽度等样式调整 */ .layui-layout-admin.layui-side{ top:60px; width:200px; overflow-x:hidden; } /* 管理后台布局下主体内容区域的定位及高度设置 */ .layui-layout-admin.layui-body{ position:fixed; top:60px; bottom:44px; } /* 管理后台布局下主体内容宽度自适应及左右边距设置 */ .layui-layout-admin.layui-main{ width:auto; margin:0 15px; } /* 管理后台布局下页脚的定位、高度、背景色等样式 */ .layui-layout-admin.layui-footer{ position:fixed; left:200px; right:0; bottom:0; height:44px; line-height:44px; padding:0 15px; background-color:#eee; } /* 管理后台布局下的logo区域样式 */ .layui-layout-admin.layui-logo{ position:absolute; left:0; top:0; width:200px; height:100%; line-height:60px; text-align:center; color:#009688; font-size:16px; } /* 左侧布局相关样式 */ .layui-layout-left{ position:absolute!important; left:200px; top:0; } /* 右侧布局相关样式 */ .layui-layout-right{ position:absolute!important; right:0; top:0; } /* 容器通用样式,相对定位及内边距设置 */ .layui-container{ position:relative; margin:0 auto; padding:0 15px; box-sizing:border-box; } /* 流体容器样式,相对定位及内边距设置 */ .layui-fluid{ position:relative; margin:0 auto; padding:0 15px; } /* 行样式,清除浮动相关设置 */ .layui-row:after,.layui-row:before{ content:''; display:block; clear:both; } /* 列通用样式,相对定位及盒模型设置 */ .layui-col-lg1,.layui-col-lg10,.layui-col-lg11,.layui-col-lg12,.layui-col-lg2,.layui-col-lg3,.layui-col-lg4,.layui-col-lg5,.layui-col-lg6,.layui-col-lg7,.layui-col-lg8,.layui-col-lg9,.layui-col-md1,.layui-col-md10,.layui-col-md11,.layui-col-md12,.layui-col-md2,.layui-col-md3,.layui-col-md4,.layui-col-md5,.layui-col-md6,.layui-col-md7,.layui-col-md8,.layui-col-md9,.layui-col-sm1,.layui-col-sm10,.layui-col-sm11,.layui-col-sm12,.layui-col-sm2,.layui-col-sm3,.layui-col-sm4,.layui-col-sm5,.layui-col-sm6,.layui-col-sm7,.layui-col-sm8,.layui-col-sm9,.layui-col-xs1,.layui-col-xs10,.layui-col-xs11,.layui-col-xs12,.layui-col-xs2,.layui-col-xs3,.layui-col-xs4,.layui-col-xs5,.layui-col-xs6,.layui-col-xs7,.layui-col-xs8,.layui-col-xs9{ position:relative; display:block; box-sizing:border-box; } /* 超小屏幕下的列宽度设置及左浮动 */ .layui-col-xs1,.layui-col-xs10,.layui-col-xs11,.layui-col-xs12,.layui-col-xs2,.layui-col-xs3,.layui-col-xs4,.layui-col-xs5,.layui-col-xs6,.layui-col-xs7,.layui-col-xs8,.layui-col-xs9{ float:left; } .layui-col-xs1{ width:8.33333333%; } /* 此处省略众多不同屏幕尺寸下各列宽度及偏移量等样式定义代码 */ /* 按钮通用样式,设置基本外观、颜色、光标样式等 */ .layui-btn{ display:inline-block; height:38px; line-height:38px; padding:0 18px; background-color:#009688; color:#fff; white-space:nowrap; text-align:center; font-size:14px; border:none; border-radius:2px; cursor:pointer; } /* 按钮悬停时透明度变化 */ .layui-btn:hover{ opacity:.8; filter:alpha(opacity=80); color:#fff; } /* 按钮按下时恢复透明度 */ .layui-btn:active{ opacity:1; filter:alpha(opacity=100); } /* 按钮间距设置 */ .layui-btn+.layui-btn{ margin-left:10px; } /* 按钮容器样式,字体大小设为0方便排版 */ .layui-btn-container{ font-size:0; } /* 按钮容器内按钮的间距等样式 */ .layui-btn-container.layui-btn{ margin-right:10px; margin-bottom:10px; } /* 按钮容器内相邻按钮的间距调整 */ .layui-btn-container.layui-btn+.layui-btn{ margin-left:0; } /* 表格内按钮容器中按钮的底部间距调整 */ .layui-table.layui-btn-container.layui-btn{ margin-bottom:9px; } /* 圆角较大的按钮样式 */ .layui-btn-radius{ border-radius:100px; } /* 按钮内图标样式及间距设置 */ .layui-btn.layui-icon{ margin-right:3px; font-size:18px; vertical-align:bottom; vertical-align:middle\9; } /* 不同类型按钮的特定样式,如基础按钮、主要按钮、警告按钮等 */ .layui-btn-primary{ border:1px solid #C9C9C9; background-color:#fff; color:#555; } .layui-btn-primary:hover{ border-color:#009688; color:#333; } /* 此处省略众多其他按钮类型的样式定义代码 */ /* 输入框、选择框、文本域通用样式,设置高度、边框等 */ .layui-input,.layui-select,.layui-textarea{ height:38px; line-height:1.3; line-height:38px\9; border-width:1px; border-style:solid; background-color:#fff; border-radius:2px; } /* 输入框等的占位符样式 */ .layui-input::-webkit-input-placeholder,.layui-select::-webkit-input-placeholder,.layui-textarea::-webkit-input-placeholder{ line-height:1.3; } /* 输入框和文本域的宽度及内边距设置 */ .layui-input,.layui-textarea{ display:block; width:100%; padding-left:10px; } /* 输入框等鼠标悬停时边框颜色变化 */ .layui-input:hover,.layui-textarea:hover{ border-color:#D2D2D2!important; } /* 输入框等获得焦点时边框颜色变化 */ .layui-input:focus,.layui-textarea:focus{ border-color:#C9C9C9!important; } /* 文本域的最小高度、自动高度及垂直方向可调整设置 */ .layui-textarea{ min-height:100px; height:auto; line-height:20px; padding:6px 10px; resize:vertical; } /* 选择框的内边距设置 */ .layui-select{ padding:0 10px; }