常见网站底部友情链接代码示例

原创

CHH5431 2021-08-27 12:42:37 博主文章分类：纯css ©著作权

©著作权归作者所有：来自51CTO博客作者CHH5431的原创作品，请联系作者获取转载授权，否则将追究法律责任

公司的官网底部大多都有友情链接，一下代码为简单底部布局，仅供初学者参考。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>底部友情链接</title>
		<style type="text/css">
			/*通用开始*/
			
			* {
				margin: 0;
				padding: 0;
				font-family: '微软雅黑', Arial, Helvetica, sans-serif;
			}
			
			a {
				text-decoration: none;
			}
			
			img {
				border: none;
			}
			
			li {
				list-style: none;
			}
			
			body {
				font-size: 12px;
			}
			
			div {
				font-size: 12px;
			}
			
			span {
				font-size: 12px;
			}
			/*通用结束*/
			
			.footer {
				background: #2b2e33;
			}
			
			.footer .alt {
				overflow: hidden;
				padding: 20px 0;
				width: 1160px;
				margin: auto;
			}
			
			.footer .alt .foot {
				width: 138px;
				float: left;
			}
			
			.footer .alt .foot p {
				color: #FFF;
				line-height: 28px;
			}
			
			.footer .alt .foot a {
				color: #999;
				display: block;
				line-height: 24px;
			}
			
			.footer .alt .foot a:hover {
				color: #CCC;
			}
			
			.footer .alt .foot img {
				padding-top: 20px;
			}
		</style>
	</head>

	<body>
		<div class="footer">
			<div class="alt">
				<div class="foot">
					<p>关于我们</p>
					<a href="###">企业简介</a>
					<a href="###">企业文化</a>
					<a href="###">组织机构</a>
					<a href="###">发展历程</a>
					<a href="###">企业荣誉</a>
					<a href="###">诚聘英才</a>
					<a href="###">联系我们</a>

				</div>
				<div class="foot">
					<p>新闻中心</p>
					<a href="###">公司新闻</a>
					<a href="###">行业新闻</a>
				</div>
				<div class="foot">
					<p>产品及解决方案</p>
					<a href="###">产品系列</a>
					<a href="###">解决方案</a>
				</div>
				<div class="foot">
					<p>研发与创新</p>
					<a href="###">核心技术</a>
					<a href="###">技术创新</a>
				</div>
				<div class="foot">
					<p>经典案例</p>
					<a href="###">智慧城市</a>
					<a href="###">智慧高速</a>
					<a href="###">智慧家居</a>
					<a href="###">智慧网络</a>
				</div>
				<div class="foot">
					<p>服务支持</p>
					<a href="###">技术支持</a>
					<a href="###">服务网络</a>
					<a href="###">资料下载</a>
					<a href="###">公司理念</a>
				</div>
				<div class="foot">
					<p>关注我们</p>
					<img src="http://placehold.it/82x82" />
				</div>
			</div>
			<div style="border-top:1px #1F1F1F solid;">
				<p class="alt" style="color:#999; line-height:0;">@ 版权所有：郑州鬼谷青龙实业有限公司    
					<span>技术支持：</span>
					<a href="###" target="_blank" style="color:#999;">河南鬼谷子科技公司</a>
					<span style="float:right;">地市：郑州市轩辕区摩天大厦大厦99楼</span>
				</p>
			</div>
		</div>
	</body>

</html>

效果图如下：

常见网站底部友情链接代码示例_底部