使用Layui搭建后台管理界面

最新推荐文章于 2025-05-27 09:08:06 发布

原创

最新推荐文章于 2025-05-27 09:08:06 发布 · 6.2w 阅读

72 ·

CC 4.0 BY-SA版权

文章标签：

#后台管理 #layui

本文介绍了如何利用Layui这个UI框架搭建一个后台管理页面。页面包含Logo、左侧导航、内容Tab页和底部版权信息。通过阅读API文档，作者手动创建了这个布局，并强调Tab页内容通过iframe实现，实际应用中可以结合如Jfinal等后台框架。项目仅使用了layui的基本库，无第三方依赖。文章最后还提及了个人网店的信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Layui是一个样式比较丰富艳丽的UI框架，通过自学了相关api文档，自己手工搭建了一个后台管理页面。页面布局是常用的一套，上面是一个logo，左边区域是一个导航，中间是内容tab页，底部是版权信息，好了，看代码吧！

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>黄宝康个人搭建的后台管理页面</title>
    <link rel="stylesheet" href="css/layui.css">
    <script src="layui.js"></script>
</head>
<body>
    <div class="layui-layout-admin">
        <!--头部-->
        <div class="layui-header">
            <div class="layui-logo">Huang BaoKang</div>
            <ul class="layui-nav layui-layout-left">
                <li class="layui-nav-item"><a href="javascript:void(0)">控制台</a></li>
                <li class="la