HTML新闻网页页脚源代码

当我们浏览网页的时候，常常会看到一个共同的东西，那就是页脚。页脚一般位于网页的最底部，用来展示一些版权信息、联系方式以及一些相关链接等等。本文将为大家详细介绍如何编写一个简单的HTML新闻网页的页脚源代码。

HTML代码

我们先来看一下这个HTML新闻网页的页脚源代码：

<footer>
	<div id="footer-content">
		<address>联系人：XXX 地址：XXXXXX 邮箱：XXXXX@gmail.com</address>
	</div>
	<div id="footer-links">
		<a href="about-us.html">关于我们</a>
		<a href="contact-us.html">联系我们</a>
		<a href="privacy-policy.html">隐私政策</a>
	</div>
	<p>版权所有 © 2021 XXX All Rights Reserved</p>
</footer>
	

以上代码中，我们使用了HTML的<footer>标签来创建页脚，然后在页脚中分别创建了两个DIV标签，其中一个用于展示联系信息，一个用于展示相关链接。在联系信息的DIV标签中，我们使用了HTML5的内置标签<address>，用于展示地址、邮箱等信息。在相关链接的DIV标签中，我们使用了HTML的超链接标签<a>，为用户提供了快速访问关于我们、联系我们和隐私政策等网页的链接。最后，我们在footer标签的末尾加入一个版权信息的<p>标签，用于展示版权归属及年份等信息。

CSS样式

当我们完成了HTML代码的编写，接下来就需要为这个页面的页脚添加一些CSS样式了。以下是一些基本的CSS样式，您可以按照自己的喜好进行修改：

footer {
	background-color: #f5f5f5;
	font-size: 14px;
	height: 80px;
	line-height: 80px;
	clear: both;
}

#footer-content {
	float: left;
	padding-left: 20px;
}

#footer-links {
	float: right;
	padding-right: 20px;
}

#footer-links a {
	color: #333333;
	margin-right: 10px;
}
	

以上CSS样式中，我们首先对<footer>标签进行了一些基本样式的设置，包括背景颜色、字体大小、高度等。然后我们分别对联系信息和相关链接的DIV标签进行了左右浮动和内边距的设置。最后，我们为相关链接的超链接添加了一个指向下划线的样式，并为超链接之间添加了一些间距。

按照以上的HTML代码和CSS样式，我们就可以创建出一个简单但美观的HTML新闻网页的页脚了。当然，如果您想要进行更多的个性化设置，也可以按照自己的需要添加更多的HTML标签和CSS样式。