Community Learn Tools Library Leisure
search
English
Home > List of blog posts > layui前端框架的基本用法
Blogger Information
Blog 64
fans 6
comment 2
visits 83035
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
layui前端框架的基本用法
王娇
Original
1133 people have browsed it

学习总结

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. }

代码显示效果

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post