立马就会的纯css实现自适应(左)右侧栏悬浮和底部悬浮

需求背景

有一天leader走到我旁边，笑嘻嘻的和我说让我弄一个有意思的东西，给公司H5页面左边栏加一个二维码图片，准备交给前端做的时候发现公司没有前端，嘤嘤嘤~。经过不断的尝试顺便做个笔记，分享给大家。

代码实战(左/右侧栏悬浮)

html代码

<div class="soller">
		<ul>
			<li><a href="#" alt="在线咨询"  style="font-size: 10px;">
			<img src="img/65d4a6a6565d1f80d30dade0f3583b4.png" alt="在线咨询" ></a>
			</li>
	        </ul>
</div>

CSS代码

*{
	padding: 0;
	margin: 0;
}
		/*slider   图标*/
.soller{
	position: fixed;
	top: 50%;
	border: 1px solid rgba(0,0,0,0);
}
.soller ul{
	margin-top: -200px;
}
.soller ul li{
	width: 80px;
	height: 80px;
	margin: 10px 0 0;
	list-style: none;
	text-align: center;
}

.soller ul li a{
	width: 100%;
	height: 100%;
	color: #fff;
	text-decoration: none;
	/*margin: 0 auto;*/
}
.soller ul li a img{
	width:100px;
	height: 100px;
	vertical-align: middle;
	display: table-cell;
	margin: 5px auto 0;
}

运行的效果   就会显示在左边栏

需求背景

我把代码提交后以为可以脱离苦海啦，这时候leader又走到我旁边，让我再优化一下，leader觉得滑下去后回到首页太麻烦啦，要我弄一个一键回到首页的按钮，嘤嘤嘤~。

代码实战(底部悬浮)

HTML代码

<div class="cart-concern-btm-fixed four-column" id="cart1" style="display: table;"> 
<div class="concern-cart"> 
<span><a>返回首页</a></span> 
</div> 
</div>

CSS代码

<style>
.cart-concern-btm-fixed { 
bottom: 0; 
height: 50px; 
left: 0; 
position: fixed; 
text-align: center; 
width: 100%; 
z-index: 10; 
} 
.four-column .concern-cart { 
width: 100%; 
} 
.concern-cart { 
background-color: rgba(0, 0, 0, 0.8); 
} 
.concern-cart a { 
color: #d4d4d4; 
font-size: 10px; 
} 
.concern-cart span { 
display: block; 
height: 50px; 
color: white;
line-height: 50px; 
text-align: center; 
}  
</style>

最后实现出来的效果就会悬浮在底部