做这部分：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/reset.css"/>
<link rel="stylesheet" type="text/css" href="css/mycss1.css"/>
<!--样式表一般不会写在页面里面，一般单独拿出来，但是图片路径会变，要改为上一级目录的图片加../-->
</head>
<body>
<footer>
<div class="wrap">
<div class="dj-logo">
<p>年轻人专属的社交招聘</p>
</div>
<div class="dj-phone">
<p>
<span>客服电话：</span>
<i>400-813-1117</i>
</p>
<p>
<span class="worktime">工作时间：</span>
<i>周一至周五</i>
</p>
</div>
<div class="dj-reg">
<a href="#" class="reg">快速注册</a>
<a href="#" class="login">已有账号，登录</a>
</div>
<div class="clear"></div>
</div>
</footer>
</body>
</html>
css样式表：
/*整体布局样式*/
footer{
height: 100px;
width: 100%; background:
rgba(0,0,0,.3);
position: fixed;
bottom: 0px;}
.wrap{
width: 950px;
margin: 0px auto;
height: 100px;}
.dj-logo,.dj-phone{
float: left;}
.dj-reg{float: right;}
.clear{clear: both;}
/*logo部分样式*/
.dj-logo p{
height: 60px;
line-height: 60px;
background: url("../img/大街网.png") no-repeat;
padding-left:70px;
border-right: 1px solid #ddd;
padding-right: 40px;
margin-top: 20px;
font-size: 16px; color: #fff;}
/*联系方式部分*/
.dj-phone p{
margin-top: 17px;
margin-left: 30px;}
.dj-phone p span{
background: url("../img/大街网2.png") no-repeat 0px 2px;
padding-left: 30px;
color: #ddd;
font-size: 16px;
display: inline-block;
height:25px;}
/*背景图定位,第一个x轴,第二个y轴.此例中为了移动图片显示把span变成了行内块元素,并给span设置了高*/
.dj-phone .worktime{background: url("../img/大街网55.png")no-repeat 0px 0px;}
.dj-phone p i{
color: #fff;
font-style: normal;
font-size: 16px;}
/*注册部分样式*/
.reg{
display: block;
width: 130px;
height: 40px;
background:orange;
border-radius: 5px;
line-height: 40px;
text-align: center;
color: #fff;
font-size: 18px;
margin-top: 20px;
margin-bottom: 10px;
}
.login{
padding-left: 15px;
color: #ddd;
}
显示如下：
