悦轩饼家-公共样式页脚

网站建设如何设计网页的底部，页脚对网站的重要性

为您的网站创建有效的页脚由于它位于页面底部，因此您的网页页脚可能会被忘记或被忽略。但是，这可能是一笔巨大的财富。它用于访问者传递信息。它在您的网站导航中起到着至关重要的作用。

一、什么是页脚？

        一个网站的页脚（网页底部）位于页面最底部、在页面底部放置有用的信息，但并非必须信息。任何信息都有可能是目标客户可能会感兴趣的，或者应该存放在于网站上，但将其放入主菜单栏中以保持紧凑和逻辑是不合理的。

二、网站页脚的优势有哪些？

页面设计专业化

        在网站建设过程中，对于页脚的设计让人感到专业化，视觉感觉好，这样访客看起来干净整洁。在页脚添加按钮和链接，可以让访客在浏览页面时，不会感到乏味无聊。

良好的视觉层次

        在设计页脚的时候做到段落分明有层次感，先标题，后正文，页脚。这样的排列可以提高页脚聚焦性和可读性。

下面是悦轩饼家页脚代码的展示：

html部分：

<!-- 页脚 -->
<footer class="">
			<div class="container" id="cc">
				<div id="footer-aa">
					<div id="footer-aa-a">
						<p><a href="#">品牌动态</a></p><span>|</span>
						<p><a href="#">生产经营资质</a></p><span>|</span>
						<p><a href="#">企业合作</a></p><span>|</span>
						<p><a href="#">发票申请</a></p><span>|</span>
						<p><a href="#">平台规则</a></p><span>|</span>
						<p><a href="#">帮助服务</a></p><span>|</span>
						<p><a href="#">联系我们</a></p>
					</div>
					<div id="footer-aa-b">
						<p>📞<a href="tel:4009996665">400-999-6665</a></p>
						<p><a href="#">WEIBO</a></p>
						<p><a href="#">WECHAT</a></p>
						<p><a href="#">京东商城</a></p>
					</div>
				</div>
				<div id="footer-bb">
					<p>深圳市悦轩商城科技有限公司</p>
					<p>粤ICP备1603939号-6</p>
					<p>京公网安备440307020002399</p>
					<p>公司地址：深圳市龙岗区坂田街道布龙399鸿生源工业园A座5楼</p>
				</div>
			</div>
		</footer>

css部分：

/* 页脚样式 */
footer,
footer a {
	/* position: absolute;
	bottom: 0px; */
	background-color: #3e2d23;
	color: white;
}

#cc {
	height: 80px;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
}

footer #footer-aa {
	display: flex;
	justify-content: space-around;
}

footer #footer-aa span {
	color: gainsboro;
}

footer #footer-aa #footer-aa-a {
	width: 60%;
	display: flex;
	justify-content: space-between;
}

footer #footer-aa #footer-aa-b {
	width: 30%;
	display: flex;
	justify-content: space-between;
}

footer #footer-bb {
	display: flex;
	justify-content: space-around;
}

效果图：

 以上内容排版是多运用弹性布局！！

下面是最原始的排版：一个一个调

html部分：

<div class="xf_footer">
			<!-- 公共底部 -->
			<footer>
				<div class="footer1">
					<div class="msg">
						<a href="#">品牌动态</a>
						<a href="#">生产经营资质</a>
						<a href="#">企业合作</a>
						<a href="#">发票申请</a>
						<a href="#">平台规则</a>
						<a href="#">帮助服务</a>
						<a href="#">联系我们</a>
					</div>
					<div class="tel">
						<a href="#">
							<img src="img/tel_03.jpg" />
							<span>400-999-6665</span>
						</a>
						<a href="#">WEIBO</a>
						<a href="#">WECHAT</a>
						<a href="#">京东商城</a>
					</div>
				</div>
				<div class="footer2">
					<div class="copyright">
						<span>深圳市悦轩商城科技股份有限公司</span>
						<span>粤ICP备16039394号-6 </span>
						<span>京公网安备44030702002399</span>
						<span>公司地址：深圳市龙岗区坂田街道布龙339鸿生源工业园A座5楼</span>
					</div>
				</div>
			</footer>
			<!-- 公共底部 end -->
		</div>

css部分：

* {
	padding: 0;
	margin: 0;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

html {
	font-family: "Microsoft Yahei";
	font-size: 16px;
	background-color: #eeeee;
}

.clear:after {
	content: "";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
	overflow: hidden;
}

.clear {
	zoom: 1;
}

li {
	list-style: none;
}

a {
	text-decoration: none;
	cursor: pointer;
	color: #737373;
}

img {
	vertical-align: top;
	border: 0;
}
/**********footer**********/
.xf_footer{
	height: 146px;
	background: #3e2d23;
}
footer{
	width: 1251px;
	height: 125px;
	margin: 0 auto;
	overflow: hidden;
}
footer .footer1{
	overflow: hidden;
}
footer .footer1 .msg{
	margin-top: 37px;
	margin-left: 8px;
	float: left;
}
footer .footer1 .msg >a{
	color: #fff;
	padding-left: 12px;
	padding-right: 28px;
	border-right: 1px solid #b3a59c;
}
footer .footer1 .msg >a:last-child{
	border: 0;
}
footer .footer1 .tel{
	float: right;
	margin-top: 37px;
	margin-left: 56px;
}
footer .footer1 .tel a{
	margin-right: 16px;
	color: #fff;
}
footer .footer1 .tel a img{
	float: left;
	margin-right: 3px;
}
footer .footer2{
	text-align: center;
	margin-top: 34px;
	color: #fff;
}
footer .footer2 .copyright span{
	margin-right: 24px;
}

效果图：