请记住投稿邮箱是：203239351@qq.com 注册联系QQ203239351
前言：
今天再做一个底部开发，全称叫“网页底部信息开发”，底部信息有网站备案，网站版权以及网站描述等等，另外还在底部右侧添加了微信二维码。个人简介网站项目实战开发（底部/尾部代码实现）
顶部功能：
1、底部布局
2、底部左侧文字实现，底部右侧图片实现
代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首页</title>
<style>
*{
margin: 0;
padding: 0;
}
footer{
width: 100%;
height: 215px;
padding-top: 30px;
background-color: #282828;
}
.footer{
margin: 0 auto;
max-width: 1366px;
height: 150px;
/*background-color: #e82c07;*/
}
.footer_right{
float: right;
/*max-width: 170px;*/
width: 170px;
height: 150px;
text-align: center;
/*background-color: deepskyblue;*/
color: #eeeeee;
}
.footer_right img{
width: 120px;
height: 120px;
}
.footer_top{
max-width: 1190px;
height: 50px;
/*background-color: pink;*/
}
.footer_top a{
margin-right: 10px;
text-decoration: none;
line-height: 50px;
font-size: 20px;
color: #eeeeee;
}
.footer_bottom{
max-width: 1190px;
}
.footer_bottom p{
line-height: 30px;
color: #eeeeee;
}
</style>
</head>
<body>
<footer>
<div class="footer">
<div class="footer_right">
<img src="img/weixin.png" alt="微信添加好友">
<p>关注微信</p>
</div>
<div class="footer_top">
<a href="#">宗波尘客</a>
<a href="#">游客留言</a>
<a href="#">免责申明</a>
<a href="#">联系站长</a>
<a href="#">本站标签</a>
</div>
<div class="footer_bottom">
<p>Copyright © 2018-2019 www.zbck123.com , All Rights Reserved | 此处填写网站底部信息此处填写网站底部信息
<br>
此处填写网站底部信息|web前端开发|网站运营|html教程|css教程|php教程入门到精通以及网站源码</p>
<p>Theme by 宗九尘、Powered by 翔哥</p>
</div>
</div>
</footer>
</body>
</html>
代码解说：
1、footer常用来定义页脚，一般网站底部均会选择用footer标签来布局网页底部（footer可以用div等其他盒标签替代）
2、footer下面的三个div中，第一个div是浮动于右侧的盒子，用来放置二维码；第二个div是第一行文字标签；第三个div是底部信息网站备案和网站描述。
3、其中div内使用a(超链接)标签和p(段落)标签包裹文字
4、“ * ” 是通配符选择器，设置margin外边距和padding内边距为0。（浏览器默认会给网页添加内边距和外边距，因此网页需要清零边距）
5、width：100%；是盒子宽度随着浏览器显示的边距大小而变化（盒子宽度等于浏览器边距）
6、margin：0 auto；是让盒子左右水平居中
7、text-decoration：none；清除a标签下划线
8、line-height: 50px;设置文字行高为50像素。（注：必须带px这个单位，行高等于盒子height高度则会让盒子中的文字水平居中）
9、其中所使用的css选择器主要有标签选择器、类(class)选择器、后代选择器
效果图展示：
说明：
大家复制代码后会与效果图有所区别，最主要的区别在于右侧二维码图片没有。本代码二维码图片是放置于文件夹下可以找到的，如果直接复制代码在浏览器运行，想要显示二维码，则必须添加二维码图片，img标签下的src是填写图片地址路径的地方，可以使用远程网络路径（绝对路径），也可以使用本地路径（相对或者绝对路径）。
本效果是使用html5所写，部分浏览器对H5不支持，则会出现乱码。例如IE6以下的浏览器，不支持H5代码会出现网页乱码
如果其中有什么标签不明白什么意思，可以直接百度搜索，另外给大家一个初学者可以使用的代码查询工具 W3school
宗波尘客(www.zbck123.com)宗九尘博客 联系QQ：203239351
