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

最新推荐文章于 2025-04-25 14:28:47 发布

CHH5431

最新推荐文章于 2025-04-25 14:28:47 发布

阅读量3.1w

点赞数 12

分类专栏：纯css 文章标签：官网底部友情链接

本文链接：https://blog.csdn.net/qq_41115965/article/details/80286766

版权

纯css 专栏收录该内容

19 篇文章

订阅专栏

本文提供了常见的网站底部友情链接的代码示例，适用于初学者参考，帮助理解如何构建底部布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

<!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>

效果图如下：