Semantic-UI复习
Posted SmallCuteMonkey
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Semantic-UI复习相关的知识，希望对你有一定的参考价值。
看了李仁密老师的视频：
右边菜单下拉效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>头像下拉</title>
<!-- 引入Sementic的UI -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
</head>
<body>
<!-- 注销-->
<div class="right menu">
<div class="ui dropdown item">
<div class="text">
<img class="ui avatar image" src="../static/images/bonuscode.jpg">
SmallCuteMonkey
</div>
<i class="dropdown icon"></i>
<div class="menu">
<a href="#" class="item">注销</a>
</div>
</div>
</div>
<!-- senmentic 还使用了Jequery语法 -->
<!-- sementic还使用了Jquery语法所以要导入网上使用js的地址和jquery -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"> </script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
<!--下拉JQuery-->
<script>
$('.ui.dropdown').dropdown({
on: 'hover'
});
/*
默认点击才有
$('.ui.dropdown').dropdown();*/
</script>
</body>
</html>
博客后台管理页面：
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="_fragment :: head">
<meta name="viewport" charset="UTF-8" content="width=device-width,initial-scale=1.0">
<title>博客管理后台</title>
<!-- 引入Sementic的UI -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
<link rel="stylesheet" th:href="@{ /css/distancemini.css}">
</head>
<body>
<!-- sementic用了Js -->
<!-- 导航 -->
<!-- inverted反转 attached依附 -->
<nav class="ui inverted attached segment distancemini">
<div class="ui container">
<div class="ui inverted stackable menu">
<!-- teal 这里是绿色-->
<h2 class="ui teal header item">管理后台</h2>
<a href="#" class="item"> <i class="mini home icon"></i>博客</a>
<a href="#" class="item"><i class="mini tags icon"></i>标签</a>
<a href="#" class="item"><i class="mini info icon"></i>分类</a>
<!-- 注销-->
<div class="right menu">
<div class="ui dropdown item">
<div class="text">
<img class="ui avatar image" src="../static/images/bonuscode.jpg">
SmallcuteMonkey
</div>
<i class="dropdown icon"></i>
<div class="menu">
<a href="#" class="item">注销</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</nav>
<div class="ui attached pointing menu">
<div class="ui container">
<div class="right menu">
<a href="" class="item">发布</a>
<!-- active表示选中-->
<a href="" class="teal active item">列表</a>
</div>
</div>
</div>
<!--中间内容部分-->
<div class="m-container-small m-panded-tb-big">
<div class="ui container">
<form action="#" class="ui segment form">
<!-- 表单加上区域
加上inline后就成一个短一点的行-->
<div class="inline fields">
<div class="field"> <input type="text" name="titile" placeholder="标题"></div>
<div class="field">
<div class="ui selection dropdown">
<input type="hidden" name="type">
<i class="dropdown icon"></i>
<div class="default text">分类</div>
<!--选项里面的内容 -->
<div class="menu">
<div class="item" data-value="1">错误日志</div>
<div class="item" data-value="2">开发者手册</div>
</div>
</div>
</div>
<div class="field">
<div class="ui checkbox">
<!-- input 和label进行绑定 for 和id的相一致-->
<input type="checkbox" name="recommend" id="recommend">
<label for="recommend">推荐</label>
</div>
</div>
<div class="field">
<div class="ui mini circular teal basic button">
<i class="search icon"></i>搜索
</div>
</div>
</div>
</form>
<!-- 表格-->
<!-- celled可以加上网格线-->
<table class="ui celled table">
<thead>
<tr>
<th></th>
<th>标题</th>
<th>类型</th>
<th>推荐</th>
<th>更新时间</th>
<th>操作</th>
</tr>
<a href="" class="ui right floated big teal basic circular inline button">新增</a>
</thead>
<tbody>
<tr>
<td>1</td>
<td>刻意练习清单</td>
<td>认知升级</td>
<td>是</td>
<td>2020-6-24 12:45</td>
<td>
<a href="#" class="ui mini teal button">更新</a>
<a href="#" class="ui mini red basic button">删除</a>
</td>
</tr>
</tbody>
<tfoot>
<th colspan="6">
<div class="ui pagination menu">
<a href="" class="icon item">
<i class="left teal chevron icon"></i>
</a>
<a href="#" class="active item">1</a>
<a href="#" class="item">2</a>
<a href="#" class="item">3</a>
<a href="#" class="item">4</a>
<a href="" class="icon item">
<i class="right teal chevron icon"></i>
</a>
</div>
</th>
</tfoot>
</table>
</div>
</div>
<!-- 底部footer -->
<!-- vertical垂直的 -->
<!-- vertical垂直 middle-->
<footer class="ui inverted vertical segment m-panded-tb-massive">
<div class="ui container">
<!-- grid分成等级16份 -->
<!-- divided分割线 -->
<!-- ui center aligned container 所有的字体居中 -->
<div class="ui center aligned container">
<div class="ui inverted divided grid">
<div class="three wide column">
<!-- rounded修饰图片圆角-->
<div class="item"><img src="../../static/images/bonuscode.jpg" class="ui rounded image" alt="" style="width: 200px"> </div>
</div>
<div class="three wide column">
<h4 class="ui inverted header"> 最新博客</h4>
<!-- list 有 item-->
<div class="ui inverted link list">
<a href="#" class="item">用户故事userstory</a>
<a href="#" class="item">用户故事</a>
<a href="#" class="item">用户故事</aSemantic-ui 模态与 VueJS 重复