公用html底部样式

最新推荐文章于 2024-08-23 09:58:09 发布

学习记录每一天

最新推荐文章于 2024-08-23 09:58:09 发布

阅读量1k

点赞数 1

分类专栏： html

本文链接：https://blog.csdn.net/lichuang214/article/details/106420483

版权

html 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<style>
li{ list-style:none}
a{ text-decoration:none}
.footer{
    width: 100%;
	background:#007138;
	border-top: 1px solid #e1e1e1;
	margin-top: 20px;
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 999;
}
.footer ul{
	margin-top: 10px;
}
.footer ul li{
	width: 25%;
	text-align: center;
	float: left;
	margin-bottom: 5px;
}
.footer ul li img{
	width: 24px;
	height: 22px;
}
.footer > ul > li > a > i{
	width: 24px;
	height: 22px;
}
.footer > ul > li > a > i{
	display: inline-block;
}
.footer > ul > .d1 > a > i{
	background:url(http://www.daxuepai.com/m/assets/images/fot01.png) no-repeat;
    background-size: 100% 100%;
}
.footer > ul > .d2 > a > i{
	background: url(http://www.daxuepai.com/m/assets/images/fot02.png) no-repeat;
    background-size: 100% 100%;
}
.footer > ul > .d3 > a > i{
	background: url(http://www.daxuepai.com/m/assets/images/fot03.png) no-repeat;
    background-size: 100% 100%;
}
.footer > ul > .d4 > a > i{
	background: url(http://www.daxuepai.com/m/assets/images/fot04.png) no-repeat;
    background-size: 100% 100%;
}
.footer > ul > li > a > p{
	font-size: 10px;
}
.footer ul li .fot_ico{
	height: 44px;
	display: inline-block;
}
.footer ul li a{
	cursor: pointer;
	color: #fff;
	display: inline-block;
}

</style>

 <footer class="footer clearFix">
	<ul>
		<li class="d1"><a href="/"><i></i><p>首页</p></a></li>
		<li class="d2"><a href="tel:13578749811"><i></i><p>一键拨号</p></a></li>
		<li class="d3"><a href="https://tb.53kf.com/code/client/0ba8ed3d2903531e4e7f21afd9323a22/1"><i></i><p>在线咨询</p></a></li>
		<li class="d4"><a href="/m/wsbm.html"><i></i><p>网上报名</p></a></li>
	</ul>
</footer>

</html>