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">用户故事</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.com</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.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>


<!--	头像下拉-->
<!--	默认点击才有下拉-->
<script>

	$(".ui.dropdown").dropdown({
		on: 'hover'
	});
	
</script>
	
</body>
</html>

博客发布页面 blog-input.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="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.com</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.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>


<!--	头像下拉-->
<!--	默认点击才有下拉-->
<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>
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

有时间指导毕业设计

觉得写的好的话可以给我打赏

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值