本文档介绍了使用LayUI库进行布局、栅格和导航界面的练习。首先，详细讲解了布局的边侧留白和全局高度设置，以及栅格系统的使用方法。接着，讨论了导航界面的实现，包括水平导航、垂直导航和边侧导航的创建，还提到了按键的样式修改。在实践中，强调了LayUI的class应用，如layui-nav、layui-col-md等，以及如何通过layui-badge添加小标记。
练习功能
一、布局容器+栅格
1.布局
2.栅格基本使用
3.按键
二、导航界面
1.水平导航+子导航
2.垂直导航
3.边侧导航
使用layUI之前首先要下载LayUI库，因为使用的是LayUI中提供的样式
所以使用前要在head中加载环境，主要加载css和js。加载前先将包导入项目中然后加载
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--加载LayUI中的css-->
<link rel="stylesheet" type="text/css" href="/layui-v2.6.8/layui/css/layui.css">
<!--加载LayUI中的js-->
<script src="/layui-v2.6.8/layui/layui.js" type="text/javascript" charset="utf-8"></script>
<title>导航界面</title>
</head>
一、布局和栅格
1.布局
就是在页面中显示信息内容的位置
a)边侧留白
<div class="layui-container" style="background-color:navajowhite;height:300px;" >
b)全局
<div class="layui-fluid" style="background-color:cyan;height:300px;" ></div>
height设置高度范围为300像素 style中设置背景颜色
2.栅格
a)栅格放置
栅格的放置类似于tr和td之间，分行列进行放入，在每行中放入列。
******添加行的方法
<div class="layui-row"><div>
*****添加列
通过class的预设来定义一组列（column），语法为 ：layui-col-md
其中md代表不同分辨率对应大小标记，如果是手机则改为xs，超大屏改为lg。
最后的" * "代表占用多少列，一共每行12列，可以给信息分配在多少列内显示。
例如：
该条文本在md大小分辨率下显示时，该条文本占整行7列，该条背景颜色为syan
定义行<div class="layui-row">
<!-- 定义列 内容的5-12 -->
<div class="layui-col-md5" style="background-color:cyan;">
第一行前5/12
</div>
最低0.47元/天 解锁文章
扫一扫
941
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
