底部查询栏

<link rel="shortcut icon" href="favicon.ico">
<link href="css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
<link rel="stylesheet" href="css/bootstrap.min.css" />
<script type="text/javascript" src="js/jquery.min.js" ></script>

<style>
    /*顶部图片信息*/
    .myTop{
        position: absolute;
        top: 0;
        width: 100%;
        height: 40%;
        overflow: hidden;
    }

    .myTop-img img{
        width: 100%;
    }

    .myTop-img-back{
        position: absolute;
        width: 100%;
        height: 100%;
        background: linear-gradient(45deg, #0055B2 , #ffffff);
        opacity: 0.8;

    }
    .myTop-font{
        position: absolute;
        bottom: 0;
        height: 50%;
        width: 100%;
        color: #FFFFFF;
        z-index: 1000;
        font-family: "微软雅黑";
        font-size: 18px;
        text-indent: 20px;
    }
    .liu{
        font-size: 30px;
    }

    /*底部导航*/
    .myFoot{
        border-top: 1px solid #E0E0E0;
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 50px;
        background-color: #ffffff;
    }

    /*内容部分*/
    .myCont{
        margin-top: 72%;
        margin-bottom: 13%;
    }
    .gxp img{
        width: 40px;
        border-radius: 50%;
        border: 2px solid #FFFFFF;
        margin: auto 5px;
    }
    .row img{
        margin: 5px auto;
    }
    .myFoot a{
        color: #7F7F7F;
        text-align: center;
        line-height: 50px;
    }
</style>

<script type="text/javascript">

    $(document).ready(function(){

        $(".myFoot a").click(function(){

            //改变当前被点击的元素样式
            $(this).css({
                "color":"#0062FA"
            });

            //还原同胞元素
            $(this).siblings().css({
                "color":"#7F7F7F"
            });


        });

    });

</script>

<!--顶部图片信息-->
<div class="myTop">

    <div class="myTop-font">

        <p class="liu">刘德华</p>
        <p style="float: left;" >Andy Lau </p>
        <p style="float: right;margin-right: 20px;">
            <i class="fa fa-map-marker"></i>&nbsp;&nbsp;中国&nbsp;·&nbsp;香港
        </p>

        <hr style="clear: both;width: 95%;margin:60px auto 20px;" />


        <p style="float: left;">关系谱</p>
        <div class="gxp" style="float: right;margin-right: 20px;">
            <img src="img/a1.jpg" />
            <img src="img/a2.jpg" />
            <img src="img/a3.jpg" />
            <img src="img/a4.jpg" />
            <i class="fa fa-chevron-right"></i>
        </div>
    </div>

    <!--蒙版-->
    <div class="myTop-img-back"></div>

    <!--背景图片-->
    <div class="myTop-img">
        <img src="img/timg.jpg"/>
    </div>

</div>

<!--内容部分-->
<div class="myCont container">


    <p style="font-size: 20px;font-family: '微软雅黑';text-align: center;">作品展示</p>

    <div class="row">
        <img class="col-xs-6 img-thumbnail" src="img/a1.jpg" />
        <img class="col-xs-6 img-thumbnail" src="img/a1.jpg" />
        <img class="col-xs-6 img-thumbnail" src="img/a1.jpg" />
        <img class="col-xs-6 img-thumbnail" src="img/a1.jpg" />
        <img class="col-xs-6 img-thumbnail" src="img/a1.jpg" />
        <img class="col-xs-6 img-thumbnail" src="img/a1.jpg" />
        <img class="col-xs-6 img-thumbnail" src="img/a1.jpg" />

    </div>

</div>


<!--底部导航-->
<div class="myFoot container-fluid">

    <div class="row">
        <a class="col-xs-4" href="javascript:;">
            <i class="fa fa-book"></i>
            最新作品
        </a>
        <a class="col-xs-4" href="javascript:;">
            <i class="fa fa-book"></i>
            绯闻八卦
        </a>
        <a class="col-xs-4" href="javascript:;">
            <i class="fa fa-book"></i>
            关系谱
        </a>
    </div>


</div>