看了李仁密老师的视频:
右边菜单下拉效果:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>头像下拉</title>
<!-- 引入Sementic的UI -->
<link rel="stylesheet" href="https://cdn.jsdelivr/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/npm/jquery@3.2/dist/jquery.min.js"> </script>
<script src="https://cdn.jsdelivr/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">
<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/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">用户故事</a>
</div>
</div>
<div class="three wide column">
<h4 class="ui inverted header "> 联系我</h4>
<div class="ui inverted link list">
<a href="#" class="item">E-mail 2282240015@qq</a>
<a href="#" class="item">2282240015</a>
<a href="#" class="item">用户故事</a>
</div>
</div>
<div class="three wide column">
<h4 class="ui inverted header m-opacity-mini">TobeTangMonk</h4>
<p class="m-text-thin m-text-spaced m-opacity-mini">这个是我的个人博客,分享有关编程,思考,分享源代码,和个人生活中的点点滴滴的事情,我希望可以坚持一辈子写好博客,养成好的习惯,to be a kind and inteligent boy</p>
</div>
</div>
<!-- 分割线 ui ui selection divider -->
<div class="ui section divider"> <p class="m-text-spaced m-text-lined" style="color: white !important;">Copyright @2016-2017</p>
</div>
</div>、
</div>
</footer>
<!-- senmentic 还使用了Jequery语法 -->
<!-- sementic还使用了Jquery语法所以要导入网上使用js的地址和jquery -->
<script src="https://cdn.jsdelivr/npm/jquery@3.2/dist/jquery.min.js"> </script>
<script src="https://cdn.jsdelivr/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
<!-- 头像下拉-->
<!-- 默认点击才有下拉-->
<script>
$(".ui.dropdown").dropdown({
on: 'hover'
});
</script>
</body>
</html>
博客发布页面 blog-input.html:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf">
<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/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="teal active item">发布</a>
<!-- active表示选中-->
<a href="" class=" item">列表</a>
</div>
</div>
</div>
<!--中间内容部分-->
<div class="m-container-small m-panded-tb-big">
<div class="ui container">
<form action="#" method="post" class="ui form">
<!-- 加上required要求必须要输入-->
<div class="required field">
<div class="ui left label input">
<!-- 加上compact下拉框马上变紧凑-->
<div class="ui compact teal basic selection dropdown label">
<input type="hidden" name="" value="原创">
<i class="dropdown icon"></i>
<div class="default text">原创</div>
<div class="menu">
<div class="item" data-value="原创">原创</div>
<div class="item" data-value="转载">转载</div>
<div class="item" data-value="翻译">翻译</div>
</div>
</div>
<input type="text" name="title" placeholder="标题">
</div>
</div>
<div class="field">
<textarea placeholder="博客内容" name="content"></textarea>
</div>
<div class="two fields">
<!-- 分类-->
<div class="field">
<!-- 加上action可以连接紧密-->
<div class="ui left labeled action input">
<label class="ui compact teal basic label">分类</label>
<div class="ui fluid selection multiple search 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>
<!-- 标签-->
<div class="field">
<!-- 加上action可以连接紧密-->
<div class="ui left labeled action input">
<label class="ui compact teal basic label">标签</label>
<!-- 加上可以充满整个宽度-->
<div class="ui fluid multiple search selection dropdown">
<input type="hidden" name="tag">
<i class="dropdown icon"></i>
<div class="default text">
标签
</div>
<div class="menu">
<div class="item" data-value="1">java</div>
<div class="item" data-value="2">javaScript</div>
</div>
</div>
</div>
</div>
</div>
<!-- 首图引用地址-->
<div class="field">
<div class="ui left labeled input">
<label class="ui compact teal basic label" > 首图引用地址</label>
<input type="text" name="indexPicture" placeholder="首图引用地址">
</div>
</div>
<!-- 多个Filed放在一行-->
<div class="inline fields">
<div class="field">
<div class="ui checkbox">
<!-- checked默认选中-->
<input type="checkbox" id="recommend" class="hidden" checked>
<label for="recommend">推荐</label>
</div>
</div>
<!-- shareInfo-->
<div class="field">
<div class="ui checkbox">
<input type="checkbox" id="shareInfo" class="hidden">
<label for="shareInfo">转载声明</label>
</div>
</div>
<!-- 赞赏-->
<div class="field">
<div class="ui checkbox">
<input type="checkbox" id="appreciation" class="hidden">
<label for="appreciation">推荐</label>
</div>
</div>
<!-- 评论-->
<div class="field">
<div class="ui checkbox">
<input type="checkbox" id="comment" class="hidden">
<label for="comment">评论</label>
</div>
</div>
</div>
//标题没有输出现错误的信息在这里进行显示
<div class="ui error message">
</div>
<!-- 三个按钮-->
<!-- 容器可以向右对齐-->
<div class="ui right aligned container">
<!-- οnclick="window.history.go(-1)"点出返回上一个页面-->
<!-- 类型声明一下,type默认是submit-->
<button type="button" class="ui button" onclick="window.history.go(-1)">返回</button>
<button class="ui secondary button">保存</button>
<button class="ui teal button">发布</button>
</div>
</form>
</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">用户故事</a>
</div>
</div>
<div class="three wide column">
<h4 class="ui inverted header "> 联系我</h4>
<div class="ui inverted link list">
<a href="#" class="item">E-mail 2282240015@qq</a>
<a href="#" class="item">2282240015</a>
<a href="#" class="item">用户故事</a>
</div>
</div>
<div class="three wide column">
<h4 class="ui inverted header m-opacity-mini">TobeTangMonk</h4>
<p class="m-text-thin m-text-spaced m-opacity-mini">这个是我的个人博客,分享有关编程,思考,分享源代码,和个人生活中的点点滴滴的事情,我希望可以坚持一辈子写好博客,养成好的习惯,to be a kind and inteligent boy</p>
</div>
</div>
<!-- 分割线 ui ui selection divider -->
<div class="ui section divider"> <p class="m-text-spaced m-text-lined" style="color: white !important;">Copyright @2016-2017</p>
</div>
</div>、
</div>
</footer>
<!-- senmentic 还使用了Jequery语法 -->
<!-- sementic还使用了Jquery语法所以要导入网上使用js的地址和jquery -->
<script src="https://cdn.jsdelivr/npm/jquery@3.2/dist/jquery.min.js"> </script>
<script src="https://cdn.jsdelivr/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
<!-- 头像下拉-->
<!-- 默认点击才有下拉-->
<script>
$(".ui.dropdown").dropdown({
on: 'hover'
});
</script>
<!--表单的输入的验证-->
<script>
$('.ui.form').form({
fields:{
/*对里面的title的输入进行相关的验证,
* type: 验证是否为空*/
title:{
identifier:'title',
rules:[{
type:'empty',
//这个提示需要加入 .ui.erro.message 放在一个容器中进行显示
prompt:'标题:请输入标题的内容'
}]
}
}
});
</script>
</body>
</html>
更多推荐
Semantic-UI复习
发布评论