简单底部导航片段

最新推荐文章于 2023-07-14 18:34:55 发布

明天早晨喝牛奶

最新推荐文章于 2023-07-14 18:34:55 发布

阅读量141

点赞数

分类专栏：效果片段集合实例

本文链接：https://blog.csdn.net/qq_40289292/article/details/78110488

版权

效果片段集合同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

实例

1 篇文章 0 订阅

订阅专栏


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title></title>

    <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>
</head>
<body>

    <!--顶部图片信息-->
    <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>

</body>
</html>

明天早晨喝牛奶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单底部导航片段

<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title></title> <link rel="shortcut icon" h
复制链接

扫一扫