简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >layui前端框架的基本用法

layui前端框架的基本用法

王娇
王娇原创
2020年06月02日 17:54:031130浏览

学习总结

1. 使用layui前端框架，需要在https://www.layui.com上下载layui的包

2.下载后把layui.css,layui.js包含到当前文件中,其中layui.js包含jquery

3.如果想使用layui中的样式，只需要把样式名称放在标签的class中即可

4.https://www.layui.com/doc使用手册地址

使用layui制作前端首页index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>layui前端页面框架</title>
  7.     <link rel="stylesheet" href="layui/css/layui.css" />
  8.     <script src="layui/layui.js"></script>
  9.     <link rel="stylesheet" href="css/index.css" />
  10.   </head>
  11.   <body>
  12.     <div class="layui-container">
  13.       <div class="layui-row">
  14.         <div class="layui-col-md12">
  15.           <div class="layui-nav layui-bg-cyan header" lay-filter="header">
  16.             <div>
  17.               <a href=""><img src="images/logo.png" alt="" /></a>
  18.             </div>
  19.             <div class="layui-nav-item">
  20.               <a href=""> 首页</a>
  21.             </div>
  22.             <div class="layui-nav-item"><a href="javascript:;">发现</a></div>
  23.             <div class="layui-nav-child">
  24.               <div></div>
  25.             </div>
  26.             <div class="layui-nav-item">
  27.               <a href="javascript:;">最新推荐</a>
  28.               <div class="layui-nav-child">
  29.                 <div><a href="">博客</a></div>
  30.                 <div><a href="">项目源码</a></div>
  31.                 <div><a href="">项目实战</a></div>
  32.               </div>
  33.             </div>
  34.             <div class="layui-nav-item"><a href="">解决方案</a></div>
  35.             <div class="layui-nav-item"><a href="">社区</a></div>
  36.             <div class="layui-breadcrumb" lay-separator="|">
  37.               <a href="">
  38.                 <span class="layui-icon layui-icon-username"></span>登录</a
  39.               >
  40.               <a href="">注册</a>
  41.             </div>
  42.           </div>
  43.         </div>
  44.       </div>
  45.       <div class="layui-row">
  46.         <div class="layui-col-md3">
  47.           <div
  48.             class="layui-nav layui-nav-tree layui-nav-side layui-bg-cyan"
  49.             lay-filter="aside"
  50.           >
  51.             <div class="layui-nav-item">
  52.               <a href="javascript:;">我的作品</a>
  53.               <div class="layui-nav-child">
  54.                 <a href="">已分享作品</a>
  55.                 <a href="">未分享作品</a>
  56.               </div>
  57.             </div>
  59.             <div class="layui-nav-item">
  60.               <a href="javascript:;">我的项目</a>
  61.               <div class="layui-nav-child">
  62.                 <a href="">scratch项目</a>
  63.                 <a href="">python项目</a>
  64.               </div>
  65.             </div>
  67.             <div class="layui-nav-item">
  68.               <a href="">我的素材库</a>
  69.             </div>
  71.             <div class="layui-nav-item">
  72.               <a href="">已收藏作品</a>
  73.             </div>
  74.           </div>
  75.         </div>
  76.         <div class="layui-col-md9">
  77.           <form class="layui-form" action="">
  78.             <div class="layui-form-item">
  79.               <label class="layui-form-label">用户名</label>
  80.               <div class="layui-input-inline">
  81.                 <input
  82.                   type="text"
  83.                   name="userName"
  84.                   required
  85.                   lay-verify="required"
  86.                   placeholder="输入邮箱或者手机号"
  87.                   autocomplete="off"
  88.                   class="layui-input"
  89.                 />
  90.               </div>
  91.             </div>
  92.             <div class="layui-form-item">
  93.               <label class="layui-form-label">密码</label>
  94.               <div class="layui-input-inline">
  95.                 <input
  96.                   type="password"
  97.                   name="passWord"
  98.                   required
  99.                   lay-verify="required"
  100.                   placeholder="请输入密码"
  101.                   autocomplete="off"
  102.                   class="layui-input"
  103.                 />
  104.               </div>
  105.               <div class="layui-form-mid layui-word-aux">密码必须大于6位</div>
  106.             </div>
  107.             <div class="layui-form-item">
  108.               <label class="layui-form-label">所在城市</label>
  109.               <div class="layui-input-block">
  110.                 <select name="city" lay-verify="required">
  111.                   <option value=""></option>
  112.                   <option value="0">北京</option>
  113.                   <option value="1">上海</option>
  114.                   <option value="2">广州</option>
  115.                   <option value="3">深圳</option>
  116.                   <option value="4">杭州</option>
  117.                 </select>
  118.               </div>
  119.             </div>
  120.             <div class="layui-form-item">
  121.               <label class="layui-form-label">爱好</label>
  122.               <div class="layui-input-block">
  123.                 <input type="checkbox" name="like[write]" title="写作" />
  124.                 <input type="checkbox" name="like[read]" title="阅读" checked />
  125.                 <input type="checkbox" name="like[program]" title="编程" />
  126.                 <input type="checkbox" name="like[music]" title="听音乐" />
  127.               </div>
  128.             </div>
  129.             <div class="layui-form-item">
  130.               <label class="layui-form-label">是否保存</label>
  131.               <div class="layui-input-block">
  132.                 <input type="checkbox" name="switch" lay-skin="switch" />
  133.               </div>
  134.             </div>
  135.             <div class="layui-form-item">
  136.               <label class="layui-form-label">性别</label>
  137.               <div class="layui-input-block">
  138.                 <input type="radio" name="sex" value="男" title="男" />
  139.                 <input type="radio" name="sex" value="女" title="女" checked />
  140.               </div>
  141.             </div>
  142.             <div class="layui-form-item layui-form-text">
  143.               <label class="layui-form-label">备注</label>
  144.               <div class="layui-input-block">
  145.                 <textarea
  146.                   name="desc"
  147.                   placeholder="请输入内容"
  148.                   class="layui-textarea"
  149.                 ></textarea>
  150.               </div>
  151.             </div>
  152.             <div class="layui-form-item">
  153.               <div class="layui-input-block">
  154.                 <button class="layui-btn" lay-submit lay-filter="formDemo">
  155.                   立即提交
  156.                 </button>
  157.                 <button type="reset" class="layui-btn layui-btn-primary">
  158.                   重置
  159.                 </button>
  160.               </div>
  161.             </div>
  162.           </form>
  163.         </div>
  164.       </div>
  166.       <div class="layui-row">
  167.         <div class="layui-col-md12 footer">
  168.           <div class="title">关于我们</div>
  169.           <div>
  170.             <div><a href="">公司简介</a></div>
  171.             <div><a href="">意见反馈</a></div>
  172.           </div>
  174.           <div class="title">服务协议</div>
  175.           <div>
  176.             <div><a href="">用户协议</a></div>
  177.             <div><a href="">免责声明</a></div>
  178.           </div>
  180.           <div class="title">友情链接</div>
  181.           <div>
  182.             <div><a href="">国际青少年编程信息网</a></div>
  183.           </div>
  185.           <div class="title">联系我们</div>
  186.           <div>
  187.             <div>
  188.               <a href=""
  189.                 ><span
  190.                   class="layui-icon layui-icon-email"
  191.                   style="color: orangered;"
  192.                 ></span>
  193.                 573661083@qq.com</a
  194.               >
  195.             </div>
  196.             <div>
  197.               <a href=""
  198.                 ><span
  199.                   class="layui-icon layui-icon-login-qq"
  200.                   style="color: lightblue;"
  201.                 ></span>
  202.                 573661083</a
  203.               >
  204.             </div>
  205.           </div>
  207.           <div class="title">微信公众号</div>
  208.           <div>
  209.             <div><a href="">国际青少年编程信息网</a></div>
  210.           </div>
  211.         </div>
  212.       </div>
  213.     </div>
  214.   </body>
  215. </html>
  216. <script>
  217.   layui.use("element", function () {
  218.     var element = layui.element;
  219.   });
  220.   layui.use("form", function () {
  221.     var form = layui.form;
  222.   });
  223. </script>

css样式

  2. .layui-row:nth-of-type(2) {
  3.   min-height: 600px;
  4. }
  5. .header {
  6.   display: flex;
  7.   flex-flow: row nowrap;
  8.   align-items: center;
  9. }
  10. .layui-breadcrumb {
  11.   margin-left: auto;
  12. }
  13. .layui-nav-side {
  14.   float: none;
  15.   position: relative;
  16. }
  17. form {
  18.   margin-top: 10px;
  19. }
  20. .footer {
  21.   background-color: #314257;
  22.   margin-bottom: 5px;
  23.   height: 180px;
  24.   color: white;
  25.   border-radius: 5px;
  26.   display: grid;
  27.   grid-template-columns: repeat(5, 1fr);
  28.   grid-template-rows: repeat(2, 1fr);
  29.   grid-auto-flow: column;
  30.   place-items: center;
  31.   gap: 10px;
  32. }
  33. .footer > .title {
  34.   align-self: flex-end;
  35. }
  36. .footer > div:not(.title) {
  37.   align-self: flex-start;
  38. }
  39. .footer > div > div {
  40.   padding-right: 10px;
  41.   border-right: 1px solid #888;
  42. }
  43. .footer a {
  44.   color: #ccc;
  45.   font-size: 0.7rem;
  46. }
  47. .footer a:hover {
  48.   color: orangered;
  49. }

代码显示效果

上一条：PHP基础：composer 的常用命令下一条：PHP基础：利用URL路由解析技术解析控制器及参数
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多