code.html 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>镜像站@文本行主题 - 在线演示 - Layui</title>
  6. <meta name="renderer" content="webkit">
  7. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  8. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  9. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  10. <meta name="apple-mobile-web-app-capable" content="yes">
  11. <meta name="format-detection" content="telephone=no">
  12. <script>
  13. ;!function(){self!==parent&&(location.href="http://www.baidu.com/")}();
  14. </script>
  15. <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css?t=1632428048260" media="all">
  16. <link rel="stylesheet" href="/public/static/css/global.css" tppabs="http://res.layui.com/static/css/global.css?t=1632428048260-19" media="all">
  17. </head>
  18. <body>
  19. <div class="layui-layout layui-layout-admin">
  20. <div class="layui-header header header-demo" autumn>
  21. <div class="layui-fluid">
  22. <a class="logo" href="../index.html" tppabs="http://www.layui.com/">
  23. <img src="/public/static/images/layui/logo.png" tppabs="http://res.layui.com/static/images/layui/logo.png" alt="layui">
  24. </a>
  25. <div class="layui-form layui-hide-xs component" lay-filter="LAY-site-header-component"></div>
  26. <div class="layui-hide-xs site-notice"></div>
  27. <ul class="layui-nav" id="LAY_NAV_TOP">
  28. <li class="layui-nav-item ">
  29. <a href="../doc/index.html" tppabs="http://www.layui.com/doc/">文档</a>
  30. </li>
  31. <li class="layui-nav-item layui-this">
  32. <a href="index.html" tppabs="http://www.layui.com/demo/">示例</a>
  33. </li>
  34. <li class="layui-nav-item">
  35. <a href="javascript:;">
  36. <!--<span class="layui-badge-dot" style="left:0; right: auto; margin: -4px 0 0 5px;"></span>-->
  37. 周边
  38. </a>
  39. <dl class="layui-nav-child layui-nav-child-c">
  40. <dd class="layui-hide-sm layui-show-xs" lay-unselect>
  41. <a href="https://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">问题反馈</a>
  42. <hr>
  43. </dd>
  44. <dd lay-unselect><a href="../alone.html" tppabs="http://www.layui.com/alone.html" target="_blank" lay-unselect>独立组件</a></dd>
  45. <dd lay-unselect><a href="../../fly.layui.com/extend/index.html" target="_blank">扩展组件</a></dd>
  46. </dl>
  47. </li>
  48. <li class="layui-nav-item layui-hide-xs">
  49. <a href="http://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">反馈</a>
  50. </li>
  51. </ul>
  52. </div>
  53. </div>
  54. <!-- 让IE8/9支持媒体查询,从而兼容栅格 -->
  55. <!--[if lt IE 9]>
  56. <script src="../../other/html5shiv/r29/html5.min.js" tppabs="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
  57. <script src="../../other/respond.js/1.4.2/respond.min.js" tppabs="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
  58. <![endif]-->
  59. <div class="layui-side layui-bg-black">
  60. <div class="layui-side-scroll">
  61. <ul class="layui-nav layui-nav-tree site-demo-nav">
  62. <li class="layui-nav-item layui-nav-itemed">
  63. <a class="javascript:;" href="javascript:;">演示</a>
  64. <dl class="layui-nav-child">
  65. <dd>
  66. <a href="index.html" tppabs="http://www.layui.com/demo/">调试预览</a>
  67. </dd>
  68. </dl>
  69. </li>
  70. <li class="layui-nav-item layui-nav-itemed">
  71. <a class="javascript:;" href="javascript:;">布局</a>
  72. <dl class="layui-nav-child">
  73. <dd class="">
  74. <a href="grid.html" tppabs="http://www.layui.com/demo/grid.html">栅格</a>
  75. </dd>
  76. <dd class="">
  77. <a href="admin.html" tppabs="http://www.layui.com/demo/admin.html">框架</a>
  78. </dd>
  79. </dl>
  80. </li>
  81. <li class="layui-nav-item layui-nav-itemed">
  82. <a class="javascript:;" href="javascript:;">基本元素</a>
  83. <dl class="layui-nav-child">
  84. <dd class="">
  85. <a href="button.html" tppabs="http://www.layui.com/demo/button.html">按钮</a>
  86. </dd>
  87. <dd class="">
  88. <a href="form.html" tppabs="http://www.layui.com/demo/form.html">表单</a>
  89. </dd>
  90. <dd class="">
  91. <a href="nav.html" tppabs="http://www.layui.com/demo/nav.html">导航 / 面包屑</a>
  92. </dd>
  93. <dd class="">
  94. <a href="menu.html" tppabs="http://www.layui.com/demo/menu.html">基础菜单</a>
  95. </dd>
  96. <dd class="">
  97. <a href="tab.html" tppabs="http://www.layui.com/demo/tab.html">选项卡</a>
  98. </dd>
  99. <dd class="">
  100. <a href="progress.html" tppabs="http://www.layui.com/demo/progress.html">进度条</a>
  101. </dd>
  102. <dd class="">
  103. <a href="panel.html" tppabs="http://www.layui.com/demo/panel.html">面板</a>
  104. </dd>
  105. <dd class="">
  106. <a href="badge.html" tppabs="http://www.layui.com/demo/badge.html">徽章</a>
  107. </dd>
  108. <dd class="">
  109. <a href="timeline.html" tppabs="http://www.layui.com/demo/timeline.html">时间线</a>
  110. </dd>
  111. <dd class="">
  112. <a href="table-element.html" tppabs="http://www.layui.com/demo/table-element.html">静态表格</a>
  113. </dd>
  114. <dd class="">
  115. <a href="anim.html" tppabs="http://www.layui.com/demo/anim.html">动画</a>
  116. </dd>
  117. <dd class="">
  118. <a href="auxiliar.html" tppabs="http://www.layui.com/demo/auxiliar.html">辅助元素</a>
  119. </dd>
  120. </dl>
  121. </li>
  122. <li class="layui-nav-item layui-nav-itemed">
  123. <a class="javascript:;" href="javascript:;">组件示例</a>
  124. <dl class="layui-nav-child">
  125. <dd class="">
  126. <a href="layer.html" tppabs="http://www.layui.com/demo/layer.html">
  127. 弹出层
  128. </a>
  129. </dd>
  130. <dd class="">
  131. <a href="laydate.html" tppabs="http://www.layui.com/demo/laydate.html">
  132. 日期与时间选择
  133. </a>
  134. </dd>
  135. <dd class="">
  136. <a href="table.html" tppabs="http://www.layui.com/demo/table.html">
  137. 数据表格
  138. </a>
  139. </dd>
  140. <dd class="">
  141. <a href="laypage.html" tppabs="http://www.layui.com/demo/laypage.html">
  142. 分页
  143. </a>
  144. </dd>
  145. <dd class="">
  146. <a href="dropdown.html" tppabs="http://www.layui.com/demo/dropdown.html">
  147. 下拉菜单
  148. </a>
  149. </dd>
  150. <dd class="">
  151. <a href="upload.html" tppabs="http://www.layui.com/demo/upload.html">
  152. 文件上传
  153. </a>
  154. </dd>
  155. <dd class="">
  156. <a href="transfer.html" tppabs="http://www.layui.com/demo/transfer.html">
  157. 穿梭框
  158. </a>
  159. </dd>
  160. <dd class="">
  161. <a href="tree.html" tppabs="http://www.layui.com/demo/tree.html">
  162. 树形组件
  163. </a>
  164. </dd>
  165. <dd class="">
  166. <a href="colorpicker.html" tppabs="http://www.layui.com/demo/colorpicker.html">
  167. 颜色选择器
  168. </a>
  169. </dd>
  170. <dd class="">
  171. <a href="slider.html" tppabs="http://www.layui.com/demo/slider.html">
  172. 滑块
  173. </a>
  174. </dd>
  175. <dd class="">
  176. <a href="rate.html" tppabs="http://www.layui.com/demo/rate.html">
  177. 评分
  178. </a>
  179. </dd>
  180. <dd class="">
  181. <a href="carousel.html" tppabs="http://www.layui.com/demo/carousel.html">
  182. 轮播
  183. </a>
  184. </dd>
  185. <dd class="">
  186. <a href="laytpl.html" tppabs="http://www.layui.com/demo/laytpl.html">
  187. 模板引擎
  188. </a>
  189. </dd>
  190. <dd class="">
  191. <a href="layedit.html" tppabs="http://www.layui.com/demo/layedit.html">
  192. 富文本编辑器
  193. </a>
  194. </dd>
  195. <dd class="">
  196. <a href="flow.html" tppabs="http://www.layui.com/demo/flow.html">
  197. 流加载
  198. </a>
  199. </dd>
  200. <dd class="">
  201. <a href="util.html" tppabs="http://www.layui.com/demo/util.html">
  202. 工具模块
  203. </a>
  204. </dd>
  205. <dd class="layui-this">
  206. <a href="code.html" tppabs="http://www.layui.com/demo/code.html">
  207. 文本行修饰
  208. </a>
  209. </dd>
  210. </dl>
  211. </li>
  212. <li class="layui-nav-item" style="height: 30px; text-align: center"></li>
  213. </ul>
  214. </div>
  215. </div>
  216. <div class="layui-tab layui-tab-brief" lay-filter="demoTitle">
  217. <ul class="layui-tab-title site-demo-title">
  218. <li class="layui-this">预览</li>
  219. <li>查看代码</li>
  220. <li>帮助</li>
  221. </ul>
  222. <div class="layui-body layui-tab-content site-demo site-demo-body">
  223. <div class="layui-tab-item layui-show">
  224. <div class="layui-main">
  225. <div id="LAY_preview">
  226. <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
  227. <legend>默认修饰</legend>
  228. </fieldset>
  229. <pre class="layui-code">
  230. //在里面存放任意的文本内容
  231. test
  232. test
  233. test
  234. </pre>
  235. <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
  236. <legend>notepad 风格</legend>
  237. </fieldset>
  238. <pre class="layui-code" lay-title="JavaScript" lay-skin="notepad">
  239. //在里面存放任意的文本内容
  240. test
  241. test
  242. test
  243. </pre>
  244. <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
  245. <legend>叠加使用</legend>
  246. </fieldset>
  247. <pre class="layui-code">
  248. //在里面存放任意的文本内容
  249. test
  250. test
  251. test
  252. <pre class="layui-code">
  253. //在里面存放任意的文本内容
  254. test
  255. test
  256. test
  257. </pre>
  258. </pre>
  259. <pre class="layui-code" lay-skin="notepad">
  260. //在里面存放任意的文本内容
  261. test
  262. test
  263. test
  264. <pre class="layui-code" lay-skin="notepad">
  265. //在里面存放任意的文本内容
  266. test
  267. test
  268. test
  269. <pre class="layui-code" lay-skin="notepad">
  270. //在里面存放任意的文本内容
  271. test
  272. test
  273. test
  274. <pre class="layui-code" lay-skin="notepad">
  275. //在里面存放任意的文本内容
  276. test
  277. test
  278. test
  279. <pre class="layui-code" lay-skin="notepad">
  280. //在里面存放任意的文本内容
  281. test
  282. test
  283. test
  284. </pre>
  285. </pre>
  286. </pre>
  287. </pre>
  288. </pre>
  289. <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
  290. <legend>固定高度</legend>
  291. </fieldset>
  292. <pre class="layui-code" lay-height="150px">
  293. //在里面存放任意的文本内容
  294. test
  295. test
  296. test
  297. </pre>
  298. </div>
  299. <blockquote class="layui-elem-quote" style="margin-top: 30px;">
  300. 更多我们未能呈现的示例,还有待您在阅读文档、以及不断使用的过程,去深入挖掘。
  301. </blockquote>
  302. <div style="margin: 15px 0 100px; padding-bottom: 100px;">
  303. </div>
  304. </div>
  305. </div>
  306. <div class="layui-tab-item">
  307. <textarea class="layui-border-box site-demo-text site-demo-code" id="LAY_democode" spellcheck="false" readonly>
  308. <!DOCTYPE html>
  309. <html>
  310. <head>
  311. <meta charset="utf-8">
  312. <title>镜像站@Layui</title>
  313. <meta name="renderer" content="webkit">
  314. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  315. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  316. <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css" media="all">
  317. <!-- 注意:如果你直接复制所有代码到本地,上述css路径需要改成你本地的 -->
  318. </head>
  319. </textarea>
  320. </div>
  321. <div class="layui-tab-item">
  322. <div class="layui-main">
  323. <p></p>
  324. <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
  325. <legend>相关</legend>
  326. </fieldset>
  327. <a class="layui-btn layui-btn-normal" href="../doc/modules/code.html" tppabs="http://www.layui.com/doc/modules/code.html" target="_blank">文本行修饰文档</a>
  328. </div>
  329. </div>
  330. </div>
  331. </div>
  332. <div class="layui-footer footer footer-demo">
  333. <p>
  334. Copyright &copy; 2021 <a href="../index.html" tppabs="http://www.layui.com/">「本站仅为 layui 文档保留的镜像站点,与官方无关」</a> MIT Licensed</p>
  335. <p>
  336. <a href="../about/disclaimer.html" tppabs="http://www.layui.com/about/disclaimer.html" target="_blank">免责声明</a>
  337. <a href="../about/relatedlinks.html" tppabs="http://www.layui.com/about/relatedlinks.html" target="_blank">友链</a>
  338. <a href="javascript:;" site-event="weixinmp">公众号</a>
  339. </p>
  340. <div class="site-union">
  341. <p class="site-union-desc">
  342. <span>
  343. </span>
  344. </p>
  345. </div>
  346. </div>
  347. <script>
  348. window.global = {
  349. pageType: 'demo'
  350. ,preview: function(){
  351. var preview = document.getElementById('LAY_preview');
  352. return preview ? preview.innerHTML : '';
  353. }()
  354. };
  355. </script>
  356. <div class="site-tree-mobile layui-hide">
  357. <i class="layui-icon layui-icon-spread-left"></i>
  358. </div>
  359. <div class="site-mobile-shade"></div>
  360. <script src="/public/layui/dist/layui.js" tppabs="http://res.layui.com/layui/dist/layui.js?t=1632428048260" charset="utf-8"></script>
  361. <script>
  362. layui.config({
  363. base: '/public/static/lay/modules/layui/'
  364. ,version: '1632428048260'
  365. }).use('global');
  366. </script>
  367. </div>
  368. <div id="LAY_democodejs">
  369. <script>
  370. layui.use('code', function(){
  371. //layui.code(); 实际使用时,执行该方法即可。而此处注释是因为修饰器在别的js中已经执行过了
  372. });
  373. </script>
  374. </div>
  375. </body>
  376. </html>