拉钩网前端项目实战
拉钩网前端项目实战05
footer部分设计
一、footer部分设计
1.html部分
<div class="footer">
<div class="fooTop main">
<div class="appBox fl">
<p class="btnApp"><span></span>下载拉钩APP</p>
<p class="btnApp"><span></span>微信小程序</p>
<p class="btnTxt">
<img src="img2/icon-wechat.png" alt="">拉钩微信
<img src="img2/icon-sina1.png" alt="">拉钩微博
</p>
</div>
<dl class="fl">
<dt>企业服务</dt>
<dd>招聘抢人宝典</dd>
<dd>公司搜索</dd>
<dd>拉钩APP </dd>
</dl>
<dl class="fl dlCen">
<dt>企业服务</dt>
<dd>招聘抢人宝典</dd>
<dd>公司搜索</dd>
<dd>拉钩APP </dd>
</dl>
<dl class="fl">
<dt>企业服务</dt>
<dd>招聘抢人宝典</dd>
<dd>公司搜索</dd>
<dd>拉钩APP </dd>
</dl>
</div>
<div class="fooBottom">
<div class="bottCon main">
<p class="txtP1 fl">©2018 拉勾网 京ICP备12312343</p>
<p class="txtP2 fl"><span class="fl"></span>京公安网备 110108099987658776号</p>
<div class="txtBox fl">
<span class="fl"></span>
<p class="fl">
违法和不良信息举报<br>
电话:4007878<br>
邮箱:cc@lagou.com
</p>
</div>
<div class="fr imgBox"><img src="img/footer_lagou.png" alt="" /></div>
</div>
</div>
</div>
2.css部分
.footer{
border-top: 1px solid #ebebeb;
margin-top: 70px;
.fooTop{
height: 236px;
padding-top: 50px;
.appBox{
margin-right: 130px;
width: 314px;
height: 170px;
border-right: 1px solid #e8e8e8;
.btnApp{
width: 180px;
height: 44px;
border: 1px solid #00b38a;
line-height: 44px;
margin-bottom: 17px;
span{
float: left;
width: 15px;
height: 15px;
background: url('img/sprite2.png') no-repeat;
margin-left: 38px;
margin-top: 14px;
margin-right: 8px;
}
}
.btnApp:nth-child(1) {
span{
background-position: -148px -220px;
}
}
.btnApp:nth-child(2) {
span{
background-position: -215px -54px;
}
}
.btnTxt{
img{
display: inline-block;
margin-right: 5px;
}
img:nth-child(2){
display: inline-block;
margin-left: 28px;
}
}
}
.dlCen{
margin: 0 170px;
}
dl{
dt{
font-size: 18px;
color: #555;
margin-bottom: 26px;
}
}
dl{
dd{
font-size: 12px;
color: #555;
height: 44px;
line-height: 44px;
}
}
}
.fooBottom{
height: 100px;
background: #fafafa;
.bottCon{
height: 100px;
font-size: 12px;
color: #555;
p{
margin-top: 50px;
margin-right: 20px;
}
span{
background: url('img/sprite2.png') no-repeat;
}
.txtP2{
span{
width: 16px;
height: 16px;
background-position: -150px -184px;
}
}
.txtBox{
width: 186px;
height: 58px;
border: 1px solid #555;
margin-top: 28px;
span{
width: 20px;
height: 24px;
background-position: -132px -20px;
margin-top: 18px;
margin-left: 20px;
}
p{
margin-top: 8px;
margin-left: 10px;
}
}
.imgBox{
margin-top: 50px;
}
}
}
}
二、结果设计图