LayUI-导航界面以及基础样式设置练习

最新推荐文章于 2024-04-16 04:56:18 发布

Arvicky

最新推荐文章于 2024-04-16 04:56:18 发布

阅读量3.7k

点赞数

文章标签： css html javascript web

本文链接：https://blog.csdn.net/arvicky/article/details/119464229

版权

练习功能

一、布局容器+栅格
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;"

最低0.47元/天解锁文章

Arvicky

关注

0
点赞
踩
10

收藏

觉得还不错? 一键收藏
1
评论
LayUI-导航界面以及基础样式设置练习

练习功能一、布局容器+栅格1.布局2.栅格基本使用3.按键二、导航界面1.水平导航+子导航2.垂直导航3.边侧导航使用layUI之前首先要下载LayUI库，因为使用的是LayUI中提供的样式所以使用前要在head中加载环境，主要加载css和js。加载前先将包导入项目中然后加载<!DOCTYPE html><html><head><meta charset="UTF-8">&lt
复制链接

扫一扫