mirror of https://github.com/layui/layui
chore: 优化 .layui-body 和 .layui-text 样式细节 (#2395)
* style: 剔除 .layui-body 不必要的 z-index，提升内部 fixed 布局灵活度 * style: 优化 .layui-text 文本类pull/2426/head
贤心
GitHub
parent
bdba124e6e
commit
1e2f70aa50
|
|
@ -123,9 +123,9 @@ toc: true
|
|||
| layui-font-black | <span class="layui-font-black">深</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']}">
|
||||
<textarea>
|
||||
|
|
@ -139,45 +139,59 @@ toc: true
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link href="{{= d.layui[2].cdn.css }}" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div class="layui-text" style="padding: 16px;">
|
||||
<body class="layui-padding-3">
|
||||
<div class="layui-text">
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<h5>标题5</h5>
|
||||
<h6>标题6</h6>
|
||||
|
||||
<hr>
|
||||
<p>段落6段落6段落6段落6段落6段落6段落6段落6段落6</p>
|
||||
|
||||
<h3>无序列表</h3>
|
||||
<ul>
|
||||
<li>列表1</li>
|
||||
<li>
|
||||
列表2
|
||||
<ul>
|
||||
<li>列表2-1</li>
|
||||
<li>
|
||||
列表2-1
|
||||
<ul>
|
||||
<li>列表2-1-1</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>列表2-2</li>
|
||||
<li>列表2-3</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>列表3</li>
|
||||
</ul>
|
||||
|
||||
<hr>
|
||||
|
||||
<h3>有序列表</h3>
|
||||
<ol>
|
||||
<li>列表1</li>
|
||||
<li>列表2</li>
|
||||
<li>列表3</li>
|
||||
</ol>
|
||||
|
||||
<hr>
|
||||
<h3>Blockquote</h3>
|
||||
<blockquote>
|
||||
<p>引用</p>
|
||||
<blockquote>内嵌引用<blockquote>内嵌引用</blockquote></blockquote>
|
||||
</blockquote>
|
||||
|
||||
<h2>标题2</h2>
|
||||
<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>
|
||||
<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>
|
||||
<blockquote>引用</blockquote>
|
||||
<p>这是一个包含<a href="javascript:;">超文本</a>和<strong>加粗文本</strong>的段落</p>
|
||||
<h3>Code</h3>
|
||||
<pre><code>var cp = function(){
|
||||
return gulp.src('./dist/**/*')
|
||||
.pipe(gulp.dest(dest));
|
||||
};
|
||||
</code></pre>
|
||||
<hr>
|
||||
<p id="ref-1">Footer</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,15 +1,14 @@
|
|||
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<title>layout 管理系统大布局 - Layui</title>
|
||||
<link rel="stylesheet" href="../src/css/layui.css">
|
||||
<meta charset="utf-8">
|
||||
<title>layout 管理界面大布局示例 - Layui</title>
|
||||
<meta name="renderer" content="webkit">
|
||||
<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>
|
||||
<body>
|
||||
|
||||
<div class="layui-layout layui-layout-admin">
|
||||
<div class="layui-header">
|
||||
<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">
|
||||
<i class="layui-icon layui-icon-spread-left"></i>
|
||||
</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="">nav 2</a></li>
|
||||
<li class="layui-nav-item layui-hide-xs"><a href="">nav 3</a></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="javascript:;">nav 2</a></li>
|
||||
<li class="layui-nav-item layui-hide-xs"><a href="javascript:;">nav 3</a></li>
|
||||
<li class="layui-nav-item">
|
||||
<a href="javascript:;">nav groups</a>
|
||||
<dl class="layui-nav-child">
|
||||
<dd><a href="">menu 11</a></dd>
|
||||
<dd><a href="">menu 22</a></dd>
|
||||
<dd><a href="">menu 33</a></dd>
|
||||
<dd><a href="javascript:;">menu 11</a></dd>
|
||||
<dd><a href="javascript:;">menu 22</a></dd>
|
||||
<dd><a href="javascript:;">menu 33</a></dd>
|
||||
</dl>
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
<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:;">
|
||||
<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
|
||||
</a>
|
||||
<dl class="layui-nav-child">
|
||||
<dd><a href="">Your Profile</a></dd>
|
||||
<dd><a href="">Settings</a></dd>
|
||||
<dd><a href="">Sign out</a></dd>
|
||||
<dd><a href="javascript:;">Your Profile</a></dd>
|
||||
<dd><a href="javascript:;">Settings</a></dd>
|
||||
<dd><a href="javascript:;">Sign out</a></dd>
|
||||
</dl>
|
||||
</li>
|
||||
|
||||
<li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
|
||||
<a href="javascript:;">
|
||||
<i class="layui-icon layui-icon-more-vertical"></i>
|
||||
|
|
@ -54,7 +49,6 @@
|
|||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="layui-side layui-bg-black">
|
||||
<div class="layui-side-scroll">
|
||||
<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
|
||||
|
|
@ -65,7 +59,7 @@
|
|||
<dd><a href="javascript:;">menu 1</a></dd>
|
||||
<dd><a href="javascript:;">menu 2</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>
|
||||
</li>
|
||||
<li class="layui-nav-item">
|
||||
|
|
@ -73,42 +67,20 @@
|
|||
<dl class="layui-nav-child">
|
||||
<dd><a href="javascript:;">list 1</a></dd>
|
||||
<dd><a href="javascript:;">list 2</a></dd>
|
||||
<dd><a href="">超链接</a></dd>
|
||||
<dd><a href="javascript:;">超链接</a></dd>
|
||||
</dl>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-body">
|
||||
<!-- 内容主体区域 -->
|
||||
<div style="padding: 15px;">
|
||||
内容主体区域
|
||||
|
||||
<br><br>
|
||||
|
||||
<blockquote class="layui-elem-quote layui-text">
|
||||
<ul>
|
||||
<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>
|
||||
Layui 框体布局内容主体区域
|
||||
</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-header">
|
||||
下面是充数内容，为的是出现滚动条
|
||||
|
|
@ -118,12 +90,8 @@
|
|||
</div>
|
||||
</div>
|
||||
<br><br>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-footer">
|
||||
<!-- 底部固定区域 -->
|
||||
底部固定区域
|
||||
|
|
@ -132,31 +100,31 @@
|
|||
|
||||
<script src="../src/layui.js"></script>
|
||||
<script>
|
||||
//JS
|
||||
//JS
|
||||
layui.use(['element', 'layer', 'util'], function(){
|
||||
var element = layui.element
|
||||
,layer = layui.layer
|
||||
,util = layui.util
|
||||
,$ = layui.$;
|
||||
|
||||
var element = layui.element;
|
||||
var layer = layui.layer;
|
||||
var util = layui.util;
|
||||
var $ = layui.$;
|
||||
|
||||
//头部事件
|
||||
util.event('lay-header-event', {
|
||||
//左侧菜单事件
|
||||
menuLeft: function(othis){
|
||||
menuLeft: function(othis){ // 左侧菜单事件
|
||||
layer.msg('展开左侧菜单的操作', {icon: 0});
|
||||
}
|
||||
,menuRight: function(){
|
||||
},
|
||||
menuRight: function(){ // 右侧菜单事件
|
||||
layer.open({
|
||||
type: 1
|
||||
,content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
|
||||
,area: ['260px', '100%']
|
||||
,offset: 'rt' //右上角
|
||||
,anim: 5
|
||||
,shadeClose: true
|
||||
type: 1,
|
||||
title: '更多',
|
||||
content: '<div style="padding: 15px;">处理右侧面板的操作</div>',
|
||||
area: ['260px', '100%'],
|
||||
offset: 'rt', // 右上角
|
||||
anim: 'slideLeft', // 从右侧抽屉滑出
|
||||
shadeClose: true,
|
||||
scrollbar: false
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -10,41 +10,59 @@
|
|||
<div class="layui-container layui-row">
|
||||
<div class="layui-col-md4 layui-text">
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<h5>标题5</h5>
|
||||
<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>段落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>
|
||||
<p>段落6段落6段落6段落6段落6段落6段落6段落6段落6</p>
|
||||
|
||||
<h3>无序列表</h3>
|
||||
<ul>
|
||||
<li>无序1</li>
|
||||
<li>无序2</li>
|
||||
<li>无序3</li>
|
||||
<li>列表1</li>
|
||||
<li>
|
||||
列表2
|
||||
<ul>
|
||||
<li>
|
||||
列表2-1
|
||||
<ul>
|
||||
<li>列表2-1-1</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>列表2-2</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>列表3</li>
|
||||
</ul>
|
||||
|
||||
<h3>有序列表</h3>
|
||||
<ol>
|
||||
<li>有序1</li>
|
||||
<li>有序2</li>
|
||||
<li>有序3</li>
|
||||
<li>列表1</li>
|
||||
<li>列表2</li>
|
||||
<li>列表3</li>
|
||||
</ol>
|
||||
<br>
|
||||
|
||||
<h3>Blockquote</h3>
|
||||
<blockquote>
|
||||
<p>引用</p>
|
||||
<blockquote>内嵌引用<blockquote>内嵌引用</blockquote></blockquote>
|
||||
</blockquote>
|
||||
|
||||
<br>
|
||||
|
||||
<pre>
|
||||
var cp = function(){
|
||||
<h3>Code</h3>
|
||||
<pre><code>var cp = function(){
|
||||
return gulp.src('./dist/**/*')
|
||||
.pipe(gulp.dest(dest));
|
||||
};</pre>
|
||||
};
|
||||
</code></pre>
|
||||
|
||||
<p id="ref-1">REF-1</p>
|
||||
<hr>
|
||||
|
||||
<p id="ref-1">REF-1</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -11,8 +11,8 @@ a:active,a:hover{outline:0}
|
|||
img{display: inline-block; border: none; vertical-align: middle;}
|
||||
li{list-style:none;}
|
||||
table{border-collapse: collapse; border-spacing: 0;}
|
||||
h1,h2,h3,h4{font-weight: 700;}
|
||||
h5,h6{font-weight: 500; font-size: 100%;}
|
||||
h1,h2,h3,h4,h5,h6{font-weight: 700;}
|
||||
h5,h6{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;}
|
||||
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-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: 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;}
|
||||
|
|
@ -650,12 +650,12 @@ hr.layui-border-black{border-width: 0 0 1px;}
|
|||
|
||||
/* 文本区域 */
|
||||
.layui-text{line-height: 1.8; font-size: 14px;}
|
||||
.layui-text h1{font-size: 32px;}
|
||||
.layui-text h2{font-size: 24px;}
|
||||
.layui-text h3{font-size: 18px;}
|
||||
.layui-text h4{font-size: 16px;}
|
||||
.layui-text h5{font-size: 14px;}
|
||||
.layui-text h6{font-size: 13px;}
|
||||
.layui-text h1{margin: 32px 0; font-size: 32px;}
|
||||
.layui-text h2{margin: 24px 0; font-size: 24px;}
|
||||
.layui-text h3{margin: 16px 0; font-size: 18px;}
|
||||
.layui-text h4{margin: 11px 0; font-size: 16px;}
|
||||
.layui-text h5{margin: 11px 0; font-size: 14px;}
|
||||
.layui-text h6{margin: 11px 0; font-size: 13px;}
|
||||
.layui-text ul,
|
||||
.layui-text ol{padding-left: 15px;}
|
||||
.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):hover{text-decoration: underline;}
|
||||
.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;}
|
||||
|
|
|
|||
Loading…
Reference in New Issue