samatic-ui(四)分类、标签、归档、关于我页面

一、分类页面

1， 分类标签组合样式的具体的用法见：https://zijieke.com/semantic-ui/elements/button.php

<div class="ui labeled button m-margin">
												<a href="#" class="ui basic teal button">思维认知a>
											    <div class="ui teal basic left pointing label">66div>
										div>

**效果图

2.导航上加阴影的自定义样式

/* -------------导航上加阴影的样式--------------------- */
.m-shadow-small{
     
	box-shadow: 0 4px 8px rgba(0,0,0,0.2) !important;
}

3.将标签放大或缩小的属性

1.放大使用large
2.缩小使用mini

使用large和不使用的区别

<a href="#" class="ui large teal left pointing basic label m-margin-mini">思维认知a>
				     	<a href="#" class="ui left pointing basic label m-margin-mini">思维认知a>

**效果图

4.将

分为两行的用法

<div class="ui grid">
			<div class="row">
				<div class="eleven wide column">
				div>
				<div class="five wide column">
				div>
			div>
			<div class="row">
				<div class="column">
					
				div>
			div>
		div>

应用

<div class="ui stackable grid">
									<div class="row">
							    	<div class="eleven wide column">
										
							    		<div class="ui horizontal link list">
											<div class="item">
							    			        <img src="static/images/阿金斯.jpg" class="ui avatar image" >
													<div class="content">
														<a href="#" class="header">颜鹏荣a>
													div>
											div>
											<div class="item">
											<i class="calendar icon">i>2021-3-19
											div>
											<div class="item">
												<i class="eye icon">i>22222
											div>
							    		div>
							    	div>
									<div class="right aligned five wide column">
							    		<a href="#" class="ui basic teal button m-padded-mini">认知升级a>
							    	div>
									div>
									<div class="row">
									<div class="column">
										<div class="ui  teal basic label">
											方法论
										div>
									div>
									div>
							    div>

*效果图

5.在

中如果有“文本”和“图标”在一起的情况menu会把文本一左一右分开，这个时候如果想让它们紧挨的话，将文本和图标放在中

<div class="ui vertical fluid menu">
					<a href="#"  target="" class=" item">
						<span>
						<i class="mini teal circle icon">i>关于刻意练习的清单
						<div class="ui teal basic left pointing label">
							9月03
						div>
						span>
						<div class="ui basic orange label">
							原创
						div>
					a>

**效果图

6.点击QQ图标下方显示QQ号的样式：

<div class="ui qq circular icon button"  data-content="296503845" data-position="bottom center">
									<i class="qq icon">i>
								div>

然后设置jQuery

$('.qq').popup();

**效果图