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">66</div>
										</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="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">
										<!-- horizontal样式可以将竖向的列表变为横向 -->
							    		<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.在<div class="ui vertical fluid menu">中如果有“文本”和“图标”在一起的情况menu会把文本一左一右分开，这个时候如果想让它们紧挨的话，将文本和图标放在<span></span>中

<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();

**效果图