2020-11-05 css实例：固定定位及样式解释

固定定位实例

HTML：
建立一个无序列表，添加内容

		<div class="rightnav">/*建立一个div大盒子*/
			 <ul>
			 	<li><a href="">手机APP</a></li>/*每一行li里添加内容*/
			 	<li><a href="">个人中心</a></li>
			 	<li><a href="">售后服务</a></li>
			 </ul>
		</div>

css:

/*rightnav*/
.rightnav{			/*整个固定定位盒子样式*/
	/*margin-left: 1400px;*/ /*整个盒子向左移动，使盒子在页面右侧，需要设置具体数值，无法自适应*/
	position: fixed;/*设置固定定位*/
	bottom:70px;/*设置固定盒子在向下70px距离时固定*/
	right:0;/*使整个盒子距离右边距离为0，可以自适应*/
}
.rightnav ul li{	/*盒子中每个小盒子样式*/
	width: 84px;/*宽度*/
	height: 114px;/*高度*/
	list-style: none;/*去掉li项目列表符号*/
	background: #fff url(../img/98a23aae70f25798192693f21c4d4039.png) no-repeat 11px 16px;/*设置背景颜色，插入背景图片*/
	border: 1px solid #f5f5f5;/*设置边框颜色*/
}
.rightnav ul li a{	/*每个小盒子里的链接*/
	position: relative;/*相对定位改变字与盒子的距离*/
	left:13px;/*相对于原位置向右移动13px*/
	top:78px;/*相对于原位置向下移动78px*/
	color: #757575;/*字体颜色*/
	font-size: 14px;/*字体大小*/
	text-decoration: none;/*去掉a链接下划线*/
}

效果如下：