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

461人参与｜分类: 网页代码｜时间:2019年03月12日 21:08

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

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

效果如下：

360截图20190312210759134.jpg

来源：酷米社区（关注电脑技术和资源分享的博客）转载请保留此处和链接！

地址：http://www.kumi6.com/?id=100

人喜欢人鄙视打赏本站

一	二	三	四	五	六	日
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29

酷米社区

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

461人参与｜分类: 网页代码｜时间:2019年03月12日 21:08

发表评论酷米社区

相关文章阅读更多：代码

作者介绍

酷米社区

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

461人参与 ｜分类: 网页代码｜时间:2019年03月12日 21:08

发表评论酷米社区

相关文章阅读更多：代码

作者介绍

461人参与｜分类: 网页代码｜时间:2019年03月12日 21:08