七.footer部分的制作

一.footer部分的制作分析

　　　footer部分比较简单,只有一个靠右的横向列表

二.代码的实现

　　1.HTML代码

    <div class="foot">
        <div class="foot-box">
            <a href="">Home</a>
            <a href="">About</a>
            <a href="">Portfolio</a>
            <a href="" class="noborder">Contact</a>
        </div>
    </div>

　　　　这里我们先用一个div设置footer整体部分

　　　　再在其中放一个div,用来存放横向列表

　　2.CSS代码

.foot{
    font-size: 12px;
    color: #ffffff;
    background: #66c5b4;
    padding: 20px 40px;
}
.foot-box{
    float: right;
}
.foot-box a{
    border-right: 1px solid #fff;
    float: left;
    padding: 0 18px;
}
.foot .noborder{
    border: none;

 

　　　　首先,我们设置footer的背景颜色以及内边距控制文字与边框的距离,并设置其中的文字大小,文字颜色

　　　　然后设置横向列表的div为右浮动

　　　　再设置横向列表单项左浮动,且右边框为1px solid #fff,这里也需要设置左右内边距,用来撑开项与项之间的距离

　　　　最后我们设置横向列表最后一项,使右边框不显示