lsm/layui
1
0
Fork 0
mirror of https://gitee.com/layui/layui.git synced 2025-04-05 17:38:02 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

chore: 优化 .layui-body 和 .layui-text 样式细节 (#2395)

Browse Source 
* style: 剔除 .layui-body 不必要的 z-index，提升内部 fixed 布局灵活度

* style: 优化 .layui-text 文本类
This commit is contained in:
贤心 2024-12-20 16:09:42 +08:00 committed by GitHub
parent bdba124e6e
commit 1e2f70aa50
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 113 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
docs/class/index.md
View File

@ -123,9 +123,9 @@ toc: true
| layui-font-black | <span class="layui-font-black">深</span> | | layui-font-black | <span class="layui-font-black">深</span> |
| layui-font-gray | <span class="layui-font-gray">浅</span> | | layui-font-gray | <span class="layui-font-gray">浅</span> |
<h2 id="text" lay-toc="{hot: true}">文档容器</h2> <h2 id="text" lay-toc="{hot: true}">文本容器</h2>
通过设置 `class="layui-text"` 定义一段包含标题、段落、列表、链接等组合的文档区域。 通过设置 `class="layui-text"` 定义一段包含标题、段落、列表等组合的文本区域，通常用于 Markdown 文档。
<pre class="layui-code" lay-options="{preview: 'iframe', style: 'height: 535px;', layout: ['preview', 'code'], tools: ['full','window']}"> <pre class="layui-code" lay-options="{preview: 'iframe', style: 'height: 535px;', layout: ['preview', 'code'], tools: ['full','window']}">
<textarea> <textarea>
@ -139,45 +139,59 @@ toc: true
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link href="{{= d.layui[2].cdn.css }}" rel="stylesheet"> <link href="{{= d.layui[2].cdn.css }}" rel="stylesheet">
</head> </head>
<body> <body class="layui-padding-3">
<div class="layui-text" style="padding: 16px;"> <div class="layui-text">
<h1>标题1</h1> <h1>标题1</h1>
<p>段落1段落1段落1段落1段落1段落1段落1段落1段落1 <sup class="footnote-ref"><a href="javascript:;">[1]</a></sup></p>
<h2>标题2</h2> <h2>标题2</h2>
<p>段落2段落2 <strong>加粗</strong> <em>强调</em> 段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2</p>
<p>段落2-1 <code>inline code</code> 段落2-1段落2-1段落2-1段落2-1段落2-1段落2-1段落2-1段落2-1段落2-1段落2-1段落2-1段落2-1段落2-1段落2-1段落2-1段落2-1段落2-1段落2-1段落2-1段落2-1段落2-1段落2-1段落2-1段落2-1段落2-1</p>
<h3>标题3</h3> <h3>标题3</h3>
<p>段落3段落3段落3段落3段落3段落3段落3段落3段落3段落3段落3段落3段落3段落3段落3段落3 <a href="javascript:;">链接</a></p>
<h4>标题4</h4> <h4>标题4</h4>
<h5>标题5</h5> <h5>标题5</h5>
<h6>标题6</h6> <h6>标题6</h6>
<p>段落6段落6段落6段落6段落6段落6段落6段落6段落6</p>
<hr>
<h3>无序列表</h3>
<ul> <ul>
<li>列表1</li> <li>列表1</li>
<li> <li>
列表2 列表2
<ul> <ul>
<li>列表2-1</li> <li>
列表2-1
<ul>
<li>列表2-1-1</li>
</ul>
</li>
<li>列表2-2</li> <li>列表2-2</li>
<li>列表2-3</li>
</ul> </ul>
</li> </li>
<li>列表3</li> <li>列表3</li>
</ul> </ul>
<hr> <h3>有序列表</h3>
<ol> <ol>
<li>列表1</li> <li>列表1</li>
<li>列表2</li> <li>列表2</li>
<li>列表3</li> <li>列表3</li>
</ol> </ol>
<hr> <h3>Blockquote</h3>
<blockquote>
<p>引用</p>
<blockquote>内嵌引用<blockquote>内嵌引用</blockquote></blockquote>
</blockquote>
<h2>标题2</h2> <h3>Code</h3>
<p>段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1</p> &lt;pre&gt;<code>var cp = function(){
<p>段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2</p> return gulp.src('./dist/**/*')
<blockquote>引用</blockquote> .pipe(gulp.dest(dest));
<p>这是一个包含<a href="javascript:;">超文本</a>和<strong>加粗文本</strong>的段落</p> };
</code>&lt;/pre&gt;
<hr>
<p id="ref-1">Footer</p>
</div> </div>
</body> </body>
</html> </html>

108
examples/layout-admin.html
View File

@ -1,15 +1,14 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>layout 管理界面大布局示例 - Layui</title>
<title>layout 管理系统大布局 - Layui</title> <meta name="renderer" content="webkit">
<link rel="stylesheet" href="../src/css/layui.css"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="../src/css/layui.css" rel="stylesheet">
</head> </head>
<body> <body>
<div class="layui-layout layui-layout-admin"> <div class="layui-layout layui-layout-admin">
<div class="layui-header"> <div class="layui-header">
<div class="layui-logo layui-hide-xs layui-bg-black">layout demo</div> <div class="layui-logo layui-hide-xs layui-bg-black">layout demo</div>
@ -19,34 +18,30 @@
<li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft"> <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
<i class="layui-icon layui-icon-spread-left"></i> <i class="layui-icon layui-icon-spread-left"></i>
</li> </li>
<li class="layui-nav-item layui-hide-xs"><a href="javascript:;">nav 1</a></li>
<li class="layui-nav-item layui-hide-xs"><a href="">nav 1</a></li> <li class="layui-nav-item layui-hide-xs"><a href="javascript:;">nav 2</a></li>
<li class="layui-nav-item layui-hide-xs"><a href="">nav 2</a></li> <li class="layui-nav-item layui-hide-xs"><a href="javascript:;">nav 3</a></li>
<li class="layui-nav-item layui-hide-xs"><a href="">nav 3</a></li>
<li class="layui-nav-item"> <li class="layui-nav-item">
<a href="javascript:;">nav groups</a> <a href="javascript:;">nav groups</a>
<dl class="layui-nav-child"> <dl class="layui-nav-child">
<dd><a href="">menu 11</a></dd> <dd><a href="javascript:;">menu 11</a></dd>
<dd><a href="">menu 22</a></dd> <dd><a href="javascript:;">menu 22</a></dd>
<dd><a href="">menu 33</a></dd> <dd><a href="javascript:;">menu 33</a></dd>
</dl> </dl>
</li> </li>
</ul> </ul>
<ul class="layui-nav layui-layout-right"> <ul class="layui-nav layui-layout-right">
<li class="layui-nav-item layui-hide layui-show-md-inline-block"> <li class="layui-nav-item layui-hide layui-show-sm-inline-block">
<a href="javascript:;"> <a href="javascript:;">
<img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" class="layui-nav-img"> <img src="//unpkg.com/outeres@0.0.10/img/layui/icon-v2.png" class="layui-nav-img">
tester tester
</a> </a>
<dl class="layui-nav-child"> <dl class="layui-nav-child">
<dd><a href="">Your Profile</a></dd> <dd><a href="javascript:;">Your Profile</a></dd>
<dd><a href="">Settings</a></dd> <dd><a href="javascript:;">Settings</a></dd>
<dd><a href="">Sign out</a></dd> <dd><a href="javascript:;">Sign out</a></dd>
</dl> </dl>
</li> </li>
<li class="layui-nav-item" lay-header-event="menuRight" lay-unselect> <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
<a href="javascript:;"> <a href="javascript:;">
<i class="layui-icon layui-icon-more-vertical"></i> <i class="layui-icon layui-icon-more-vertical"></i>
@ -54,7 +49,6 @@
</li> </li>
</ul> </ul>
</div> </div>
<div class="layui-side layui-bg-black"> <div class="layui-side layui-bg-black">
<div class="layui-side-scroll"> <div class="layui-side-scroll">
<!-- 左侧导航区域（可配合layui已有的垂直导航） --> <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
@ -65,7 +59,7 @@
<dd><a href="javascript:;">menu 1</a></dd> <dd><a href="javascript:;">menu 1</a></dd>
<dd><a href="javascript:;">menu 2</a></dd> <dd><a href="javascript:;">menu 2</a></dd>
<dd><a href="javascript:;">menu 3</a></dd> <dd><a href="javascript:;">menu 3</a></dd>
<dd><a href="">the links</a></dd> <dd><a href="javascript:;">the links</a></dd>
</dl> </dl>
</li> </li>
<li class="layui-nav-item"> <li class="layui-nav-item">
@ -73,42 +67,20 @@
<dl class="layui-nav-child"> <dl class="layui-nav-child">
<dd><a href="javascript:;">list 1</a></dd> <dd><a href="javascript:;">list 1</a></dd>
<dd><a href="javascript:;">list 2</a></dd> <dd><a href="javascript:;">list 2</a></dd>
<dd><a href="">超链接</a></dd> <dd><a href="javascript:;">超链接</a></dd>
</dl> </dl>
</li> </li>
<li class="layui-nav-item"><a href="javascript:;">click menu item</a></li> <li class="layui-nav-item"><a href="javascript:;">click menu item</a></li>
<li class="layui-nav-item"><a href="">the links</a></li> <li class="layui-nav-item"><a href="javascript:;">the links</a></li>
</ul> </ul>
</div> </div>
</div> </div>
<div class="layui-body"> <div class="layui-body">
<!-- 内容主体区域 --> <!-- 内容主体区域 -->
<div style="padding: 15px;"> <div style="padding: 15px;">
内容主体区域
<br><br>
<blockquote class="layui-elem-quote layui-text"> <blockquote class="layui-elem-quote layui-text">
<ul> Layui 框体布局内容主体区域
<li>
你也可以单独打开管理界面大布局的演示页面：
<a class="layui-btn layui-btn-normal" href="layuiAdmin.html" target="_blank">单独打开</a>
</li>
<li>
该页面只是简单的管理系统的界面基础布局示例，并不是一整套界面布局方案，您可以关注基于 layui 的通用型管理系统界面模板解决方案：
<a href="/layuiadmin/" target="_blank" class="layui-btn">layuiAdmin</a>
</li>
<li>
layui 之所以赢得如此多人的青睐，更多是在于它“前后界面兼备”的能力。既可编织出绚丽的前台页面，又可满足繁杂的管理系统的界面需求。
<br>layui 管理基本布局， 致力于让每一位开发者都能轻松搭建自己的管理系统模板。
</li>
</ul>
</blockquote> </blockquote>
<a href="/doc/element/layout.html#admin" target="_blank" class="layui-btn">查看该布局代码</a>
<br><br><br>
<div class="layui-card layui-panel"> <div class="layui-card layui-panel">
<div class="layui-card-header"> <div class="layui-card-header">
下面是充数内容，为的是出现滚动条 下面是充数内容，为的是出现滚动条
@ -118,12 +90,8 @@
</div> </div>
</div> </div>
<br><br> <br><br>
</div> </div>
</div> </div>
<div class="layui-footer"> <div class="layui-footer">
<!-- 底部固定区域 --> <!-- 底部固定区域 -->
底部固定区域 底部固定区域
@ -132,31 +100,31 @@
<script src="../src/layui.js"></script> <script src="../src/layui.js"></script>
<script> <script>
//JS //JS
layui.use(['element', 'layer', 'util'], function(){ layui.use(['element', 'layer', 'util'], function(){
var element = layui.element var element = layui.element;
,layer = layui.layer var layer = layui.layer;
,util = layui.util var util = layui.util;
,$ = layui.$; var $ = layui.$;
//头部事件 //头部事件
util.event('lay-header-event', { util.event('lay-header-event', {
//左侧菜单事件 menuLeft: function(othis){ // 左侧菜单事件
menuLeft: function(othis){
layer.msg('展开左侧菜单的操作', {icon: 0}); layer.msg('展开左侧菜单的操作', {icon: 0});
} },
,menuRight: function(){ menuRight: function(){ // 右侧菜单事件
layer.open({ layer.open({
type: 1 type: 1,
,content: '<div style="padding: 15px;">处理右侧面板的操作</div>' title: '更多',
,area: ['260px', '100%'] content: '<div style="padding: 15px;">处理右侧面板的操作</div>',
,offset: 'rt' //右上角 area: ['260px', '100%'],
,anim: 5 offset: 'rt', // 右上角
,shadeClose: true anim: 'slideLeft', // 从右侧抽屉滑出
shadeClose: true,
scrollbar: false
}); });
} }
}); });
}); });
</script> </script>
</body> </body>

52
examples/text.md.html
View File

@ -10,41 +10,59 @@
<div class="layui-container layui-row"> <div class="layui-container layui-row">
<div class="layui-col-md4 layui-text"> <div class="layui-col-md4 layui-text">
<h1>标题1</h1> <h1>标题1</h1>
<p>段落1段落1段落1段落1段落1段落1段落1段落1段落1 <sup class="footnote-ref"><a href="#ref-1">[1]</a></sup></p>
<h2>标题2</h2> <h2>标题2</h2>
<p>段落2段落2 <strong>加粗</strong> <em>强调</em> 段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2</p>
<p>段落2-1 <code>inline code</code> 段落2-1段落2-1段落2-1段落2-1段落2-1段落2-1段落2-1段落2-1段落2-1段落2-1段落2-1段落2-1</p>
<h3>标题3</h3> <h3>标题3</h3>
<p>段落3段落3段落3段落3段落3段落3段落3段落3段落3段落3段落3段落3段落3段落3段落3段落3段落3段落3 <a href="">链接</a></p>
<h4>标题4</h4> <h4>标题4</h4>
<h5>标题5</h5> <h5>标题5</h5>
<h6>标题6</h6> <h6>标题6</h6>
<p>段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1 <sup class="footnote-ref"><a href="#ref-1">[1]</a></sup></p> <p>段落6段落6段落6段落6段落6段落6段落6段落6段落6</p>
<p>段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2</p>
<p>段落3段落3段落3段落3段落3段落3段落3段落3段落3段落3段落3段落3 <a href="">链接</a></p> <h3>无序列表</h3>
<ul> <ul>
<li>无序1</li> <li>列表1</li>
<li>无序2</li> <li>
<li>无序3</li> 列表2
<ul>
<li>
列表2-1
<ul>
<li>列表2-1-1</li>
</ul>
</li>
<li>列表2-2</li>
</ul>
</li>
<li>列表3</li>
</ul> </ul>
<h3>有序列表</h3>
<ol> <ol>
<li>有序1</li> <li>列表1</li>
<li>有序2</li> <li>列表2</li>
<li>有序3</li> <li>列表3</li>
</ol> </ol>
<br>
<h3>Blockquote</h3>
<blockquote> <blockquote>
<p>引用</p> <p>引用</p>
<blockquote>内嵌引用<blockquote>内嵌引用</blockquote></blockquote> <blockquote>内嵌引用<blockquote>内嵌引用</blockquote></blockquote>
</blockquote> </blockquote>
<br> <h3>Code</h3>
<pre><code>var cp = function(){
<pre>
var cp = function(){
return gulp.src('./dist/**/*') return gulp.src('./dist/**/*')
.pipe(gulp.dest(dest)); .pipe(gulp.dest(dest));
};</pre> };
</code></pre>
<p id="ref-1">REF-1</p> <hr>
<p id="ref-1">REF-1</p>
</div> </div>
</div> </div>
</body> </body>
</html> </html>

20
src/css/layui.css
View File

@ -11,8 +11,8 @@ a:active,a:hover{outline:0}
img{display: inline-block; border: none; vertical-align: middle;} img{display: inline-block; border: none; vertical-align: middle;}
li{list-style:none;} li{list-style:none;}
table{border-collapse: collapse; border-spacing: 0;} table{border-collapse: collapse; border-spacing: 0;}
h1,h2,h3,h4{font-weight: 700;} h1,h2,h3,h4,h5,h6{font-weight: 700;}
h5,h6{font-weight: 500; font-size: 100%;} h5,h6{font-size: 100%;}
button,input,select,textarea{font-size: 100%; } button,input,select,textarea{font-size: 100%; }
input,button,textarea,select,optgroup,option{font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit; outline: 0;} input,button,textarea,select,optgroup,option{font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit; outline: 0;}
pre{white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word;} pre{white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word;}
@ -266,7 +266,7 @@ a cite{font-style: normal; *cursor:pointer;}
.layui-header a:hover{transition: all .5s; -webkit-transition: all .5s;} .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{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-side-scroll{position: relative; width: 220px; height: 100%; overflow-x: hidden;}
.layui-body{position: relative; left: 200px; right: 0; top: 0; bottom: 0; z-index: 900; width: auto; box-sizing: border-box;} .layui-body{position: relative; left: 200px; right: 0; top: 0; bottom: 0; width: auto; box-sizing: border-box;}
/* 后台框架大布局 */ /* 后台框架大布局 */
.layui-layout-body{overflow-x: hidden;} .layui-layout-body{overflow-x: hidden;}
@ -650,12 +650,12 @@ hr.layui-border-black{border-width: 0 0 1px;}
/* 文本区域 */ /* 文本区域 */
.layui-text{line-height: 1.8; font-size: 14px;} .layui-text{line-height: 1.8; font-size: 14px;}
.layui-text h1{font-size: 32px;} .layui-text h1{margin: 32px 0; font-size: 32px;}
.layui-text h2{font-size: 24px;} .layui-text h2{margin: 24px 0; font-size: 24px;}
.layui-text h3{font-size: 18px;} .layui-text h3{margin: 16px 0; font-size: 18px;}
.layui-text h4{font-size: 16px;} .layui-text h4{margin: 11px 0; font-size: 16px;}
.layui-text h5{font-size: 14px;} .layui-text h5{margin: 11px 0; font-size: 14px;}
.layui-text h6{font-size: 13px;} .layui-text h6{margin: 11px 0; font-size: 13px;}
.layui-text ul, .layui-text ul,
.layui-text ol{padding-left: 15px;} .layui-text ol{padding-left: 15px;}
.layui-text ul li{margin-top: 5px; list-style-type: disc;} .layui-text ul li{margin-top: 5px; list-style-type: disc;}
@ -668,7 +668,7 @@ hr.layui-border-black{border-width: 0 0 1px;}
.layui-text a:not(.layui-btn){color: #01AAED;} .layui-text a:not(.layui-btn){color: #01AAED;}
.layui-text a:not(.layui-btn):hover{text-decoration: underline;} .layui-text a:not(.layui-btn):hover{text-decoration: underline;}
.layui-text blockquote:not(.layui-elem-quote){margin: 15px 0; padding: 5px 15px; border-left: 5px solid #eee;} .layui-text blockquote:not(.layui-elem-quote){margin: 15px 0; padding: 5px 15px; border-left: 5px solid #eee;}
.layui-text pre > code:not(.layui-code){padding: 15px; font-family: "Courier New",Consolas,"Lucida Console";} .layui-text pre > code:not(.layui-code){display: block; padding: 15px; font-family: "Courier New",Consolas,"Lucida Console";}
/* 字体大小 */ /* 字体大小 */
.layui-font-12{font-size: 12px !important;} .layui-font-12{font-size: 12px !important;}