给网站增加底部Footer导航样式

橘子网 4,633

橘子网前前后后对样式做了一些调整,看到底部footer光秃秃的,索性也添加一些底部导航样式来装饰一下网站。

给网站增加底部Footer导航样式

网站头部引入JS和CSS

<link rel="stylesheet" type="text/css" href="/daohang/baise/statics/css/style.css" />
<script src="/daohang/baise/statics/js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>

网站底部添加如下代码

<!-- 首页底部特效 -->

<div class="copyright">
	<div class="copyright_c">
		<div class="copyright_head">
			<div class="copyright_L">
				<p><img src="/daohang/baise/statics/images/logo.png" alt="给网站增加底部Footer导航样式" alt="桔子网欢迎您"/></p>
				<span>
			<em>橘子网</em>
			<em> - 随心创作,知识畅享</em>
		</span>
				<span>
			<em>反馈邮箱:</em>
			huafengpp@qq.com
		</span>
				<span>
			<em>联系Q Q:</em>
			<a target="_blank" rel="nofollow" href="http://wpa.qq.com/msgrd?v=3&uin=546541225&site=qq&menu=yes" >在线交谈</a>
		</span>
			</div>
			<div class="copyright_C">
				<div class="copyright_C_list">
					<p><i class="fa fa-th-large" aria-hidden="true"></i> 词条导航</p>
					<div class="about">
						<a target="_blank" href="https://www.juzihuang.com/tag/yuanma/">特效源码</a>
						<a target="_blank" href="https://www.juzihuang.com/tag/seo/">SEO术语</a>
					</div>
					<div class="about">
						<a target="_blank" href="https://www.juzihuang.com/tag/paper/">壁纸头像</a>
						<a target="_blank" href="https://www.juzihuang.com/tag/winsoft/">电脑软件</a>
					</div>
					<div class="about">
						<a target="_blank" href="https://www.juzihuang.com/tag/404html/">404源码</a>
						<a target="_blank" href="https://www.juzihuang.com/tag/gushi/">民俗故事</a>
					</div>
				</div>
				<div class="copyright_C_list">
					<p><i class="fa fa-book" aria-hidden="true"></i> 趣味知识</p>
					<div class="about">
						<a target="_blank" href="https://www.juzihuang.com/tag/zimi/">猜字谜语</a>
						<a target="_blank" href="https://www.juzihuang.com/tag/cygs/">成语故事</a>
					</div>
					<div class="about">
						<a target="_blank" href="https://www.juzihuang.com/tag/zhsx/">组合数学</a>
						<a target="_blank" href="https://www.juzihuang.com/tag/sxjhyl/">几何原理</a>
					</div>
					<div class="about">
						<a target="_blank" href="https://www.juzihuang.com/tag/lishi/">趣味历史</a>
						<a target="_blank" href="https://www.juzihuang.com/tag/dili/">趣味地理</a>
					</div>
				</div>
				<div class="copyright_C_list">
					<p><i class="fa fa-envelope" aria-hidden="true"></i> 关于我们</p>
					<div class="about">
						<a target="_blank" href="https://www.juzihuang.com/jianli/">博主简介</a>
						<a target="_blank" href="https://www.juzihuang.com/tao/">领优惠券</a>
					</div>
					<div class="about">
						<a target="_blank" href="https://www.juzihuang.com/daohang/">SEO导航</a>
						<a target="_blank" href="https://www.juzihuang.com/seoer/">橘子SEO</a>
					</div>
					<div class="about">
						<a target="_blank" href="https://www.juzihuang.com/zhanzhang/">站长SEO</a>
						<a target="_blank" href="https://www.juzihuang.com/tag/wlptzghc/">万里平台</a>
					</div>
				</div>
			</div>
			<div class="copyright_R">
				<span><img src="/daohang/baise/statics/images/ewm1.jpg" alt="给网站增加底部Footer导航样式" alt="橘子君微信" /></span>
				<p>欢迎扫描添加站长微信</p>
			</div>
		</div>
	</div>
</div>
<!-- 首页底部 end -->

在线演示

上一篇:

下一篇:

相关阅读

分享