uikit主页地址
uikit常用组件
- 网格
- 面板
- 效果（常用css样式 浮动，定位，margin，对齐，可见性等）
- 导航菜单
- 导航栏
- 下拉菜单
- 选项卡
- 表单
- 按钮
- 图标
- 文本
- 模态对话框
- 抽屉
- 文章
- 评论
引入uikit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,user-scalable=no,initial-scale=1, minimum-scale=1, maximum-scale=1">
<title>Title</title>
<link href="uikit-2.25.0/css/uikit.almost-flat.min.css" rel="stylesheet">
<script src="jquery/jquery.js"></script>
<script src="uikit-2.25.0/js/uikit.min.js"></script>
</head>
<body>
<ul class="uk-list">
<li>java</li>
<li>php</li>
</ul>
</body>
</html>
使用uikit的好处
uikit 事先为我们定义好了一些常用的css样式，指定了特定的类名，简化了代码的编写。
例子1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,user-scalable=no,initial-scale=1, minimum-scale=1, maximum-scale=1">
<title>Title</title>
<link href="uikit-2.25.0/css/uikit.almost-flat.min.css" rel="stylesheet">
<script src="jquery/jquery.js"></script>
<script src="uikit-2.25.0/js/uikit.min.js"></script>
<style>
.content
{
text-align: center;
}
</style>
</head>
<body>
<div class="uk-text-center">
uikit 事先为我们定义好了一些常用的css样式，指定了特定的类名。
</div>
<div class="content">
uikit 事先为我们定义好了一些常用的css样式，指定了特定的类名。
</div>
</body>
</html>
例子2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,user-scalable=no,initial-scale=1, minimum-scale=1, maximum-scale=1">
<title>Title</title>
<link href="uikit-2.25.0/css/uikit.almost-flat.min.css" rel="stylesheet">
<script src="jquery/jquery.js"></script>
<script src="uikit-2.25.0/js/uikit.min.js"></script>
<style>
div{
width: 100px;
height: 100px;
border: 1px solid red;
}
.float-div
{
float: left;
}
</style>
</head>
<body>
<div class="float-div">
</div>
<div class="float-div">
</div>
<div class="uk-float-left">
</div>
</body>
</html>
例子3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,user-scalable=no,initial-scale=1, minimum-scale=1, maximum-scale=1">
<title>Title</title>
<link href="uikit-2.25.0/css/uikit.almost-flat.min.css" rel="stylesheet">
<script src="jquery/jquery.js"></script>
<script src="uikit-2.25.0/js/uikit.min.js"></script>
<style>
.set-margin
{
margin-top: 20px;
}
</style>
</head>
<body>
<div class="set-margin">
css设定上外边距
</div>
<div class="uk-margin-top">
uikit设定上外边距
</div>
</body>
</html>
网友评论